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

优势：

1. 兼容好
2. 只能选取第一个元素
3. ()中的选择写法和css选择器一样
4. div > p表示选择直系元素
5. div p表示找子集元素

缺点：

1. 有性能问题，企业开发一般不用
2. 不是实时的

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（重新封装来获取子元素）