最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
DOM节点操作与节点之间关系浅析
时间:2013-07-01 编辑:简简单单 来源:一聚教程网
操作节点
// 向节点的子节点列表的末尾添加新的子节点
someNode.appendChild(newchild)
例子
下面的函数将在文档末尾插入一个新段:
代码如下 | 复制代码 |
function appendMessage (message) { |
// 在已有的子节点前插入一个新的子节点
someNode.insertBefore(newchild, refchild)
下面的下面片段可创建一个新的
代码如下 | 复制代码 |
//check if the last childnode is an element node xmlDoc=loadXMLDoc("books.xml"); xmlDoc.documentElement.insertBefore(newNode,get_lastchild(x));
|
// 将某个子节点替换为另一个
someNode.replaceChild(new_node, old_node)
下面的代码片段可替换首个
代码如下 | 复制代码 |
//check if first child node is an element node xmlDoc=loadXMLDoc("books.xml"); //create a title element and a text node //replace the first child node with the new node //output all titles |
// 从子节点列表中删除某个节点
someNode.removeChild(node)
removeChild函数则可以删除文档中的指定节点。我们仍然使用一个例子来说明该函数的使用方法。
HTML代码
代码如下 | 复制代码 |
我是将要被删除的节点 |
删除节点示例
我是将要被删除的节点
remove() ,点击这个按钮就会将上面div的子结点全部删除。
从上面的JS代码可以看到,使用removeChild的格式为:
父节点.removeChild(子结点)
removeChild的返回值
removeChild删除节点后会返回被删除节点的引用,这样当我们以后再想重新将它添加到文档中,或者是对它进行其它操作的时候就可以使用这个引用了。例如下面的代码段:
var removed = xxx.removeChild(xxxx);
则removed就是被删除的节点,可以在后面的代码中使用。
创建节点、appendChild,insertBefore,DOM节点查找、增加节点
代码如下 | 复制代码 |
words" content="" /> |
节点关系
// 父节点
someNode.parentNode
// 子节点
someNode.childNodes
// 子节点个数
someNode.childNodes.length
// 第一个子节点
someNode.firstChild
// 最后个子节点
someNode.lastChild
// 上一个同胞节点
someNode.previousSibling
// 下一个同胞节点
someNode.nextSibling
// 仅元素节点 IE9 / chrome / firefox
// 子节点个数
someNode.childElementCount
// 第一个子节点
someNode.firstElementChild
// 最后个子节点
someNode.lastElementChild
// 上一个同胞节点
someNode.previousElementSibling
// 下一个同胞节点
someNode.nextElementSibling
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31