这8个HTML元素方法你知道吗

虽然现代化的 web 开发更多地依赖各种 MVC 框架，但开发者仍需要熟练掌握 HTML 与 DOM 方面的基础知识。不过，即使是有着多年经验的前端开发者，也会遇到一些不明所以的情况。本文首先将为初学者介绍 HTML 与 DOM 的基本常识，随后为大家介绍 8个比较冷门的 HTML 元素的方法。这8个HTML元素方法你知道吗

1.table的方法

原始的 table 元素（时至今日仍然是网站布局方法里的第一名）本身自带许多精巧的方法，使用这些方法创建表格就像搭建宜家里的桌子一样简单。如果你在一个 table 元素上直接调用 .insertRow() 方法，它甚至会自动为你插入一个 元素，是不是很棒？

2.scrollIntoView()

你知道吗？当页面的 URL 中包含 #something 元素时，一旦页面加载，浏览器就会自动滚动至具有这个 ID 的元素之处。这确实是一项很贴心的功能，但如果你在页面加载之后再渲染元素，这项功能就不起作用了。不过，你也可以通过以下方式，手动地让这项功能重新生效：

document.querySelector(document.location.hash).scrollIntoView();

这8个HTML元素方法你知道吗
3.hidden 或许不是一个方法，但如果你提出抗议，那我也要争论一下：在 hidden 的背后很可能对应着一个 setter，这可是一个货真价实的方法，对不对？不管怎样，你是否曾经为了隐藏某个元素而使用过 myElement.style.display = ‘none’ 这种方法呢？如果是的话，请别再这么做了！只需调用 myElement.hidden = true ，即可实现元素隐藏的功能。

4.toggle 也不算是元素的方法，它实际上是元素属性上的一个方法。严格来说，这是一种为元素添加或删除某个 class 的方法，具体做法是 myElement.classList.toggle(‘some-class’) 。如果你曾经通过 if 条件语句为元素添加 class，那就应该赶紧改用这种做法。正确的方式是为 toggle 方法传入第二个参数，如果该参数返回 true ，则指定的 class 就会添加至元素上。el.classList.toggle(‘some-orange-class’, theme === ‘orange’);

我知道你在想些什么：这种写法违背了 ‘toggle’ 这个词的本义（开关），那些从 IE 时代过来的开发者们都这么想，他们断言应当彻底摒弃使用第二个参数的做法。所以，我收回我的话。不必坚持这种写法了，各位请随意！

5.querySelector()你当然知道这个方法，但据我推测，应该只有 17% 的开发者才知道，该方法可以使用在任意元素上。打个比方，myElement.querySelector(’.my-class’) 的作用是返回在 myElement 的子代中包含 my-class 这个 class 的所有元素。

这8个HTML元素方法你知道吗
6.closest该方法可在任意元素上使用，它能够向上查找元素的树型结构，可以理解为 与 querySelector() 相反的方法。因此，我可以通过以下方法获取当前内容的对应标头：

myElement.closest(‘article’).querySelector(‘h1’);

这段方法首先向上找到最近的

元素，然后再向下找到最近的

元素。

7.getBoundingClientRect()在对 DOM 元素调用该方法时，将返回一个包含其空间结构详细信息的简单对象。不过，在调用该方法时需要注意两点：调用该方法会导致元素的重绘，根据设备与页面复杂程度的不同，重绘的时间可能会占用几毫秒。因此，如果你需要重复地调用该方法，例如在使用动画的场景下，需要特别注意这一点。并非所有的浏览器都会返回这些值，他们有这个责任么？

8.matches()

假设我需要检查某个元素是否包括一个特定的 class。

最佳方式：

if (myElement.matches(’.some-class’)) {

// do something

}

欢迎大家在评论区评论留言，小编会及时给大家解答疑惑的