DOM树操作
一、Dom对象树不同节点的名值对比
| 节点 | nodeName(节点名) | nodeValue(节点值) | nodeType(值) |
| Element元素节点 | 对应标签名的大写形式 如：HTML | null | 1 |
| Attr属性节点 | 文档中定义的属性名 如:type | 文档中定义的属性值 如：button | 2 |
| Test文本节点 | #text | 文本内容 如：123 | 3 |
| Comment注释节点 | #comment | 注释内容 如：comment | 8 |
| Document根节点 | #document | null | 9 |
二、IE与FireFox的DOM对象树差异
1、IE会把一些没有在文档中定义的属性也加入DOM树
2、IE不会把title中的文本内容加入DOM树
3、IE会把换行缩进这样的信息过滤掉，FireFox则会认为是有用的文本内容，并作为文本节点的一部分加入DOM树
4、IE不会把script标签中的内容加入DOM树，FireFox将里面的内容加入DOM树
三、根节点的属性和方法
属性 描述
documentElement 表示文档的根元素节点，在HTML文档中，它表示<html>这个标签代表的元素节点
方法
getElementByID() 返回文档中具有指定id属性的Element节点（方法参数为节点的id属性值）
getElementByTagName() 以数组方式返回文档中具有指定标签名的所有Element节点，其顺序为在文档中出现的顺序
（标签名指的是像body,table这样的HTML标签，方法参数为标签的名称）
createElement() 用指定的标记名创建新的Element节点对象(方法参数为节点标签的名字)
createTextNode() 用指定的文本创建新的文本节点对象(方法参数为文本信息)
createAttribute() 用指定名字创建新的Attr节点对象(方法参数为属性的名字)
createComment() 用指定的字符串创建新的Comment节点对象(方法参数为注释信息)
四、元素节点的属性和方法
属性 描述
tagName 元素节点对应的标签的大写名字，例如<table>元素的标签名字为Table
方法
getElementByTabName() 以数组方式返回文档中具有指定标签名的所有Element节点，其顺序为在文档中出现的顺序
getAttribute() 以字符串形式返回指定属性的值
getAttributeNode() 以属性节点对象的形式返回指定属性的值(方法参数为属性名称) 不推荐使用
setAttribute() 设置指定的属性的值，如果该属性不存在则添加一个新属性(方法的第一个参数为属性的名称，方法的第二个参数为属性的值)
setAtrributeNode() 把指定的属性节点添加到该元素的属性列表中(方法的参数为属性节点对象) 不推荐使用
（标签名指的是像body,table这样的HTML标签，方法参数为标签的名称）
hasAttribute() 如果该元素具有指定名字的属性，则返回ture
removeAttribute() 从元素节点中删除指定的属性(方法参数为属性的名称)
removeAttributeNode() 从元素节点的属性列表中删除指定的Attr节点(方法参数为属性的名称)
属性节点的属性和方法
属性 方法
name 属性名
value 属性值
所有节点(Node)都拥有的属性和方法
属性 描述
attributes 表示该节点的所有属性节点对象的数组
nodeType 代表节点的类型
nodeName 返回节点的名字
nodeValue 代表节点的内容
childNodes 当前节点的所有子节点数组。如果没有子节点，则返回空数组
parentNode 返回当前节点的父节点。如果没有父节点，则返回null
firstChild 返回当前节点的第一个子节点。如果没有子节点，则返回null
lastChild 返回当前节点的最后一个子节点。如果没有子节点，则返回null
nextSibling 返回当前节点的下一个兄弟节点。如果没有这个的节点，则返回null
previousSibling 返回当前节点的上一个兄弟节点。如果没有这个的节点，则返回null
方法 描述
hasChildNodes() 如果当然节点拥有子节点，则返回true
appendChild() 给当前节点增加一个子节点。增加的子节点位于当前节点的所有子节点的末尾(方法参数为Node对象)
insertBefore() 插入一个节点，位置在当前节点的指定子节点之前。如果指定子节点不存在，则执行效果和appendChild方法相同。
如果插入的已经是当然节点的子节点，则将这个节点移动到指定节点前。
(方法第一个参数是要插入的节点。
方法第二个参数是当前节点的指定子节点，新插入的节点位于这个节点之前。)
removeChild() 从文档树中删除当前节点的指定子节点，同时返回指定的子节点
(方法的参数是要删除的子节点) 返回被删除的
replaceChild() 用另一个节点替换当前节点的一个子节点，并且返回指定的子节点
(方法第一个参数是新的子节点，方法第二个参数是被替换的子节点) 返回被替换的
cloneNode() 复制当前节点，或者复制当前节点以及它的所有子孙节点
(方法参数为true或false.True表示递归的复制所有子孙节点，false表示只复制当前节点)
代码
<
title
>
无标题文档
</
title
>
<
script
type
="text/javascript"
>
function
testapi()
{
//
获取根元素节点
var
htmlRootElement
=
document.documentElement;
//
获取指定的元素节点
var
divNode
=
document.getElementById(
"
div1
"
);
//
获取整个页面所有的div元素节点
var
divNodes
=
document.getElementsByTagName(
"
div
"
);
//
创建元素节点
var
newDivNode
=
document.createElement(
"
div
"
);
//
创建文本节点
var
newTextNode
=
document.createTextNode(
"
aaaaaa
"
);
//
返回大写的标签名
var
tagName
=
divNode.tagName;
//
根据标签获得元素节点
var
divNode2
=
document.getElementById(
"
div2
"
);
var
divNodes2
=
divNode2.getElementsByTagName(
"
div
"
);
//
操作属性
var
inputtext
=
document.getElementById(
"
inputtext
"
);
//
FireFox
//
var flag=inputtext.hasAttribute("value");
//
IE
var
flag
=
inputtext.value
!=
""
;
inputtext.setAttribute(
"
value
"
,
"
texttext
"
);
var
textValue
=
inputtext.getAttribute(
"
value
"
);
inputtext.removeAttribute(
"
value
"
);
var
clic
=
document.getElementById(
"
clic
"
);
//
clic.setAttribute("onclick",function(){alert("123")});
clic.onclick
=
function
(){alert(
"
123
"
)};
//
返回元素节点包含的属性节点
var
attribute
=
inputtext.attributes;
//
nodeName nodeValue NodeType
var
inputName
=
inputtext.nodeName;
var
inputType
=
inputtext.nodeType;
var
inputValue
=
inputtext.nodeValue;
//
返回所有的子节点
var
childs
=
divNode2.childNodes;
//
获取父节点
var
parent
=
divNode2.parentNode;
//
获取第一个子节点和最后一个子节点
var
first
=
divNode2.firstChild;
var
last
=
divNode2.lastChild;
//
获取兄弟节点
var
next
=
divNode2.nextSibling;
var
previous
=
divNode2.previousSibling;
//
判断是否有子节点
var
flag2
=
divNode2.hasChildNodes();
//
追加节点
newDivNode.appendChild(newTextNode);
divNode2.appendChild(newDivNode);
var
new2
=
document.createElement(
"
div
"
);
var
text2
=
document.createTextNode(
"
insert
"
);
new2.appendChild(text2);
divNode2.insertBefore(new2,divNode2.firstChild);
var
new3
=
document.createElement(
"
div
"
);
var
text3
=
document.createTextNode(
"
insert
"
);
new3.appendChild(text3);
divNode2.insertBefore(new3,
null
);
divNode2.insertBefore(new3,divNode2.firstChild);
//
移除节点
var
remove
=
divNode2.removeChild(new3);
var
new4
=
document.createElement(
"
div
"
);
var
text4
=
document.createTextNode(
"
insert4
"
);
new4.appendChild(text4);
var
replace1
=
divNode2.replaceChild(new4,divNode2.getElementsByTagName(
"
div
"
)[
0
]);
//
如果第一个参数已经是当前节点的子节点，那么这个参数对应的节点会被移动到第二个参数所对应的节点的位置
//
第二个参数对应节点被删除了。
var
replace2
=
divNode2.replaceChild(newDivNode,divNode2.getElementsByTagName(
"
div
"
)[
0
]);
//
clone节点
var
clone1
=
divNode2.cloneNode(
true
);
var
clone2
=
divNode2.cloneNode(
false
);
alert(
""
);
}
</
script
>
</
head
>
<
body
>
<
input
type
="button"
value
="TestDomAPI"
onclick
="testapi()"
/>
<
div
id
="div1"
>
123123
</
div
>
<
input
type
="text"
id
="inputtext"
/>
<
div
id
="div2"
>
456
<
div
>
789
</
div
>
</
div
>
<
input
type
="button"
value
="textclick"
id
="clic"
/>
</
body
>
</
html
>