原生Javascript遍历文档节点（处处是坑啊）

最新推荐文章于 2024-03-31 16:29:57 发布

Web_D_Hao

最新推荐文章于 2024-03-31 16:29:57 发布

阅读量387

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/u013076574/article/details/79754253

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

原生Javascript获取节点，一直就很不方便（相比较jQuery，处处是坑），话不多少，直接挖坑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>遍历文档节点</title>
</head>

<body>
    <ul>
        <li>
            <input type="text" value="第一行">
            <a href="javascript:void(0)" οnclick="nodeCopy(this)">点击复制</a>
        </li>
        <li>
            <input type="text" value="第二行">
            <a href="javascript:void(0)" οnclick="nodeCopy(this)">点击复制</a>
        </li>
        <li>
            <input type="text" value="第三行">
            <a href="javascript:void(0)" οnclick="nodeCopy(this)">点击复制</a>
        </li>
    </ul>
</body>
<script>
    function nodeCopy(obj){
        var elm = obj.parentNode;//获取父级节点
        console.log(elm);
        console.log(elm.childNodes);//获取所有子节点
        console.log(elm.firstChild);//获取第一个子节点
    }
</script>

</html>

结果如下：

>父节点顺利得到！
>所有子节点好像和预期的不一样！
>第一个子节点是什么？？？

为什么会出现这种情况？？？

不拐弯抹角了，原因就是：

标签与标签之间不能换行，每当你换行JS 默认会把换行或者空格当成text元素加入到数组中，这就是你获取不到想要的节点的原因。

解决方法：

<script>
    function nodeCopy(obj) {
        var elm = obj.parentNode;
        var elm_child = elm.childNodes;//所有子节点
        for (var i = 0 in elm_child) { //遍历子元素数组
            if (elm_child[i].nodeName == "#text" && !/\S/.test(elm_child[i].nodeValue)) {
                elm.removeChild(elm_child[i]);//删除数组中的text
            }
        }
        console.log(elm);
        console.log(elm_child);
        console.log(elm.firstChild);
    }
</script>

得到了我们想要的。

一般通过原生JS获取节点的方法：

 
  var n1 = document.getElementById("id_name"); 
 
  nodeCopy(n1);//调用清理空格的函数 
 
  var n2 = n1.childNodes;//获取a的全部子节点； 
 
  var n3 = n1.parentNode;//获取a的父节点； 
 
  var n4 = n1.nextSibling;//获取a的下一个兄弟节点 
 
  var n5 = n1.previousSibling;//获取a的上一个兄弟节点 
 
  var n6 = n1.firstChild;//获取a的第一个子节点 
 
  var n7 = n1.lastChild;//获取a的最后一个子节点