节点操作 - 子节点 - 《JavaScript》

推荐大量使用parentNode.children！！！！！！！！！！！！！！

1，parentNode.childNodes（标准）**

parentNode.childNodes 返回包含指定节点的集合，该集合为即使更新的集合。
注意：这个集合里面包含了有的子节点，包括元素节点，文本节点等。

如果只想要获取集合里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes。**

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ol>
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3</li>
            <li>我是li4</li>
            <li>我是li5</li>
        </ol>
    </body>
    <script>
        var ol=document.querySelector("ol");
        var lis=ol.childNodes;
        console.log(lis.length);//长度为11，因为把文本节点(换行)也选取出来了。
    </script>
</html>

2，parentNode.children（非标准）——>推荐使用

parentNode.children是一个可读属性，返回所有的子元素节点，它只返回元素节点！！！！
虽然children是一个非标准的，但是得到了各个浏览器的支持，一次我们可以放心使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ol>
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3</li>
            <li>我是li4</li>
            <li>我是li5</li>
        </ol>
    </body>
    <script>
        var ol=document.querySelector("ol");
        var lis=ol.children;
        console.log(lis.length);//长度为5,只是把元素节点选取出来
    </script>
</html>

firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

4，parentNode.lastChild
lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。**

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ol>
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3</li>
            <li>我是li4</li>
            <li>我是li5</li>
        </ol>
    </body>
    <script>
        var ol=document.querySelector("ol");
        var first=ol.firstChild;
        console.log(first);//获取的是第一个节点，是文本节点(换行)。
        var last=ol.lastChild;
        console.log(last);//获取的是最后一个节点，也是文本节点(换行)。
    </script>
</html>

5，parentNode.firstElementChild
firstElementChild 返回第一个子元素节点，找不到则返回null，注意：是子元素节点！！！

6，parentNode.lastElementNode
firstElementChild 返回第最后一个子元素节点，找不到则返回null，注意：是子元素节点！！！

注意：这两个方法有兼容性问题，IE9以上才支持。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ol>
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3</li>
            <li>我是li4</li>
            <li>我是li5</li>
        </ol>
    </body>
    <script>
        var ol=document.querySelector("ol");
        var first=ol.firstElementChild;
        console.log(first);//获取的是第一个元素节点，li1。
        var last=ol.lastElementChild;
        console.log(last);//获取的是最后一个元素节点，li5。
    </script>
</html>

在实际开发中，可以这样写，既不会出现兼容性的问题，
又能获取第一个元素节点或者最后一个元素节点。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ol>
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3</li>
            <li>我是li4</li>
            <li>我是li5</li>
        </ol>
    </body>
    <script>
        var ol=document.querySelector("ol");
        var first=ol.children[0];
        console.log(first);//获取的是第一个元素节点，li1。
        var last=ol.children[ol.children.length-1];
        console.log(last);//数组长度减1，就是最后一个元素的索引号。
    </script>
</html>