1.获取元素
- document.querySelector()
- document.querySelectorAll
2.querySelector() 与 querySelectorAll 方法的缺陷
3.遍历元素节点树
Node.firstChild
封装获取祖先元素方法 elemParent

1.获取元素

document.querySelector()

文档对象模型Document引用的**querySelector()**方法返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象。如果找不到匹配项，则返回null。

document.querySelectorAll

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="text">123</div>
    <div class="text">456</div>
</body>
<script>
    var text = document.querySelector('.text');
    console.log(text);
    var text2  = document.querySelectorAll('.text');
    console.log(text2);
</script>
</html>

2.querySelector() 与 querySelectorAll 方法的缺陷

1.性能
2.不实时 有增删dom操作时不能实时更新
demo

<body>
    <div class="text">123</div>
    <div class="text">456</div>
</body>
<script>
    var divs = document.querySelectorAll('div');
    console.log(divs);
    divs[0].remove();
    console.log(divs);
</script>

3.遍历元素节点树

遍历节点树 - 元素节点树
节点包含元素 -> 元素节点 = DOM 元素

1.parentNode

<body>
    <ul>
        <li>
            <h2>h2</h2>
            <a href="">a</a>
            <p>p</p>
        </li>
    </ul>
</body>
<script>
  var  a = document.getElementsByTagName('a')[0].parentNode; //支持.parentNode.parentNode
  console.log(a);
</script>

2.childNodes

<body>
    <ul>
        <li>
            <!-- 我是一个注释 -->
            <a href="">我是超级链接</a>
            <p>我是段落标签</p>
            <h1>我是标题标签</h1>
        </li>
    </ul>
</body>
<script>
    // 1.元素节点 = 1 
    // 2.属性节点 = 2 
    // 3.文本节点 text = 3
    // 4.注释节点 comment = 8
    // 5.document = 9
    // 6.DocumentFragement = 11
var  li = document.getElementsByTagName('li')[0].childNodes; ////支持.childNodes.childNodes
  console.log(li);
</script>

注每个换行是一个文本节点节点

3.firstChild

Node.firstChild

Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。

4.lastChild

**Node.lastChild** 是一个只读属性，返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回 null。

5.nextSibling

**Node.nextSibling** 是一个只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。

6.previousSibling

返回当前节点的前一个兄弟节点,没有则返回null.

demo

<body>
    <ul>
        prev
        <li> 123
            <!-- 我是一个注释 -->
            <a href="">我是超级链接</a>
            <p>我是段落标签</p>
            <h1>我是标题标签</h1>
        456</li>
        next
    </ul>
</body>
<script>
    // 1.元素节点 = 1 
    // 2.属性节点 = 2 
    // 3.文本节点 text = 3
    // 4.注释节点 comment = 8
    // 5.document = 9
    // 6.DocumentFragement = 11
var  li = document.getElementsByTagName('li')[0];
        console.log(li.firstChild);
        console.log(li.lastChild);
        console.log(li.nextSibling);
        console.log(li.previousSibling);
</script>

7.parentElement

8.children

9.

parentElement

childElementCount = children.length

firstElementChild

lastElementChild

nextElementSibling

previousElementSibling

children

<body>
    <ul>
        prev
        <li> 123
            <!-- 我是一个注释 -->
            <a href="">我是超级链接</a>
            <p>我是段落标签</p>
            <h1>我是标题标签</h1>
        456</li>
        next
    </ul>
</body>
<script>
var  li = document.getElementsByTagName('li')[0],
     p = document.getElementsByTagName('p')[0];
        console.log(li.parentElement); //IE9
        console.log(li.childElementCount); //IE9 
        console.log(li.firstElementChild); //IE9
        console.log(li.lastElementChild); //IE9
        console.log(p.nextElementSibling); //IE9
        console.log(p.previousElementSibling); //IE9
</script>

封装获取祖先元素方法 elemParent

// 获取祖先元素
function elemParent(node,n){
    var type = typeof(n);
    if(type==='undefined'){
        return node.parentNode;
    }else if(n<=0|| type !=='number'){
        return undefined;
    }
    while(n){
        node = node.parentNode;
        n--;
    }
    return node;
}

JavaScript

02.document对象、获取元素、节点、遍历树