javascriptdom第一章（七爪源码5个你可能不知道的）
javascriptdom第一章（七爪源码5个你可能不知道的）insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将生成的节点插入到 DOM 树中的指定位置。 它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。 这避免了额外的序列化步骤，使其比直接使用 innerHTML 更快。< ul id = "myList" > < li >Apple </ li > < li >Banana </ li > < li >Carrot </ li > </ ul > copy codeconst myList = document. getElementById( "myList"); const pe
如果你从事 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> "
copy code
如果你觉得这个内容有启发性，我想邀请你帮我一个小忙：
- 点赞，让更多人看到这个内容，也方便你随时找到这个内容；
- 关注我们，不时发布文章；
- 另见其他文章；
关注七爪网，获取更多APP/小程序/网站源码资源！
