上一篇讲述了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)
写一个点击单元格变为文本框的示例。

  1. <html>
  2. 	<head>
  3. 		<title>节点的增删改查</title>
  4. 		<script type="text/javascript">
  5. 			function appendInput(tdNode) {
  6. 				// 创建input元素节点，createElement创建元素节点，createTextNode(value)创建文本节点
  7. 				var inputNode = document.createElement("input");
  8. 				// 给input属性赋值
  9. 				inputNode.value = tdNode.innerText;
  10. 				inputNode.name = "value";
  11. 				// 删除单元格的文本节点，参数为要删除的子节点对象
  12. 				tdNode.removeChild(tdNode.firstChild);
  13. 				// 将input追加到单元格中，appendChild(node)将node追加到父节点末尾，insertBefore(node1, node2)是将node1加入到node2之前
  14. 				tdNode.appendChild(inputNode);
  15. 				// 聚焦input，在chrome下，光标直接定位到文本最右边，IE下确实最左边
  16. 				inputNode.focus();
  17. 				// 将光标移到文本最右边
  18. 				moveCursorToRight(inputNode);
  19. 			}
  20.  
  21. 			/** 光标移到文本最右边 */
  22. 			function moveCursorToRight(obj) {
  23. 				var r = obj.createTextRange();
  24. 				r.moveStart('character', obj.value.length);
  25. 				r.collapse(true);
  26. 				r.select();
  27. 			}
  28. 		</script>
  29. 	</head>
  30. 	<body>
  31. 		<table>
  32. 			<tr>
  33. 				<td onclick="appendInput(this)">Hello!</td>
  34. 			</tr>
  35. 		</table>
  36. 	</body>
  37. </html>

　　

HTML DOM(二)：节点的增删改查的更多相关文章

  1. 围绕DOM元素节点的增删改查

    HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 document 每个 HTML 元素是元素节点 element HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是 ...

  2. HTML DOM节点的增删改查

    上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...

  3. 9 HTML DOM事件监听&版本兼容&元素（节点）增删改查

    事件监听: 语法:element.addEventListener(event, function, useCapture); event:事件的类型,触发什么事件,注意不需要on作为前缀,比如cli ...

  4. JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

    JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...

  5. SQL Server -- 回忆笔记（二）：增删改查，修改表结构，约束，关键字使用，函数，多表联合查询

    SQL Server知识点回忆篇(二):增删改查,修改表结构,约束,关键字使用,函数,多表联合查询 1. insert 如果sql server设置的排序规则不是简体中文,必须在简体中文字符串前加N, ...

  6. ZooKeeper客户端 zkCli.sh 节点的增删改查

    zkCli.sh 在 bin 目录下的  zkCli.sh  就是ZooKeeper客户端 ./zkCli.sh -timeout 5000  -server 127.0.0.1:2181  客户端与 ...

  7. Ecmall二次开发-增删改查操作

    Ecmall二次开发-增删改查操作 Model目录includes/models 自己添加需要的model class OrdercomplainModel extends BaseModel //类 ...

  8. Zookeeper入门(六)之zkCli.sh对节点的增删改查

    参考地址为:https://www.cnblogs.com/sherrykid/p/5813148.html 1.连接 在 bin 目录下的  zkCli.sh  就是ZooKeeper客户端 ./z ...

  9. DOM节点的增删改查

    在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...

随机推荐

  1. 机器学习算法（优化）之一：梯度下降算法、随机梯度下降（应用于线性回归、Logistic回归等等）

    本文介绍了机器学习中基本的优化算法—梯度下降算法和随机梯度下降算法,以及实际应用到线性回归.Logistic回归.矩阵分解推荐算法等ML中. 梯度下降算法基本公式 常见的符号说明和损失函数 X :所有 ...

  2. git pull和git merge区别&&Git冲突：commit your changes or stash them before you can merge. 解决办法

    http://blog.csdn.net/sidely/article/details/40143441 原文: http://www.tech126.com/git-fetch-pull/ Git中 ...

  3. boost::any 用法

    boost::any可以存放任何类型的C++类型,也可以是用户自定义的类型.非常方便,可以很方便的满足在运行过程中判断数据类型,从而进行相关的操作. 函数原型: // In header: <b ...

  4. Delphi APP 開發入門（六）Object Pascal 語法初探

    Delphi APP 開發入門(六)Object Pascal 語法初探 分享: Share on facebookShare on twitterShare on google_plusone_sh ...

  5. Check back what the kd 6 for more info

    Representing a shout-to his fans in China, the What the KD 6 may be the product of NIKEiD's Player E ...

  6. MySql—模糊查询

    实例: SQL模糊查询,使用like比较关键字,加上SQL里的通配符,请参考以下:  1.LIKE 'Mc%' 将搜索以字母 Mc 开头的所有字符串(如 McBadden).  2.LIKE '%in ...

  7. Java HashMap详细介绍和使用示例

    ①对HashMap的整体认识 HashMap是一个散列表,它存储的内容是键值对(key-value)映射. HashMap继承于AbstractMap,实现了Map.Cloneable.java.io ...

  8. 安全SOCKET

    导语 要使用安全Socket需要对密码学有一定的了解.在阅读本文之前最好能阅读一下下面几个网站的内容 http://kb.cnblogs.com/page/194742/ http://kb.cnbl ...

  9. SpringBoot Web项目中中如何使用Junit

    Junit这种老技术,现在又拿出来说,不为别的,某种程度上来说,更是为了要说明它在项目中的重要性. 凭本人的感觉和经验来说,在项目中完全按标准都写Junit用例覆盖大部分业务代码的,应该不会超过一半. ...

  10. NUMA架构的优缺点

    numa把一台计算机分成多个节点(node),每个节点内部拥有多个CPU,节点内部使用共有的内存控制器,节点之间是通过互联模块进行连接和信息交互.因此节点的所有内存对于本节点所有的CPU都是等同的,对 ...