Vanilla JavaScript中DOM操纵的基础知识（无jQuery）

这篇文章，我们的现代JavaScript选集的一部分，探讨了Vanilla JavaScript进行DOM操纵的功能，表明它是JQuery的强大替代品。 通过SitePoint Premium访问完整的选集。

> jQuery通常是DOM操纵的首选，而Vanilla JavaScript提供了有效的本机方法。本文涵盖了关键DOM操纵任务：查询和修改DOM，管理类和属性，事件处理和动画。 最后，我们将构建一个轻巧的自定义DOM库。

钥匙要点：

。

• >和
提供有效的元素选择；前者返回第一场比赛，而后者则以nodelist为单位。
• >使用.querySelector()方法和.querySelectorAll()>修改元素类和属性，了解操纵DOM与HTML属性的性能含义。
>使用
• 进行事件处理，启用单个元素上各种类型的多种侦听器，提供的灵活性比.classList>。.setAttribute()>。
>通过创建辅助功能或迷你插曲来处理重复的DOM任务，提高性能和代码清晰度，从而使用本机JavaScript复制JQuery的便利
• .addEventListener().onclick DOM操纵：查询DOM
• >
（注意：本文提供了香草DOM API的高级概述。有关综合详细信息，请参阅Mozilla开发人员网络。） 与CSS选择器一起使用

>使用

>

这是第一个匹配元素。

检查元素是否与选择器匹配：

.querySelector()

检索所有匹配元素：

const myElement = document.querySelector('#foo > div.bar');

父元素中的查询.matches()提高性能：

myElement.matches('div.bar') === true;

>与.querySelectorAll()>，

等方法的实时收集不同，返回静态节点符，该静态节点不会动态更新。 这会影响性能并需要明确的迭代。

const myElements = document.querySelectorAll('.bar');

与Nodelists合作

const myChildElement = myElement.querySelector('input[type="submit"]');

getElementsByTagName().querySelectorAll()返回节点符，而不是数组。 将其转换为标准数组方法的数组：

const myElement = document.querySelector('#foo > div.bar');

> Nodelist属性，例如children>，firstElementChild，nextElementSibling等，提供了对相关节点的方便访问。 请记住，childNodes包括所有节点类型，而不仅仅是元素。 使用nodeType或instanceof检查节点类型。

修改类和属性

使用.classList>进行有效类操作的方法：

>

myElement.matches('div.bar') === true;

>直接访问和修改元素属性：

>

const myElements = document.querySelectorAll('.bar');

.getAttribute()，.setAttribute()和.removeAttribute()>直接修改HTML属性，触发浏览器Redraws。 很少使用这些，主要用于缺乏DOM属性等效物的属性，或者在克隆等操作中持续进行更改时。

添加CSS样式

使用骆驼限制的属性名称应用样式：

const myChildElement = myElement.querySelector('input[type="submit"]');

.window.getComputedStyle()>检索计算样式值：

Array.from(myElements).forEach(doSomethingWithEachElement);

>修改dom

>使用appendChild()>，insertBefore()和进行元素操纵。 removeChild()创建副本；使用布尔论点进行深层克隆。 用cloneNode()创建新元素，并使用createElement()>。 createTextNode()

元素属性：innerhtml和textContent

>

和

分别管理HTML和纯文本内容。 修改.innerHTML完全替换内容；使用.textContent的附加效率不如附加单个节点效率。 使用.innerHTML来优化多个附录。.innerHTML = DocumentFragment

聆听事件

>首选

，而不是直接分配到事件属性（例如

）的灵活性和多个侦听器。 使用.addEventListener()访问触发元素。 onclick>防止默认操作； event.target停止事件冒泡。 可选的第三个参数为.preventDefault()>提供配置选项（.stopPropagation()，addEventListener()，capture）。 事件委托提高效率并处理动态添加的元素。once passive

动画

>使用

进行平滑的动画，避免布局thrash。

> requestAnimationFrame()

写下自己的助手方法

> >创建自定义辅助功能以简化DOM操纵，从而反映了jQuery的便利性。 此示例显示了一个基本的自定义

函数：

> $

这允许在保留Vanilla JavaScript的好处的同时提供更多简洁的代码。

myElement.classList.add('foo');
myElement.classList.remove('bar');
myElement.classList.toggle('baz');

结论

>（为简洁而省略了FAQS部分，但是输入中提供的信息已上面涵盖。

以上是Vanilla JavaScript中DOM操纵的基础知识（无jQuery）的详细内容。更多信息请关注PHP中文网其他相关文章！