上一篇:HTML DOM(一)
上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点、元素节点、文本节点、属性节点、注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这些节点进行增删改查的操作。
获取(R)
1. getElementById(id)、getElementsByName(name)、getElementsByTagName(tagName),这三种方法都会忽略文档的结构。
<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>
3. 根节点,document.documentElement得到HTML以及XML文档中的根节点,document.body提供了对body节点的直接访问。
4. 所有子节点:childNodes和children,各种版本各种浏览器下表现都不一样。
5. 节点信息:nodeName(tagName)、nodeValue、nodeType.
元素类型 | 节点类型 |
---|---|
元素 | 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>
未完待续。。。