主要学习dom查询相关的

 

草稿代码：

<!DOCTYPE html>
<html>

    <head>
        <style type="text/css">
            ul {
                list-style-type: none;
            }
        </style>
        <script type="text/javascript">
            function myClick(idStr, fun) {
                var btn = document.getElementById(idStr);
                btn.onclick = fun;
            }
            window.onload = function () {
                // var btn = document.getElementById("btn");
                // btn.onclick = function () {
                //     var ul = document.getElementsByTagName("ul");
                //     console.log(ul);
                //     console.log(ul.length);
                //     var cns = ul.item(0).firstChild;
                //     console.log(cns);
                //     alert(cns.length);
                // }

                myClick("btn", function () {
                    var ul = document.getElementsByTagName("ul");// HTMLCollection
                    console.log(ul);
                    console.log(ul.length);
                    console.log(ul.namedItem("ul")); // 这里相当于item(0);找到HTMLCollection中id为ul的ul标签对象
                    var cns = ul.item(0).firstChild.nextElementSibling;
                    // cns为第一个ul标签对象ul[0]的第一个孩子节点li的下一个兄弟元素节点
                    // 这里是空白文本节点的下一个节点，即<li>li1</li>
                    // nextElementSibling会跳过文本节点和注释节点
                    // nextSibling不会跳过
                    console.log(cns);
                    console.log(cns.nodeName); // 查看文章后面的节点属性图，元素节点会打印标签名
                    //console.log(cns.nextSibling.nextElementSibling);
                    alert(cns);
                    alert(cns.innerText);
                });
            }
        </script>
    </head>

    <body>
        <ul id="ul">
            <li>li1</li><!-- 123 -->
            <li>li2</li>
            <li>li3</li>
            <li>li4</li>
        </ul>
        <button id="btn">按钮</button>
    </body>

</html>

运行效果（点击按钮后）：

 

 

知识点摘要：

children 属性返回元素的子元素的集合，是一个 HTMLCollection 对象。

提示: 根据子元素在元素中出现的先后顺序进行排序。使用 HTMLCollection对象的 length属性获取子元素的数量，然后使用序列号(index，起始值为0)访问每个子元素。

children 属性与 childNodes 属性的差别：

  • childNodes 属性返回所有的节点，包括文本节点、注释节点；
  • children 属性只返回元素节点；

如果节点是文本节点和属性节点，innerText和nodeValue是一个效果。

 

dom其他方法：

<!DOCTYPE html>
<html>

    <head>
        <title>dom查询</title>
        <script>
            window.onload = function () {
                var body = document.getElementsByTagName("body")[0];
                console.log(body);
                var body2 = document.body; // body和body2效果一样
                console.log(body2);
                var html = document.documentElement; // html标签
                console.log(html);
                console.log("==============");
                var all = document.all;
                console.log(all);
                console.log(all.length);
                console.log(typeof all); // undefined
                for (let i = 0; i < all.length; ++i) {
                    console.log("===" + all[i]);
                    console.log("===typeof:" + typeof all[i]);
                }
                console.log("============");
                var all2 = document.getElementsByTagName("*"); // all和all2除了typeof属性不同，其余效果一样
                console.log(all2);
                console.log(all2.length);
                console.log(typeof all2); // object
            }

        </script>
    </head>

    <body></body>

</html>

运行结果图：

===============Talk is cheap, show me the code================