初学前端JavaScript入门文档

JavaScript中的DOM3节点操作

2019-11-03  本文已影响0人  简约酒馆


创建节点

创建新的节点先通过使用文档对象中的createElement()方法和createTextNode()方法,生成一个新元素,并生成文本节点。再通过使用appendChild()方法将创建的新节点,添加到当前节点的末尾处。

appendChild()

向节点添加最后一个子节点。  在当前的节点的子节点列表中的最后一个子节点后添加一个新的节点

创建属性节点

createAttribute() 创建新的 Attr 节点。

语法:document.createAttribute(name)

节点的创建、添加、移除、替换、插入

创建新节点:createDocumentFragment()

创建一个DOM片段:

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore()

添加文本节点的方式也可以用innerHTML实现类似效果

DocumentFragment对象(了解)

接口表示文档的一部分(或一段)。更确切地说,它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。

DocumentFragment节点不属于文档树,继承的 parentNode 属性总是 null。

不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。


创建文件碎片节点createDocumentFragment()

每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。createDocumentFragment()方法,该方法用来创建文件碎片节点。

插入节点

insertBefore()方法:可在已有的子节点前插入一个新的子节点。

语法:insertBefore(newchild,exichild)

nnewchild 必须 要插入的节点对象

nexichild 必须写成null会在子节点列表末尾添加新的节点。

与appendChild()方法相同之处:插入子节点

不同之处:实现原理方法不同。

     appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点来说)。

insertBefore 方法 是在已有的节点前添加新的节点(相对于子节点来说的)

删除节点

removeChild(exichild) 方法

用于移除节点,接受一个参数,即要移除的节点,返回被移除的节点,注意被移除的节点仍然在文档中,不过文档中已没有其位置了

替换节点

replaceChild(newChild,exiChild) 方法

用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要替换的节点,返回被替换的节点

克隆节点

cloneNode() 方法创建指定节点的精确拷贝。

语法:

cloneNode(include_all)

include_all必需。如果这个布尔参数设置为 true,被克隆的节点会复制原始节点的所有子节点。

DOM对象方法

上一篇下一篇

猜你喜欢

热点阅读