likes
comments
collection
share

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

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

如果你从事 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. 也看看其它文章；

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

转载自:https://juejin.cn/post/7136409933938950152
评论
请登录