JavaScript HTML DOM 元素(节点)

访问子节点

1.alert(newp.childNodes.length);　/包含空节点/
2.alert(newp.children.length);　/不包含空节点/
3.alert(newp.childNodes[0].innerText);　/访问第x个子节点：childNodes[index] 包含空/
4.alert(newp.children[0].innerText);　/访问第x个子节点：children[index] 不包含空/
5.alert(newp.firstChild.innerText); 　/访问第一个子节点，包含空/
6.alert(newp.lastChild.innerText);　/访问最后一个子节点，包含空/
7.alert(newp.firstElementChild.innerText);　/访问第一个子节点，不包含空/
8.alert(newp.lastElementChild.innerText);　/访问最后一个子节点，不包含空/

访问父节点

1.alert(newp.parentNode.nodeName)；　/访问父节点/
2.alert(newp.parentNode.parentNode.nodeName);　/访问祖节点/

访问兄弟节点

1.alert(one.previousSibling.innerText);　/访问前一个节点，包含空/
2.alert(one.nextSibling.innerText);　/访问下一个节点，包含空/
3.alert(one.previousElementSibling.innerText);　/访问前一个节点，不包含空/
4.alert(one.nextElementSibling.innerText);　/访问下一个节点，不包含空/

创建节点

createElement（ ）//创建节点之后还需要将新创建的节点插入。

插入节点

1.appendChild（ ）
栗子！！

<ul>
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
</ul>
<script>
    var newli=document.createElement("li");//创建一个新元素
    newli.className="one";
    newli.innerText="hello world！";//添加其属性值
    var uls=document.getElementsByTagName("ul")[0];
    uls.appendChild(newli);//将新建的元素添加到列表中
</script>

2.insertBefore（ ）
栗子君又来啦….

    <h3><button class="btn1">你好</button></h3>
    <p><input type="button" value="添加" class="btn"/></p>
<script>
    var btn=document.getElementsByClassName("btn")[0];
    var btn1=document.getElementsByClassName("btn1")[0];
    btn.onclick=function(){
        var newa=document.createElement("a");/*创建一个新元素a*/
        newa.href="http://www.baidu.com";/*添加其属性值*/
        newa.innerHTML="百度";
        newa.target="_blank";
        document.getElementsByTagName("h3")[0].insertBefore(newa,btn1);/*将创建的新节点插入h3标签中*/
    }
</script>

删除节点

removeChild（ ）
栗子君的朋友李子君来客串了：

<ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
</ul>
<button class="btn">删除</button>
<script>
    var btn=document.getElementsByClassName("btn")[0];
    btn.onclick=function(){
        var uls=document.getElementsByTagName("ul")[0];
        uls.removeChild(uls.firstElementChild);
    }
</script>

替换节点

replaceChild（ ）
栗子君又双叒叕来了：

<h3>hello world</h3>
<button>替换</button>
<script>
    var btn=document.getElementsByTagName("button")[0];
    btn.onclick=function(){
        var oldnode=document.getElementsByTagName("h3")[0];
        var newp=document.createElement("p");
        newp.innerText="世界你好！";
        oldnode.parentNode.replaceChild(newp,oldnode);
    }
</script>