节点的操作
一、创建节点
(1). document.createElement():创建新元素,这个⽅法只接收⼀个参数,元素的标签名
(2).document.createTextNode() 创建⽂本节点,参数为 字符串⽂本
二、插⼊节点
(1).appendChild()
插⼊指定的节点使其成为那个节点的最后⼀个⼦节点
在插⼊的元素节点上调⽤
(2).insertBefore(新节点,参照节点)
第⼀个参数: 待插⼊的节点
第⼆个参数:已存在的节点,新节点将插⼊该节点的前⾯
在⽗节点上调⽤
(3).如果调⽤appendChild()或insertBefore()将已存在⽂档中的⼀个节点再次插⼊,那个 节点将⾃动从它当前的位置删除并在新的位置重新输⼊,没有必要显式删除该节点
(4).封装⼀个insertAt(parent, child, n)
三、删除和替换节点
(1).replaceChild(newNode, oldNode)
old.parentNode.replaceChild(new, old)
删除⼀个⼦节点并⽤⼀个新的节点取⽽代之,
第⼀个参数是新节点,第⼆个参数需要代替的节点
在⽗节点上调⽤该⽅法
(2).removeChild(node)
从⽂档树中删除⼀个节点
该⽅法不是在删除的节点上调⽤,⽽是在⽗节点上调⽤
四、克隆节点
(1).cloneNode(node, bool)
①.⽤于创建调⽤这个⽅法的节点的⼀个完全相同的副本
②.接受⼀个布尔值参数,表⽰是否执⾏深复制true: 深复制 复制节点及其整个⼦节点树
false: 浅复制 只复制节点本⾝
③.复制后返回的节点副本属于⽂档所有,但并没有为它指定⽗节点,除⾮添加到⽂ 档中
④.不会复制添加到DOM节点中的JavaScript属性,例如事件处理程序,IE就会复制 事件处理程序,建议复制前先移除事件处理程序
五、创建文档片段
(1).document.createDocumentFragment()
①.⽂档⽚段继承了Node的所有⽅法,通常⽤于执⾏那些针对⽂档的DOM操作
②.如果将⽂档中的节点添加到⽂档⽚段中,就会从⽂档树中移除该节点,我们 在浏览器中也再看不到该节点,添加到问的判断的新节点同样不属于⽂档树
③.可以通过appendChild或者insertBefore将⽂档⽚段内容添加到⽂档中 ,在将⽂档⽚段作为参数传递给这两个⽅法时,实际上只会将⽂档⽚段的 所有⼦节点添加到相应位置,⽂档⽚段本⾝永远不会成为⽂档树的⼀部 分
扩展:
(1).documentFragment类型
①.在所有节点类型中,只有DocumentFragment在⽂档中没有对应的标记
②.DOM规定⽂档⽚段是⼀种‘轻量级’的⽂档,可以包含和控制节点,但不会像完 整⽂档那样占⽤额外的资源
③.特征:nodeType: 11,nodeName:#document-fragment,nodeValue: nullparentNode: null
④.虽然不能把⽂档⽚段直接添加到⽂档中,但可以将它作为'仓库'使⽤,可以在⾥⾯ 保存将来可能会添加到⽂档中的节点