一、document獲取元素

1. 方法

• document.getElementById(‘box’) // 在IE8及以下是不分大小寫的，而且name值也能匹配上
• document.getElementsByClassName(’’) // IE8及以下是用不了的
• document.getElementsByTagName() 都兼容
• document.getElementsByName() 用的非常少
• 返回的是類數組（對象），可用下標訪問，沒有數組方法

企業級開發一般不使用id獲取元素，id一般用在后端返回數據注入

• querySelector/querySelectorAll // 這是HTML5新引入的WEB API（但是IE7就已經支持）

var div1=document.querySelector('div'); var div1=document.querySelector('.text'); var div1=document.querySelector('div p'); var div1=document.querySelector('div > p'); var div1=document.querySelector('#box');

優勢：

兼容好

只能選取第一個元素

()中的選擇寫法和css選擇器一樣

div > p表示選擇直系元素

div p表示找子集元素

缺點：

有性能問題，企業開發一般不用

不是實時的

var divs=document.querySelectorAll('div'); console.log(divs);//[div,div,div] divs[0].remove(); console.log(divs);//[div,div,div] 不是實時的

二、遍歷節點元素樹

1. 元素節點樹

2. 節點樹訪問

• 節點包含元素

<ul><li><h2>我是標題標簽</h2><a href="">我是超鏈接標簽</a><p>我是段落標簽</p></li></ul>

parentNode屬性，父節點

• html → document → null
• 直到document為止，document沒有parentNode（null）
• html有父節點，但是沒有父元素
  
  

childNodes（元素+…）

• 換行也是一個文本節點

<ul><li><!--注釋--><h2>我是標題標簽</h2><a href="">我是超鏈接標簽</a><p>我是段落標簽</p></li></ul> var li=document.getElementsByTageName('li')[0]; console.log(li.childNodes.length);//輸出9

節點屬性

元素節點=1
屬性節點=2
文本節點(text)=3
注釋節點(comment)=8
document=9
DocumentFragment=11

firstChild/lastChild

• 元素內第一個節點/元素內最后一個節點

var li=document.getElementsByTageName('li')[0]; console.log(li.lastChild);//#text

nextSibling/previousSibling

• 元素的兄弟節點

var p=document.getElementsByTageName('p')[0]; console.log(p.previousSibling);//#text

parentElement屬性 （IE9及以下不支持）

• html → null
• html有父節點，但是沒有父元素
  

children （IE7及以下不支持，元素only）

• childElementCount=children.length(IE9不支持) 子元素的個數

firstElementChild/lastElementChild（IE9及以下不支持）

nextElementSibling/previousElementSibling（IE9及以下不支持）

小結

企業級開發，使用兼容性好的getElementsByTagName，parentNode，childNodes（重新封裝來獲取子元素）

總結

以上是生活随笔為你收集整理的DOM-2 document对象、获取元素、节点、遍历树的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。