js的节点与子节点的比较与获取-CFANZ编程社区

js的节点与子节点的比较与获取
<!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>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script type="text/javascript">
        /*用id 的方法来获取对象有许多的方法与属性
        childNodes是选择元素标签中所有的节点
        */
        var el = document.getElementById("list");
        var elcn = el.childNodes;
        console.log("子节点数:" + elcn.length);
        console.log(elcn);
        /*elc显示子节点有13个但我们就只有6个li标签,这是因为他算上了每个标签从开始到结束的所有位置:
        比如:ul起始标签到第一个li标签是空白但也会算进去,然后是li到li结束li结束再到li起始标签;
        你可以把他们并在一行删掉空格就也是6个
        */
        var elc = el.children;
        console.log("子元素数:" + elc.length);
        console.log(elc);
        var c = document.getElementsByTagName("li");/*返回指定标签的集合*/
        console.log(c);
        /*获取指定子节点还用上面的el*/
        var elcn1 = el.childNodes.item(1);
        console.log("获取列表的第二个子节点" + elcn1);
        console.log(elcn1);
        /*获取后的是html代码*/
        console.log("获取列表的第二个子节点的内容是:" + elcn1.textContent);
        /*获取指定节点的子元素*/
        console.log(el.children.item(1));/*子元素获取是没有空格的纯li子元素所以是2*/
        console.log(el.children.item(1).textContent);
        /*我觉得不用学很多的方法但必须要把能够指定元素的方法学好*/
        /*但我觉得可能找不到这个伪元素选择器创建的元素可能会需要(寻找)上一个和下一个的属性*/
        el.children.item(1).nextElementSibling;/*这是下一个元素*/
        el.children.item(1).previousElementSibling;/*这是寻找上一个元素*/
        /*今天的内容比较少因为要学习linux去装了一下linux学习了一下*/
    </script>
</body>

</html>
0 条评论