元素節點
元素節點就是HTML標簽元素，元素節點主要提供了對元素標簽名、子節點及屬性的訪問；
元素節點的三個node屬性：nodeType：1、nodeName/TagName：元素的標簽名大寫、nodeValue：null；
其父節點 parentNode 指向包含該元素節點的元素節點 Element 或文檔節點 Document；
元素的 childNodes 屬性中包含了它的所有子節點，這些子節點可能是元素、文本、注釋、處理指令節點；
childNodes 結合 NodeType 可以檢查有幾個元素子節點：
<ul class="list" id="list"> <li class="in"></li> <li class="in"></li> </ul> <script> var oList = document.getElementById('list'); var children = oList.childNodes; var num = 0; for(var i = 0; i < children.length; i++){ if(children[i].nodeType == 1){ num++; } } console.log(num);//2 有2個元素子節點 </script>操作屬性的方法主要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()四個，可以針對任何屬性使用，包括那些以HTMLElement類型屬性的形式定義的屬性；
<div class="wrapper" id='test' for="nice" style="width:200px;height:100px;background:#f0f">123</div> <script type="text/javascript"> var oTest = document.getElementById('test'); //IE6/IE7不支持hasAttribute方法 console.log(oTest.hasAttribute('class'));//true console.log(oTest.hasAttribute('className'));//false console.log(oTest.hasAttribute('id'));//true console.log(oTest.hasAttribute('style'));//true console.log(oTest.hasAttribute('for'));//true console.log(oTest.hasAttribute('htmlFor'));//false </script> <script type="text/javascript"> var oTest = document.getElementById('test'); oTest.setAttribute('class','aaa'); //setAttribute直接用class就可以了 oTest.setAttribute('className','bbb'); console.log(oTest.class);//undefined IE8及以下會報錯缺少標識符 console.log(oTest.getAttribute('class'));//aaa getAttribute直接用class就可以了 console.log(oTest.className);//aaa console.log(oTest.getAttribute('className'));//bbb oTest.setAttribute('style','border:1px solid red;height: 100px;'); //setAttribute直接用 style 就可以了 console.log(oTest.style);//所有的style設置，包括你沒有設置的，太多了，肯定不是你想要的 console.log(oTest.getAttribute('style')); //border:1px solid red;height: 100px; getAttribute直接用 style 就可以了 oTest.setAttribute('for','eee'); //setAttribute直接用for就可以了 oTest.setAttribute('htmlFor','fff') console.log(oTest.for);//undefined IE8及以下會報錯缺少標識符 console.log(oTest.htmlFor);//undefined console.log(oTest.getAttribute('for'));//eee getAttribute直接用for就可以了 console.log(oTest.getAttribute('htmlFor'));//fff console.log(oTest); //<div class="aaa" id="test" for="eee" style="ddd" classname="bbb" htmlfor="fff">123</div> </script><div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div> <script type="text/javascript"> var oTest = document.getElementById('test'); oTest.removeAttribute('class'); //removeAttribute直接用class就可以了 oTest.removeAttribute('for'); oTest.removeAttribute('style'); console.log(oTest);// <div id="test">123</div> </script>屬性節點
屬性節點，有的叫特性節點，差不多一個意思；
屬性節點的三個node屬性，nodeType:2、nodeName/name:屬性名稱、nodeValue/value：屬性值；
屬性節點還有一個 specified 屬性，specified 是一個布爾值，用以區別特性是在代碼中指定的，還是默認的。這個屬性的值如果為true，則意味著在HTML中指定了相應特性，或者是通過 setAttribute() 方法設置了該屬性。在IE中，所有未設置過的特性的該屬性值都為false，而在其他瀏覽器中，所有設置過的特性的該屬性值都是true，未設置過的特性，如果強行為其設置 specified 屬性，則報錯。
元素節點有一個 attributes 屬性，它包含一個 NamedNodeMap，包含當前元素所有的屬性及屬性值，與NodeList類似，也是一個動態的集合。元素的每一個屬性都由一個Attr節點表示，每個節點都保存在NamedNodeMap對象中，每個節點的 nodeName 就是屬性的名稱，節點的 nodeValue 就是屬性的值；
createAttribute(attr) 創建新的屬性節點；
attributes屬性包含以下四個方法:
<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div> <script type="text/javascript"> var oTest = document.getElementById('test'); console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4} console.log(oTest.attributes.item(1).specified);//true console.log(oTest.attributes.getNamedItem('id'));//id='test' console.log(typeof oTest.attributes.getNamedItem('id'));//object console.log(oTest.attributes.removeNamedItem('for'));//id='test' console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, length: 3} var abc = document.createAttribute("abc"); abc.nodeValue = "1234567"; oTest.attributes.setNamedItem(abc); //obj.attributes.setNamedItem(attr) 要先創建屬性，在以nodeValue的形式賦屬性值，在傳入setNamedItem console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, 3: abc, length: 4} console.log(oTest.attributes.item(1));//id='test' console.log(oTest.attributes[1]);//id='test' </script>attributes屬性主要用于屬性遍歷。在需要將DOM結構序列化為HTML字符串時，多數都會涉及遍歷元素特性
<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div> <script type="text/javascript"> function outputAttributes(obj){ var arr = [], attrName, attrValue, i; for(i = 0; i < obj.attributes.length; i++){ attrName = obj.attributes[i].nodeName; attrValue = obj.attributes[i].nodeValue; arr.push(attrName + '=/"' + attrValue + '/"'); } return arr.join(" "); } var oTest = document.getElementById('test'); console.log(oTest.attributes);//NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4} console.log(typeof oTest.attributes);//object console.log(outputAttributes(oTest)); //class="wrapper" id="test" for="nice" style="background:#f0f;height: 100px;" console.log(typeof outputAttributes(oTest));//string </script>文本節點
文本節點的三個node屬性，nodeType:3、nodeName:'#text'、nodeValue:節點所包含的文本，其父節點 parentNode 指向包含該文本節點的元素節點，文本節點沒有子節點；
關于文本節點，遇到最多的兼容問題是空白文本節點問題。IE8及以下瀏覽器不識別空白文本節點，而其他瀏覽器會識別空白文本節點 ；所以有時候我們需要清理空白文本節點；
<div id="test"> <div>hello world!</div> </div> <script type="text/javascript"> var oTest = document.getElementById('test'); //第一個和最后一個都是空白文本節點 console.log(oTest.firstChild);//" " console.log(oTest.lastChild);//" " console.log(oTest.childNodes);//[text, div, text] //標準瀏覽器輸出[text, div, text]，text表示空白文本節點 //IE8及以下瀏覽器輸出[div]，并不包含空白文本節點 console.log(oTest.childNodes.length); //3 //標準瀏覽器返回3 //IE8及以下瀏覽器返回1，并不包含空白文本節點 //清理空白文本節點 function cleanWhitespace(oEelement){ for(var i = 0; i < oEelement.childNodes.length; i++){ var node = oEelement.childNodes[i]; if(node.nodeType == 3 && !//S/.test(node.nodeValue)){ node.parentNode.removeChild(node); } } } cleanWhitespace(oTest); console.log(oTest.childNodes);//[div] console.log(oTest.childNodes.length); //1 </script>文本節點屬性：
<div id="testData">hello world!</div> <div id="testWholeText">hello world!</div> <script type="text/javascript"> var oTestData = document.getElementById('testData'); //第一個和最后一個都是空白文本節點 console.log(oTestData.firstChild);//"hello world!" console.log(typeof oTestData.firstChild);//object console.log(oTestData.childNodes.length); //1 console.log(oTestData.firstChild.nodeValue);//"hello world!" console.log(typeof oTestData.firstChild.nodeValue);//string console.log(oTestData.firstChild.data);//"hello world!" //文本節點的data屬性與nodeValue屬性相同,都是 string 類型 console.log(oTestData.firstChild.data === oTestData.firstChild.nodeValue);//true var oTestWholeText = document.getElementById('testWholeText'); console.log(oTestWholeText.childNodes); //[text] console.log(oTestWholeText.childNodes.length); //1 console.log(oTestWholeText.firstChild.wholeText);//hello world! console.log(oTestWholeText.firstChild.data);//hello world! oTestWholeText.firstChild.splitText('or'); console.log(oTestWholeText.childNodes); //[text, text] console.log(oTestWholeText.childNodes.length); //2 console.log(oTestWholeText.firstChild);//#text console.log(oTestWholeText.firstChild.wholeText);//hello world! //wholeText屬性將當前Text節點與毗鄰的Text節點，作為一個整體返回。 console.log(oTestData.firstChild.length);//12 console.log(oTestData.firstChild.nodeValue.length);//12 console.log(oTestData.firstChild.data.length);//12 </script>文本節點方法：
文本節點的操作與字符串的操作方法相當類似。一般地，我們獲取文本都用 innerHTML，然后再去字符串的操作方法去操作。
以上所述是小編給大家介紹的jacascript DOM節點――元素節點、屬性節點、文本節點，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
