一、document獲取元素

1. 方法

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

企業(yè)級(jí)開發(fā)一般不使用id獲取元素，id一般用在后端返回?cái)?shù)據(jù)注入

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

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');

優(yōu)勢(shì)：

兼容好

只能選取第一個(gè)元素

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

div > p表示選擇直系元素

div p表示找子集元素

缺點(diǎn)：

有性能問題，企業(yè)開發(fā)一般不用

不是實(shí)時(shí)的

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

二、遍歷節(jié)點(diǎn)元素樹

1. 元素節(jié)點(diǎn)樹

2. 節(jié)點(diǎn)樹訪問

• 節(jié)點(diǎn)包含元素

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

parentNode屬性，父節(jié)點(diǎn)

• html → document → null
• 直到document為止，document沒有parentNode（null）
• html有父節(jié)點(diǎn)，但是沒有父元素
  
  

childNodes（元素+…）

• 換行也是一個(gè)文本節(jié)點(diǎn)

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

節(jié)點(diǎn)屬性

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

firstChild/lastChild

• 元素內(nèi)第一個(gè)節(jié)點(diǎn)/元素內(nèi)最后一個(gè)節(jié)點(diǎn)

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

nextSibling/previousSibling

• 元素的兄弟節(jié)點(diǎn)

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

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

• html → null
• html有父節(jié)點(diǎn)，但是沒有父元素
  

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

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

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

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

小結(jié)

企業(yè)級(jí)開發(fā)，使用兼容性好的getElementsByTagName，parentNode，childNodes（重新封裝來獲取子元素）

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。