HTML DOM

上图是HTML DOM树

由图可知节点有三种：元素节点，属性节点，文本节点。这三种节点可以用element.nodeType来表示，如果是元素节点则返回值为1，属性节点返回2，文本节点返回3。

<script>
function Fun(){
var Op=document.getElementById(‘p1‘);
alert(Op.nodeType);
}
</script>

<p id="Op">12345</p>
<input type="button" onclick="Fun()">

浏览器弹出窗口返回值为1，因为p为元素节点。

element.nodeValue可以设置或者返回元素值。

设置元素值

element.nodeValue=value

返回元素值

node.nodeValue

不过只有文本节点和属性节点才能使用该方法返回元素值，接上段代码，如果alert(Op.nodeValue);返回值为null，因为p是元素节点，没有nodeValue。

关于子节点个数：

<script>
function myfun(){
　　var ul1=document.getElementById(‘ul‘);
　　var ch1=ul1.childNodes;
　　alert(ch1.length);
}
</script>

<ul id="ul">
　　<li>qwe</li>
　　<li>qwe</li>
　　<li>qwe</li>
　　<li>qwe</li>　　
</ul>

其中ch1为数组，ch1.length就是子节点个数，浏览器的返回值是9，理论上来讲应该是4个li元素子节点才对，其实是因为我们打代码的时候为了看起来美观，而格式像上面的代码一样，这样的话标签之间就会有空格，这样浏览器会认为其为文本节点，我标记节点的地方就是文本节点，如果把所有代码写在一行，没有空格，就是4个子节点。

<ul id="ul">节点

　　<li>qwe</li>节点

　　<li>qwe</li>节点

　　<li>qwe</li>节点

　　<li>qwe</li>节点

<ul/>