DOM-2 【document对象-遍历节点元素树】

一.document对象

(1).拥有方法

document.getElementById('box')  //在IE8及以下是不分大小写的，而且name值也能匹配上

document.getElementsByClassName('') //IE8及以下是用不了的

document.getElementsByTagName()  都兼容

document.getElementsByName() 用的非常少

(2).备注

id(钩子)：能不用就不用，模块化开发id只用于后端注入数据

除去getElementbyId的剩下的方法都是获取一组的，通过下标([0])可以访问

(3).querySelector/querySelectorAll

这是HTML5新引入的WEB API（但是早就有了）

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是一直找子集元素

var div1=document.querySelectorAll('.box')[1];

获取多个元素，你获取id出来的结果也是组

公司一般不用上边的两种方法：性能不好，不是实时的(最致命的)

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:

顶端是document,document的顶端是Null

var a=document.getElementsByTageName('a')[0];

结果

-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. 元素节点=1
2. 属性节点=2
3. 文本节点(text)=3
4. 注释节点(comment)=8
5. document=9
6. 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

元素的上一个节点/元素的下一个节点 原理与上方一致

(3).元素树遍历

-parentElement  （IE9及以下不支持）

顶端是null

-children （IE7及以下不支持）

childElementCount=children.length(IE9不支持)

子元素(没有text节点等等直接访问元素)

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

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

元素遍历公司不用！