HTML DOM(2)：节点的增删改查-HTML教程-爱易网页

HTML DOM(2)：节点的增删改查

日期：2014-05-17　浏览次数：20773 次

HTML DOM(二)：节点的增删改查

上一篇：HTML DOM(一)

上一篇讲述了DOM的基本知识，从其得知，在DOM眼中，HTML的每个成分都可以看作是节点(文档节点、元素节点、文本节点、属性节点、注释节点，其中，属性节点是属于元素节点)，本篇的内容就是通过DOM对这些节点进行增删改查的操作。

获取(R)

1. getElementById(id)、getElementsByName(name)、getElementsByTagName(tagName)，这三种方法都会忽略文档的结构。

getElementById(id)：通过id获取元素节点，如果页面上含有多个相同id的节点，那么只获取第一个节点，理论上，id在页面中应该是唯一的。jquery中通过$("#id")来获得节点，这种方式类似于css中的id选择器。
getElementsByName(name)：通过name获取一组元素节点，返回的是具有相同name的节点数组。注意，这个方法在IE和W3C(FireFox、Chrome)下表现是不一样的，这个方法应该不是DOM LEVEL 1里的规范，IE支持LEVEL 1，和后来的标准就有很多差异了。主要有如下几点区别：
- 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>
		
		<span id="div1" name="container">2</span>
		<input name="container" type="text" value="1" />
		<input id="container" type="text" value="2" />
	</body>
</html>
```
getElementsByTagName(tagName)：通过tagName获取一组元素节点，返回的是具有相同tagName的节点数组。这个方法的特殊之处在于不仅仅可以通过顶层document来使用，所有元素节点都可以使用。如：document.getElementById("container").getElementByTagName("div");，这跟css样式有些相像，比如定义id为container元素节点下的所有div样式：.container div{display:none;}。

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节点的直接访问。

未完待续。。。

1楼weiythi前天 22:56: 增删改查，刚写四分之一啊。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

HTML DOM(2)：节点的增删改查

相关资料更多>

推荐阅读更多>