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. 
  1. <html>
  2. <head>
  3. <title>节点的增删改查</title>
  4. <script type="text/javascript">
  5.             function init() {  
  6.                 alert(document.getElementById("div1").nodeName);  
  7.                 alert(document.getElementsByName("container").length);// IE结果是2,Chrome、FF结果3  
  8.                 alert(document.getElementById("container").value);// IE结果是1,Chrome、FF结果是2  
  9.             }  
  10. </script>
  11. </head>
  12. <body onload="init()">
  13. <div id="div1" name="container">1</div>
  14. <!--<div id="div1"></div>-->
  15. <span id="div1" name="container">2</span>
  16. <input name="container" type="text" value="1" />
  17. <input id="container" type="text" value="2" />
  18. </body>
  19. </html>
  • getElementsByTagName(tagName):通过tagName获取一组元素节点,返回的是具有相同tagName的节点数组。这个方法的特殊之处在于不仅仅可以通过顶层document来使用,所有元素节点都可以使用。如:document.getElementById("container").getElementByTagName("div");,这跟css样式有些相像,比如定义id为container元素节点下的所有div样式:.container div{display:none;}。

       2. parentNode、firstChild以及lastChild,这三种属性都可以递归来使用。

       html实例:       

  1. <html>
  2. <head>
  3. <title>节点的增删改查</title>
  4. </head>
  5. <body>
  6. <div id="level1">
  7. <div id="level21">
  8. <div id="level3"><div>
  9. </div>
  10. <div id="level22"></div>
  11. </div>
  12. </body>
  13. </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是属性名称
    • 文本节点的nodeName是#text
    • 文档节点的nodeName是#document
  • nodeValue
    • 文本节点的nodeValue包含文本
    • 属性节点的nodeValue包含属性值
    • 元素节点和文档节点没有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>

       未完待续。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏图形学与OpenGL

CG实验6 交互与动画

(1) 示范代码1为交互实例:在鼠标点击的位置上绘制出点;示范代码2为动画实例:三角形按照恒定的速度(45度/秒)旋转。结合示范代码,学习理解交互与动画的基本思...

681
来自专栏HT

基于HTML5 Canvas 实现矢量工控风机叶轮旋转

之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元——叶轮旋转。 先看看最后我们实现的效果:http://www.hightopo.com...

1928
来自专栏calmound

Javascript DOM操作实例

      最近在学DOM,但是还是没有办法很好的记住API,想找些例子来练习,网上的例子将一个个DOM对象方法挨个举例,并没有集合在一起用,效果不尽人意。所以...

2303
来自专栏跟着阿笨一起玩NET

C#图片处理示例(裁剪,缩放,清晰度,水印)

原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/

591
来自专栏菩提树下的杨过

silverlight:如何在图片上挖个洞?

一、不写代码的方法:用Blend 看图说话: 这是待处理的图片win7 ? 在win7上,画一个矩形,再用钢笔随便画个封闭的path ? 将矩形与path合...

17610
来自专栏开源优测

在Selenium Webdriver中使用XPath Contains、Sibling函数定位

前言 在一般情况下,我们通过简单的xpath即可定位到目标元素,但对于一些既没id又没name,而且其他属性都是动态的情况就很难通过简单的方式进行定位了。 在这...

2053
来自专栏周明礼的专栏

高冷的 WebGL

Threejs是一个用于在浏览器中绘制3D图形的JS库,其底层实际是对浏览器提供的WebGL Api进行了封装。作为一个好奇宝宝,看到了Threejs那些神奇的...

1K1
来自专栏青枫的专栏

day03_js学习笔记_03_js的事件、js的BOM、js的DOM

411
来自专栏Hongten

HTML DOC

HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直...

391
来自专栏HTML5学堂

HTML5-类库系列 原生DOM功能函数

HTML5学堂:今天我们抛开框架,书写一些DOM操作方面的功能。相信用过JQ的人,绝对不会使用原生DOM进行某些效果的实现。原因很简单,在原生DOM当中需要处理...

2798

扫码关注云+社区