js 遍历DOM实例详解

<code class="language-javascript">



<div id="main">
<a href="http://baodu.com">baidu.com</a>
    <a href="http://2345.com">2345.com</a>
    <a href="http://sina.com">sina.com</a>
    <a href="http://google.com">google.com</a>
    <h1>go home</h1>
    <span id="span1">this is span</span>
    123456
</div>
<script type="text/javascript">
var pn=document.getElementById("main");//获取ID为main的元素节点
var ca=pn.getElementsByTagName("a");//获取ID为main元素的所有a子节点。
//遍历所有a子节点
for(var i=0; i<ca.length; i++){
    alert("text:"+ca[i].innerHTML+";  href:"+ca[i].href);
}

pn.lastChild; //获取mian元素节点的最后一个子节点,改节点为文本节点， 可以直接用nodeType获取节点类型，用nodeValue获取文本值。
pn.lastChild.nodeType;  //运行结果为：3； 3表示文本节点。
pn.lastChild.nodeValue;//运行结果为：123456

pn.firstChild;//获取mian元素节点的第一个子节点改节点为元素节点。
pn.firstChild.innerHTML; //获取该节点的文本。
pn.firstChild.href;//获取该节点的href属性。

var parentSpan=document.getElementById("span1").parentNode;//获取id为span1的父节点
alert(parentSpan.id); //获取id为span1的父节点的ID；
</script>

</code>