原生JS节点操作

Posted 2020-10-25 想旅游咯

获取子节点

1. children 不是标准的dom属性，但是几乎被所有浏览器支持。获取子元素的元素节点（只包括元素节点）

注意：在IE中，children包含注释节点。

2. childNodes 是标准属性。返回所有子节点。包括文本节点。

   注意：

　（1）nodeType   放回节点类型的值，一般是整数

　　     常用的有： nodeType==1是元素节点(element)，2是属性节点(attr)，3是文本节点(#text)，8是注释节点(#comment)，9是文档(document) 。

　（2）nodeName  标签的名称，返回的结果都是大写

　（3）nodeValue  返回value，但是只对文本节点和注释有用,对于标签没有作用。

<ul id="ul1">
    <li>
        <span>我是文本</span>
    </li>
    <li></li>
    <li></li>
</ul>

window.onload=function(){

    var oUl1=document.getElementById("ul1");

    console.log("children.length",oUl1.children.length); // 3
    console.log("childNodes.length",oUl1.childNodes.length); // 7
   
    for(var i=0; i<oUl1.children.length; i++){
       oUl1.children[i].style.background=‘red‘;
    }
}

childNodes模拟children

function myChildren(ele){
    //获取所有的子元素(包括文本节点、元素节点、注释节点)；
    var eleChild = ele.childNodes; 
    var str = [];
    //循环所有的文本节点，以便都能拿到；
    for(var i = 0;i<eleChild.length;i++){
        //nodeType == 1 是元素节点(element)，2是属性节点(attr)，3是文本节点(text)，8是注释节点，9是文档(document)。
        if(eleChild[i].nodeType == 1){
            //将得到的每一项子元素添加到数组的后面；
            str.push(eleChild[i]);
        }
    }
    return str;
}

//childNodes模拟children
function myChildren2(ele){
    //获取所有的子元素(包括文本节点、元素节点、注释节点)；
    var eleChild = ele.childNodes; 
    //循环所有的文本节点，以便都能拿到；
    for(var i = 0;i<eleChild.length;i++){
        //console.log(eleChild[i].nodeName);    //#text  Li
        if(eleChild[i].nodeName == "#text" && !/\S/.test(eleChild[i].nodeValue)) {
            //删除数组中的text
            ele.removeChild(eleChild[i]);
        }
    }
    return eleChild;
}

 

源码地址：https://github.com/zuobaiquan/javascript/tree/master/%E5%8E%9F%E7%94%9FJS%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C

 

如果 觉得文章不错，可以请博主喝一杯奶茶哦！！！