标签：
上一篇讲述了DOM的基本知识，从其得知，在DOM眼中，HTML的每个成分都可以看作是节点(文档节点、元素节点、文本节点、属性节点、注释节点，其中，属性节点是属于元素节点)，本篇的内容就是通过DOM对这些节点进行增删改查的操作。
获取(R)
1. getElementById(id)、getElementsByName(name)、getElementsByTagName(tagName)，这三种方法都会忽略文档的结构。
IE下通过getElementsByName(name)只能取得表单元素的节点；
IE下不区分id和name，也就是说通过getElementsByName(name)取得的节点数组也包含id和name相同的了，通过getElementById(id)，也可以将name作为参数，看MSDN的官方说明。
When you use the getElementsByName method, all elements in the document that have the specified NAME or ID attribute value are returned. Elements that support both the NAME and the ID attribute are included in the collection returned by the getElementsByName method, but not elements with a NAME expando.
<html>
<head>
<title>节点的增删改查</title>
<script type="text/javascript">
function init() {
alert(document.getElementById("div1").nodeName);
alert(document.getElementsByName("container").length);// IE结果是2,Chrome、FF结果是3
alert(document.getElementById("container").value);// IE结果是1,Chrome、FF结果是2
}
</script>
</head>
<body onload="init()">
<div id="div1" name="container">1</div>
<!--<div id="div1"></div>-->
<span id="div1" name="container">2</span>
<input name="container" type="text" value="1" />
<input id="container" type="text" value="2" />
</body>
</html>
2. parentNode、firstChild以及lastChild，这三种属性都可以递归来使用。
html实例：
<html>
<head>
<title>节点的增删改查</title>
</head>
<body>
<div id="level1">
<div id="level21">
<div id="level3"><div>
</div>
<div id="level22"></div>
</div>
</body>
</html>
parentNode：取得当前节点的父节点，如document.getElementById("level21").parentNode，也可以obj.parentNode.parentNode.parentNode。
firstChild：取得当前节点的第一个子节点，如document.getElementById("level1").firstChild;，也可以document.getElementById("level1").firstChild.firstChild。
lastChild：取得当前节点的最后一个子节点，如document.getElementById("level1").lastChild。
3. 根节点，document.documentElement得到HTML以及XML文档中的根节点，document.body提供了对body节点的直接访问。
4. 所有子节点：childNodes和children，各种版本各种浏览器下表现都不一样。
5. 节点信息：nodeName(tagName)、nodeValue、nodeType.
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName是#text
文档节点的nodeName是#document
文本节点的nodeValue包含文本
属性节点的nodeValue包含属性值
元素节点和文档节点没有nodeValue
| 元素类型 | 节点类型 |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 |
9
|
创建(C)&修改(U)&删除(D)
写一个点击单元格变为文本框的示例。
<html>
<head>
<title>节点的增删改查</title>
<script type="text/javascript">
function appendInput(tdNode) {
// 创建input元素节点，createElement创建元素节点，createTextNode(value)创建文本节点
var inputNode = document.createElement("input");
// 给input属性赋值
inputNode.value = tdNode.innerText;
inputNode.name = "value";
// 删除单元格的文本节点，参数为要删除的子节点对象
tdNode.removeChild(tdNode.firstChild);
// 将input追加到单元格中，appendChild(node)将node追加到父节点末尾，insertBefore(node1, node2)是将node1加入到node2之前
tdNode.appendChild(inputNode);
// 聚焦input，在chrome下，光标直接定位到文本最右边，IE下确实最左边
inputNode.focus();
// 将光标移到文本最右边
moveCursorToRight(inputNode);
}
/** 光标移到文本最右边 */
function moveCursorToRight(obj) {
var r = obj.createTextRange();
r.moveStart(‘character‘, obj.value.length);
r.collapse(true);
r.select();
}
</script>
</head>
<body>
<table>
<tr>
<td onclick="appendInput(this)">Hello!</td>
</tr>
</table>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/babietongtianta/p/4954392.html
