总结获取原生JS(javascript)的父节点、子节点、兄弟节点

时间：2021-12-04 09:47:42

关于原生JS获取节点，一直是个头疼的问题，而且调用方法的名字又贼长了，所以我选择用JQ，好像跑题了--

话不多说看代码

获取父节点 及 父节点下所有子节点（兄弟节点）

<ul>

    <li>

        <textarea>文本一</textarea>

        <input type=button value="复制" onclick="jsCopy(this)">

    </li>

    <li><textarea>文本二</textarea>

        <input type=button value="复制" onclick="jsCopy(this)">

    </li>

    <li>

        <textarea>文本三</textarea><input type=button value="复制" onclick="jsCopy(this)">

    </li>

    <li><textarea>文本四</textarea><input type=button value="复制" onclick="jsCopy(this)"></li>

</ul>
<script type="text/javascript">

    function jsCopy(ev){

        var ele=ev.parentNode;

        //获取input的父级节点
console.log(ele);

        //获取input的父级节点下的所有子节点（input及它的兄弟节点）
console.log(ele.childNodes);

        //获取input的父级节点下的第一个子节点（我的目的就是获取到textarea，但是js就是这么坑）
console.log(ele.firstChild);
console.log('--------------------------分界线---------------------------------');

    }

</script>

我们来运行一下

总结获取原生JS(javascript)的父节点、子节点、兄弟节点

我们 看看数据

文本一：第一条console获取到了父级节点正常（很开心），第二条console返回的是父级元素下的所有节点元素（你会说：what？text？尼玛没有用到text标签啊！怎么出来的）不急，我们继续看，第三条console是获取父级节点下的第一个子节点（what？这是啥？我是获取第一个textatea啊，这尼玛获取的什么？我一口老血）;继续->

文本二：第一条console获取到了父级节点正常（很严肃），第二条console返回的是父级元素下的所有节点元素（你会说：更上面的文本一不是一样的吗？）仔细看！是不是少了个‘text‘，我们继续看，第三条console是获取父级节点下的第一个子节点（what？获取到了，开心，郁闷了为什么啊）;继续->

文本三：第二条console返回的是父级元素下的所有节点元素（跟文本一 差不多一样，只是中间少了个text，抓狂了，难道有什么规律？）我们继续看，第三条console是获取父级节点下的第一个子节点（跟文本一 差不多一样，获取的#Text）;继续->

文本三：第二条console返回的是父级元素下的所有节点元素（超级正常有没有，高兴地飞起--这是你们再回去看一下文本四的代码）我们继续看，第三条console是获取父级节点下的第一个子节点（一切正常，这是为啥呢！难道脸黑）;

总结下：我想有的人大概看出了规律，没错，你没猜错，就是标签与标签之间不能换行，每当你换行JS 默认会把换行当成text元素加入到数组中，这就是你获取不到想要的节点的原因。

那么问题来了，这个如何解决呢？

答：其实很简单 就是删除  数组中没必要的元素（text）；

（我知道你们再想什么，嘿嘿，尼玛讲了一堆有的没的，敢不敢上代码）

好我就上代码：



<script type="text/javascript">

    function jsCopy(ev){

        var ele=ev.parentNode;

        var elem_child = ele.childNodes;

        for(var i=0 in elem_child){ //遍历子元素数组

            if(elem_child[i].nodeName == "#text" && !/\S/.test(elem_child[i].nodeValue)) {

                //删除数组中的text

                ele.removeChild(elem_child[i]);

            }

        }
console.log(ele.firstChild);
console.log('---------------------分界线-----------------------');

    }

</script>






运行一下


总结获取原生JS(javascript)的父节点、子节点、兄弟节点


一切正常有没有，终于获取到想要的了。


这里我只做了获取父级节点，子节点，其他的获取雷同，所以一定要console，才能知道这些不为人知的秘密。


为了方便大家我就把JS获取节点的方法粘出来：














var a = document.getElementByIdx_x_x("dom");

jsCopy(a);//调用清理空格的函数

var b = a.childNodes;//获取a的全部子节点；

var c = a.parentNode;//获取a的父节点；

var d = a.nextSibling;//获取a的下一个兄弟节点

var e = a.previousSibling;//获取a的上一个兄弟节点

var f = a.firstChild;//获取a的第一个子节点

var g = a.lastChild;//获取a的最后一个子节点














这次就写到这，如有更好的可以留言分享下，在下先谢谢了！
相关文章