七爪源码：5 个你可能不知道的 javascript DOM 方法(JavaScript获取DOM元素的方式有哪些？)

七爪源码：5 个你可能不知道的 javascript DOM 方法

如果你从事 Web 开发，掌握 JavaScript 的一部分就是了解一些方便的 DOM 方法——所以这里有 5 个你可能不知道的方法！

1.closest（）

Element.closest() 方法用于获取：与特定选择器匹配且距离当前元素最近的祖先元素（或当前元素本身）。 如果未找到匹配项，则返回 null 。

< article >
< div id = "div-01" >Here is div-01
< div id = "div-02" >Here is div-02
< div id = "div-03" >Here is div-03 </ div >
</ div >
</ div >
</ article >
copy codevar el = document. getElementById( 'div-03');

copy code

使用场景

此方法的最佳用例之一：当您向元素添加事件侦听器时，但您不确定该元素在 DOM 树中的位置，您需要找到父元素！

2.append（）

Element 中的 Element.append 方法 在 Node 对象或 DOMString 对象的最后一个子对象之后插入一个集合。 插入的 DOMString 对象相当于 Text 节点。 和 Node.appendChild() 的区别：

• Element.append() 允许追加 DOMString 对象，而 Node.appendChild() 只接受 Node 对象。
• Element.append() 没有返回值，而 Node.appendChild() 返回附加的 Node 对象。
• Element.append() 可以追加多个节点和字符串，而 Node.appendChild() 只能追加一个节点。

< ul id = "myList" >
< li >Apple </ li >
< li >Banana </ li >
< li >Carrot </ li >
</ ul >

copy code

3. insertAdjacentHTML()

insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将生成的节点插入到 DOM 树中的指定位置。 它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。 这避免了额外的序列化步骤，使其比直接使用 innerHTML 更快。

语法：element.insertAdjacentHTML（位置，文本）；

• 位置
• 一个 DOMString ，表示插入相对于元素的位置，必须是以下字符串之一：
• 'beforebegin' ：在元素本身的前面。
• 'afterbegin' : 在元素内的第一个子节点之前插入。
• 'beforeend' : 在元素内的最后一个子节点之后插入。
• 'afterend' ：在元素本身的后面。
• 文本
• 将被解析为 HTML 或 XML 元素并插入到 DOM 树 DOMString 中。

// was :
//<div>
//<div id="one"> one</div>
//</div>
var d1 = document. getElementById( 'one');
d1. insertAdjacentHTML( 'afterend', '<div id="two"> two</div> ');

copy code

使用场景

• 这在构建用户界面和需要动态构建元素时可能会派上用场

matches（）

如果元素被指定的选择器字符串选中，Element.matches() 方法返回true； 否则返回假。

语法：让结果 = element.matches(selectorString);

• 结果值为 true 或 false 。
• selectorString 是一个 CSS 选择器字符串。

< ul id = "birds" >
< li >Orange-winged parrot </ li >
< li class = "endangered" >Philippine eagle </ li >
< li >Great white pelican </ li >
</ ul >

myButton.addEventListener( "click", () => {
if (myButton.matches( ".has-errors")) {
alert( "You have errors!");
}
});
copy code

使用场景

如果您需要通过事件或元素检查元素上是否存在 CSS 选择器，这将非常有用！

replaceWith（）

ChildNode.replaceWith() 方法使用一组 Node 对象或 DOMString 对象替换此节点的父节点下的子节点。 DOMString 对象被视为等效的文本节点插入。

语法：void ChildNode.replaceWith((Node or DOMString)... nodes);

var parent = document. createElement( "div");
var child = document. createElement( "p");
parent. appendChild(child);

copy code

如果你觉得这个内容有启发性，我想邀请你帮我一个小忙：

• 点赞，让更多人看到这个内容，也方便你随时找到这个内容；
• 关注我们，不时发布文章；
• 另见其他文章；

关注七爪网，获取更多APP/小程序/网站源码资源！

JavaScript获取DOM元素的方式有哪些？

JavaScript获取DOM元素的方式有哪些？钍小编为大家总结获取元素的方式：

1. 根据id属性的值获取元素,返回来的是一个元素对象

2. 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

下面的几个,有的浏览器不支持。

3. 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

4. 根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

5. 根据选择器获取元素,返回来的是一个元素对象

6. 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

以上就是JavaScript获取DOM元素的方式总结的详细内容。