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>