JavaScript学习的第十四天

一、DOM的遍历（查找）

    <div id="wrap">
        最大的盒子
        <div class="box box1">
            这是盒子01
            <p id="text">这是段落标签</p>
            <span>这是文本标签</span>
        </div>
        这是box1与box2之间的文本
        <div class="box box2">这是盒子02</div>
        <div class="box box3">这是盒子03</div>
        <ul class="list">
            <li>列表项01</li>
            <li>列表项02</li>
            <li>列表项03</li>
            <li>列表项04</li>
        </ul>
        最大的盒子末尾的文本
    </div>

获取元素

    var oWrap=document.getElementById("wrap");
    var oBox1=document.getElementsByClassName("box1")[0];

父子元素间的查找

children  返回（元素）子节点

console.log(oWrap.children);
//HTMLCollection(4)
//0: div.box.box1
//1: div.box.box2
//2: div.box.box3
//3: ul.list
//length: 4

childNodes  返回子节点，包含文本(空)节点 text

console.log(oWrap.childNodes);
//NodeList(9)
//0: text
//1: div.box.box1
//2: text
//3: div.box.box2
//4: text
//5: div.box.box3
//6: text
//7: ul.list
//8: text
//length: 9

firstElementChild  返回第一子（元素）节点

console.log(oWrap.firstElementChild);

firstChild  返回第一个子节点（包含文本）

console.log(oWrap.firstChild);

lastElementChild  返回最后一子（元素）节点

console.log(oWrap.lastElementChild);

lastChild  返回最后一个子节点（包含文本）

console.log(oWrap.lastChild);

parentNode  返回父级节点

console.log(oBox1.parentNode);

parentElement  返回父级（元素）节点

console.log(oBox1.parentElement); 

offsetParent  相对关系  返回第一个由定位属性的祖先元素 如果没有返回body

console.log(oBox1.offsetParent);

链式操作

console.log(oWrap.firstElementChild.firstElementChild);

兄弟元素  同胞元素

nextElementSibling  返回 下一个 兄弟元素节点

console.log(oBox1.nextElementSibling);

nextSibling  返回下一个兄弟节点 包含文本

console.log(oBox1.nextSibling);

previousElementSibling  返回 上一个 兄弟元素节点

console.log(oBox1.previousElementSibling);

previousSibling  返回上一个兄弟节点 包含文本

console.log(oBox1.previousSibling);

二、DOM节点的增删改查

<div id="box">
   <p class="text1">这是段落标签01</p>
   <p class="text2">这是段落标签02</p>
   <p class="text3">这是段落标签03</p>
   <p class="text4">这是段落标签04</p>
</div>

    var oBox=document.getElementById("box");
    var aParas=document.getElementsByTagName('p');

增 添加节点

创建节点  createElement("标签/元素节点名")

    var newP1=document.createElement("P");
    newP1.innerText="这是新创建的段落标签05";
    newP1.style.background="skyblue";
    var newP2=document.createElement("P");
    newP2.innerText="这是新创建的段落标签06";
    newP2.style.background="orange";
    var newP3=document.createElement("P");
    newP3.innerText="这是新创建的段落标签07";
    newP3.style.background="purple";

appendChild()  向父元素的子节点末尾添加元素  追加

oBox.appendChild(newP1);  
oBox.appendChild(newP2);  
oBox.appendChild(newP3);  

insertBefore(添加的节点,参考的兄弟元素)

oBox.insertBefore(newP1,aParas[1]);

删  移除节点  

removeChild(要移除的元素)

oBox.removeChild(aParas[3]);

改 替换元素

replaceChild(新元素,旧元素)

oBox.replaceChild(newP1,aParas[1]);