DOM節點基本方法和屬性

一、DOM（Document Object Model）是由W3C規範

 

已接觸標準組織：ECMA  W3C

 已經到DOM4了 ，dom.0是出現規範以前的方法

 

兩大陣營：

支持：DOM瀏覽器（Chrome、Opera、Firefox、Safari）

不支持：IE（6.7.八、360、騰訊遨遊等）

 

二、節點：node

 

 

（1）Tree

 

經常使用節點類型：

元素節點：head body 。。。。

屬性節點：id maxlength

文本節點：文本內容

 

獲取屬性：

 

	nodeType	nodeName	nodeValue
元素	1	元素名	null
屬性	2	屬性名	屬性值
文本	3	#text	文本內容

 

 

 

ById  獲取的是元素

 

 attr=text.attributes[0]   有個僞數組

 

 

Let  text=title.firstChild;

 

<h1 id="text">文本</h1>

        <script>

            window.onload=function(){

                //元素

              let oText=document.getElementById("text");

              console.log(oText.nodeName);//h1

              console.log(oText.nodeType);//1

              console.log(oText.nodeValue);//null

                //獲取屬性

              let attr=oText.attributes[0];

              console.log(attr.nodeType);//2

              console.log(attr.nodeName);//id

              console.log(attr.nodeValue);//text

                //獲取文本

              let tx=oText.firstChild;

              console.log(tx.nodeType);//3

              console.log(tx.nodeName);//#text

              console.log(tx.nodeValue);//文本

            };

        

        </script>

 

（2） 獲取節點方法：（document）

 

一、 document.getElementById   

二、 document.getElementsByTagName  類型不是Array是集合     使用for of 遍歷

三、document.getElementsByName   節點裏添加name屬性和屬性值 獲取多個

四、document.getElementsByClassName    ps：有兼容問題

 

不考慮ie678的狀況下

五、querySelector(「」)      傳入選擇器    只能找到子元素的第一個

（推薦）六、querySelectorAll           可獲取全部子元素

 

「div p[name=elementP]」 屬性選擇

 

（3）遍歷節點：利用父與子，兄弟關係 （父節點.）

 

遍歷節點屬性：

firstChild 第一個節點

lastChild 最後一個節點

nextSibling 下一個兄弟

previousSibling 上一個兄弟節點

parentNode 父節點

childNodes 全部子節點

 

Ps：注意換行有#text！！！

  

（4）建立節點（方法） （document.）

createElement 建立元素

createAttribute  建立屬性

createTextNode  建立文本節點

 

 

（5）增長節點（父節點.）

 

appendChild  往節點的最後添加

 

添加屬性：.屬性

不一樣，className=「color」；

 

insertBefore 往節點的前面添加 （新的，已經存在的） 父.insertBefore（p，d2.firstchild）

 

 

（6）修改節點（父節點.）

 

replaceChild   （新的節點，舊的節點） 父.replaceChild （新的，要替換的）

 

（7）刪除節點（父節點.）

 

removeChild

 

 

簡化添加步驟： 

 

innerHTML

innerText

 

注意：不是dom標準，可是瀏覽器都兼容，IE

 

innerHTML:標籤不會被解析

 

特色一、返回一個字符串；

特色二、能夠直接添加字符串   

 tr.innerHTML=「<P>增長段落</P>」+tr.innerHTML;         

tr.innerHTML+="<P>增長段落</P>";

 

innerText:獲取瀏覽器源碼的時候，可使用

 

multiple屬性

 

option  selected 獲取選中狀態