前端开发

document.importNode和document.adoptNode使用及区别

2019-04-30111次阅读DOM
在学习Web Components即web组件中的Shadow DOM创建组件时,发现document.importNode的使用,顺虅摸瓜又摸到了document.adoptNode,在这里做记录一下document.importNode和document.adoptNode如何使用及它们的区别。
前端开发

Document​.create​Document​Fragment()文档片段节点

2019-04-3081次阅读DOM
在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记。DocumentFragments是DOM节点,通常的用例是创建文档片段,将多个元素附加到文档片段,然后将文档片段附加到DOM树。因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。
前端开发

深入了解Element​.class​List

2019-04-23120次阅读DOM
平时使用时就是classList.add、classList.remove等方法。但还真不知道classList是一个数组,其次就是add、remove、toggle可以有多个参数。Element.classList是一个只读属性,返回一个元素的类属性的实时DOMTokenList集合。使用classList是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法。
前端开发

常用的HTML DOM nextElementSibling属性简介

2019-04-2286次阅读DOM
nextElementSibling 属性返回指定元素之后的下一个兄弟元素(相同节点树层中的下一个元素节点)。nextSibling 属性与 nextElementSibling 属性的差别:nextSibling 属性返回元素节点之后的兄弟节点(包括文本节点、注释节点);nextElementSibling 属性只返回元素节点之后的兄弟元素节点(不包括文本节点、注释节点);nextElementSibling属性为只读属性。
前端开发

insertAdjacentHTML与appendChild方法区别

2019-04-04173次阅读javascriptDOM
在向HTML DOM添加新元素时,HTML元素可选方法有appendChild、insertAdjacentHTML和innerHTML属性。