DOM操作在web页面编程中是非常重要的。现在已有很多经过封装的三方模块,如JQuery等,可以很方便的操作DOM,但是,做为一名开发者,还是非常有必要知道原生JS是如何操作DOM的,这样可以提升自己的编程能力,并可以猜测或理解三方模块是如何封装的,甚至可以实现自己的封装模块。
那么,本文将介绍大家一些原生JS操作DOM的方式。
document.querySelector & document.querySelectorAll
document.querySelector方法返回文档中与指定选择器或选择器组匹配的第一个 html 元素。 如果找不到匹配项,则返回null。
document.querySelectorAll 方法返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
![ad1c62e5ab2163277cbb67752a51b182.png](https://i-blog.csdnimg.cn/blog_migrate/1f823f076c974aaa6f33f0c2141fb8b7.jpeg)
document.createElement
在一个 HTML 文档中, Document.createElement(tagName) 方法创建由 tagName 指定的 HTML 元素,或一个HTMLUnknownElement,如果tagName不被识别。
Node.appendChild
Node.appendChild()方法将节点添加到给定父节点的子节点列表的末尾。 请注意,如果给定的子代是文档中现有节点的引用,则它将移动到新位置。看看示例:
![30b9e8bbb7a74b7be78dcbbcda0365b4.png](https://i-blog.csdnimg.cn/blog_migrate/cf32c1ad3ffc71cc11536ac8e0da0a71.jpeg)
Node.insertBefore
此方法在给定的父节点内的子引用节点之前插入给定节点(并返回插入的节点)
伪代码如下所示:
深圳
↓
Node.insertBefore('厦门','北京')
↓
厦门
![1dcf5659ba2d137517076b0370a4a445.png](https://i-blog.csdnimg.cn/blog_migrate/4caa601147cb429a460d7cabf69b5baf.jpeg)
Node.removeChild
Node.removeChild方法从DOM中删除一个子节点并返回删除的节点。 请注意,返回的节点不再是DOM的一部分,而是仍存在于内存中。 如果处理不当,可能会导致内存泄漏。
![d4ff454484eb5bb48433005b189895e8.png](https://i-blog.csdnimg.cn/blog_migrate/498d7509f4106743d9a2768b57852506.jpeg)
Node.replaceChild
此方法替换父节点中的子节点(并返回替换后的旧子节点)。请注意,如果处理不当,此方法可能导致与Node.removeChild类似的内存泄漏问题。
Node.cloneNode
Node.cloneNode(deep) 方法返回调用该方法的节点的一个副本,deep(可选)表示是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.
let list = document.querySelector('ul');let clone = list.cloneNode();
Element.getAttribute / Element.setAttribute
Element.getAttribute方法返回元素上给定属性的值,反之亦然,Element.setAttribute设置给定元素上属性的值。
![d5f41236e5b294d4d75ab1fd633bcccc.png](https://i-blog.csdnimg.cn/blog_migrate/67ec682af07b059ae9d2ec6090f8bbcb.jpeg)
Element.hasAttribute / Element.removeAttribute
Element.hasAttribute方法检查给定元素是否具有指定的属性,返回值为boolean。 通过调用Element.removeAttribute方法,我们可以从元素中删除具有给定名称的属性。
![26a57782b076b04be706ca3951f5745a.png](https://i-blog.csdnimg.cn/blog_migrate/6f1d72917e3b69eb0c41fb4a7415af84.jpeg)
Element.insertAdjacentHTML
element.insertAdjacentHTML(position, text) 将指定的文本解析为HTML或XML,并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤,使其比直接innerHTML操作更快。
position是相对于元素的位置,并且必须是以下字符串之一:
beforebegin:元素自身的前面。afterbegin:插入元素内部的第一个子节点之前。beforeend:插入元素内部的最后一个子节点之后。afterend:元素自身的后面。
text是要被解析为HTML或XML,并插入到DOM树中的字符串。
![4d34ac78591218a029539065e1a14dc1.png](https://i-blog.csdnimg.cn/blog_migrate/4e5e9fa4ed54d9241ca8a41e177a5cf2.jpeg)
示例:
var list = document.querySelector('ul');list.insertAdjacentHTML('afterbegin', 'First');
总结
了解这些JS对DOM操作的方法后,如果愿意,我们可以实现一个类似JQuery的模块,可以公开发布给大家用。或者可以封装一个自己私有的模块,方便自己的日常工作,如果担心逻辑或代码泄露,你还可以用JShaman之类的平台对自己的代码进行混淆加密。