DOM Tree介绍(跨浏览器)

DOM Tree中三种重要的节点：

Element Node :nodeType=1  

元素节点 如<a>,<div>等等都是元素节点

Attibute Node : nodeType=2  

属性节点 如<a href="http://www.baidu.com"></a> 中href="http://www.baidu.com"即是这个a的属性节点

TextNode : nodeType=3

文本节点 如<span>text</span>中的“text”即是一个文本节点

注意：通过obj.nodeType得到的值就可以判断访问到的是哪种节点。

得到指定的元素节点oNode：

document.getElementById(sid)

document.getElementsByName(sname)

document.getElementsByTagName(stagname)

注意：

document是所有节点的父节点。

元素节点的ID要保持唯一不变。

节点name属性可以重复，但是在IE下getElementsByName对于DIV节点无效，所以不推荐使用。

从一个节点oNode出发访问相关元素或者文本节点：

oNode.firstChild();

oNode.lastChild();

oNode.previousSibling();

oNode.nextSibling();

oNode.childNodes();

oNode.parentNode();

注意：<div>x<a>y</a>z</div>这个HTML片段.，在FireFox下如果x处为空，也会被认为存在一个空的文本节点，所以在进行DomTree遍历时要根据nodeType判断，来确保找到想找的节点

访问节点oNode的属性节点

oNode.getAttribute(sName);

oNode.setAttribute(sName,sValue);

Javascrīpt控制展现的三种方式

1、   使用document.write(sHTML) document.writeln(sHTML)

这个相当于PHP的echo()

参数sHTML将被输出在该语句执行时的位置成为HTML的一部分。

注意：这个方法只可以在文档载入过程中使用。

2、   使用oNode.innerHTML = sHTML

改变oNode节点内部的innerHTML

注意：

IE下无法改变,<table><tbody><thead><tfoot><tr>这些节点的innerHTML，只能改变<td>的innerHTML

innerHTML非DOM标准的方法，但是FireFox IE等所有浏览器都支持，但innerText,outerHTML,outerText就只有IE才支持，所以不要使用。

3、重头戏，使用Dom方法

创建、复制元素或文本节点：

var newNode = document.createElement(sTag)

var newNode = document.createTextNode([sText])

var newNode = oNode.cloneNode(true)           true：复制包含子节点 false：不包含子节点

插入、替换元素或文本节点：

oNode.appendChild(newNode);

oNode.insertBefore(newNode,childNode);

oNode.replaceChild(newNode, childNode)

删除元素或文本节点

oNode.removeChild(childNode)

注意：

使用第2、3种方法时，操作涉及的已有oNode必须已经完整载入后才可以，比如

<div id="t"><scrīpt>document.getElementById("t")</scrīpt></div>在div元素没有闭合时就访问这个div是要严格禁止的。

使用第3种方法创建<table>时不能把<tr>直接作为<table>的子节点，必须加一层<tbody> <thead>或者<tfoot>，否则显示不出来

针对属性节点，增加和修改都使用oNode.setAttribute()方法即可，删除没什么意义