javascript DOM model操作
DOM
D-document
O-object
M-Model
一、将文档想成一个倒数, 每一部分(元素、内容、属性、注释)都是一个节点。
二、只要知道一个节点,按关系找到其它节点
父节点: parentNode
子节点(第一个,最后一个) childNodes firstChild lastChild
兄弟节点 (上一个, 下一个) nextSibling previousSlibing
三、找到节点:节点类型(nodeType)、节点名(nodeName)、节点值(nodeValue)
每个节点都拥有包含着关于节点某些信息的属性, 这些属性是
nodeName (节点名称)
nodeType (节点类型)
nodeValue(节点值)
nodeName 属性含有节点名称
元素节点的nodeName 是标签名称
属性节点的nodeName 是属性名称
文本节点的nodeName 永远是#text
文档节点的nodeName 永远是#document
注释:nodeName 所包含的xml 元素的标签名称永远是大写的。
对于文本节点,nodeName 属性包含文本
对于属性节点,nodeValue属性包含属性值
nodeValue 属性对于文档节点和元素节点是不可用的
nodeType 属性可返回节点的类型
最重要的节点类型是:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
可以在一个文档流中:
1.创建节点
document.createElement(节点元素名);
2.添加节点
appendChild(节点);
insertBefore(节点);
3.删除节点
removeChild(节点);
参考实例
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>节点操作</title> </head> <body> content<br/> content<br/> content<br/> <div id="one"> <b>bbbbbbbb</b> <s id="two">ssssssssssss</s><i>iiiiiii</i> </div> content<br/> content<br/> content<br/> <script type="text/javascript"> function addNode(){ var one = document.getElementById('one'); var two = document.getElementById('two'); var obj = document.createElement('a'); obj.href= 'http://www.ybbqg.com'; obj.tille= '追加节点'; obj.textContent = 'nodeContent'; //document.body.appendChild(obj); //在body元素中追加节点 //one.appendChild(obj); //在指定元素中追加节点 var u = document.createElement('u'); u.name = 'uuuuuu'; u.textContent = 'uuuuuuuuu'; obj.appendChild(u); //one.insertBefore(obj, two); //在two元素之前添加 //one.insertBefore(obj, two.nextSibling); //之前添加 insertAfter(one, obj, two); } //在之后添加节点 function insertAfter(fobj, newobj, location){ if (location.nextSibling.nodeType == 1){ fobj.insertBefore(newobj, location.nextSibling); } else { fobj.appendChild(newobj); } } //删除节点 function delNode(){ var one = document.getElementById('one'); one.removeChild(one.lastChild); } </script> <a href="javascript:addNode()">add</a> <a href="javascript:delNode()">del</a> </body> </html>
前望