七爪源码：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');

var r1 = el. closest( "#div-02");

// return the element with id div-02

var r2 = el. closest( "div div");

// Returns the nearest div ancestor that has a div ancestor, in this case the div-03 element itself

var r3 = el. closest( "article > div");

// Returns the nearest div ancestor element with the parent element article, in this case div-01

var r4 = el. closest( ":not(div)");

// Returns the nearest non-div ancestor element, in this case the outermost article

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 codeconst myList = document. getElementById( "myList");

const pearListItem = document. createElement( "li");

const lettuceListItem = document. createElement( "li");

pearListItem. textContent = "Pear";

lettuceListItem. textContent = "Lettuce";

myList. append(pearListItem, lettuceListItem);

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> ');

// At this point, the new structure becomes:

//<div>

//<div id="one"> one</div>

//<div id="two"> two</div>

//</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 >

< script type = "text/javascript" >

var birds = document . getElementsByTagName ( 'li' ); for ( var i = 0 ; i < birds. length ; i++) { if (birds[i]. matches ( '.endangered' )) { console . log ( 'The' + birds[i]. textContent + 'is endangered!' ); } } </ script >

copy code```js

const myButton = document.getElementById( "myButton");

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);

// "<div><p></p></div> "

var span = document. createElement( "span");

child. replaceWith(span);

console. log(parent. outerHTML);

// "<div><span></span></div> "

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

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

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

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

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

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

document.getElementById(\"id属性的值\");
document.getElementById(\"btn\");

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

document.getElementsByTagName(\"标签名字\");
document.getElementsByTagName(\"li\");

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

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

document.getElementsByName(\"name属性的值\")
document.getElementsByName(\"name1\")

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

document.getElementsByClassName(\"类样式的名字\")
document.getElementsByClassName(\"cls\")

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

document.querySelector(\"选择器的名字\");
document.querySelector(\"#btn\"); //id，类，标签等选择器用的比较多

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

document.querySelectorAll(\"选择器的名字\")

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