原生JS節點操做

時間 2019-12-16

標籤原生節點欄目 JavaScript 简体版

原文原文鏈接

獲取子節點

1. children 不是標準的dom屬性，可是幾乎被全部瀏覽器支持。獲取子元素的元素節點（只包括元素節點）javascript

注意：在IE中，children包含註釋節點。java

2. childNodes 是標準屬性。返回全部子節點。包括文本節點。node

注意：jquery

　（1）nodeType 返回節點類型的值，通常是整數git

　　經常使用的有： nodeType==1是元素節點(element)，2是屬性節點(attr)，3是文本節點(#text)，8是註釋節點(#comment)，9是文檔(document) 。github

　（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模擬childrenapp

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;
}

移除節點

removeChilddom

獲取父節點

parentNode：獲取父元素

parentNode-原生js仿jquery中的sibling方法

<body>
<ul>
    <li id="firstId">
        <span>我是文本</span>
    </li>
    <li></li>
    <li></li>
</ul>
</body>
<script type="text/javascript">
window.onload=function(){
   var firstId=document.getElementById("firstId");
   const elm=mySiblings(firstId);
   for (let i = 0; i < elm.length; i++) {
      elm[i].style.background="red";
   }
}

function mySiblings(elm) {
  var siblingsNodes = [];
  var p = elm.parentNode.children;
  for(let i =0,pl= p.length;i<pl;i++) {
    if(p[i] !== elm) siblingsNodes.push(p[i]);
  }
  return siblingsNodes;
}
</script>

插入節點

1.insertBefore

2.appendChild

建立DOM結構

1.建立元素節點 createElement

2.建立文本節點 createTextNode

document.createElement('div')
document.createTextNode('ok')

獲取元素的下一個節點（同胞）

nextSibling

獲取元素的上一個節點(同胞)

previousSibling

源碼地址：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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。