likes
comments
collection

5 个你可能不知道的 JavaScript DOM 方法

作者站长头像
站长
· 阅读数 29

如果你从事 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>

var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");
// 返回 id 为 div-02 的那个元素

var r2 = el.closest("div div");
// 返回最近的拥有 div 祖先元素的 div 祖先元素,这里的话就是 div-03 元素本身

var r3 = el.closest("article > div");
// 返回最近的拥有父元素 article 的 div 祖先元素,这里的话就是 div-01

var r4 = el.closest(":not(div)");
// 返回最近的非 div 的祖先元素,这里的话就是最外层的 article

使用场景

此方法的最佳用例之一:当你为某个元素添加事件侦听器,但不确定此元素在 DOM 树中的位置,并且需要找到父元素时!

2. append()

Element.append 方法在 Element的最后一个子节点之后插入一组 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>


    const myList = document.getElementById("myList");
    const pearListItem = document.createElement("li");
    const lettuceListItem = document.createElement("li");

    pearListItem.textContent = "Pear";
    lettuceListItem.textContent = "Lettuce";

    myList.append(pearListItem, lettuceListItem);

3. insertAdjacentHTML()

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

语法:element.insertAdjacentHTML(position, text);

  • position

  • 一个 DOMString,表示插入内容相对于元素的位置,并且必须是以下字符串之一:

    • 'beforebegin':元素自身的前面。
    • 'afterbegin':插入元素内部的第一个子节点之前。
    • 'beforeend':插入元素内部的最后一个子节点之后。
    • 'afterend':元素自身的后面。
  • text

  • 是要被解析为 HTML 或 XML 元素,并插入到 DOM 树中的 DOMString

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

// 此时,新结构变成:
// <div>
//  <div id="one">one</div>
//  <div id="two">two</div>
// </div>


使用场景

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

matches()

如果元素被指定的选择器字符串选择,Element.matches()  方法返回 true; 否则返回 false。

语法:let result = element.matches(selectorString);

  • result 的值为 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>

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

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

使用场景

如果你需要通过事件或者element来检查某个元素上是否存在某个css选择器的时候,这将很有用!

replaceWith()

ChildNode.replaceWith()  的方法用一套 Node 对象或者 DOMString 对象,替换了该节点父节点下的子节点 。DOMString 对象被当做等效的Text 节点插入。

语法: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>"

❤️ 看完三件事:

如果你觉得这篇内容对你挺有启发,我想邀请你帮我个小忙:

  1. 点赞,让更多的人也能看到这篇内容,也方便自己随时找到这篇内容(收藏不点赞,都是耍流氓 -_-);
  2. 关注我们,不定期分好文章;
  3. 也看看其它文章;

🎉欢迎你把自己的学习体会写在留言区,与我和其他同学一起讨论。如果你觉得有所收获,也欢迎把文章分享给你的朋友。