你可能从未听过这15个HTML元素方法

原文链接：https://mp.weixin.qq.com/s/QLoTIpVgq5IqqYDW4ZQMKg

1、table的方法

const tableE1=document.querySelector('table');

const headRow=tableE1.createHead().insertRow();
headerRow.insertCell().textContent='Make';
headerRow.insertCell().textContent='Model';
headerRow.insertCell().textContent='Color';

const newRow=tableE1.insertRow();
newRow.insertCell().textContent='Yes';
newRow.insertCell().textContent='No';
newRow.insertCell().textContent='Thank you';

这段代码里完全用不着使用document.createElement()方法

如果你再一个table元素上直接调用.insertRow()方法，它甚至会自动为你插入一个<tbody>元素

2.scrollIntoView()

当页面的URL中包含#something元素时，一旦页面加载，浏览器就会自动滚动至具有这个ID的元素之处。

但如果你在页面加载之后再渲染元素，这项功能就不起作用了

不过可以通过以下方式重新生效

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

3.hidden

你是否曾为了隐藏某个元素而使用过myElement.style.display='none';这种方法呢？（我用过）如果是，以后就不要这么做喽

只需调用myElement.hidden=true,即可实现

4.toggle()

toggle实际上是元素属性上的一个方法。严格来说，这是一种为元素添加或删除某个class的方法，具体做法是myElement.classList.toggle('some-class')

曾经通过if 条件语句为元素添加class，现在要改喽

正确方式是为toggle方法传入第二个参数，如果该参数返回true，则指定的class就会添加至元素上

el.classList.toggle('some-orange-class',theme==='orange')

5.querySelector()

该方法可以使用在任意元素上

6.closest

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

myElement.closest('article').querySelector('h1');

这段方法首先向上找到最近的 <article>元素，然后再向下找到最近的<h1>元素。

7.getBoundingClientRect()

在对 DOM 元素调用该方法时，将返回一个包含其空间结构详细信息的简单对象。

{
  x: 604.875,
  y: 1312,
  width: 701.625,
  height: 31,
  top: 1312,
  right: 1306.5,
  bottom: 1343,
  left: 604.875
}

不过，在调用该方法时需要注意两点：

• 调用该方法会导致元素的重绘，根据设备与页面复杂程度的不同，重绘的时间可能会占用几毫秒。因此，如果你需要重复地调用该方法，例如在使用动画的场景下，需要特别注意这一点。

• 并非所有的浏览器都会返回这些值。

8.matches()

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

这是最复杂的方式：

if (myElement.className.indexOf('some-class') > -1) {
  // do something
}

最佳方式：

if(myElement.matches('.some-class')){
    //do something
}

9.insertAdjacentElement()

它的作用类似于 appendChild() ，但能够更好地控制插入子元素的具体位置。

parentEl.insertAdjacentElement('beforeend', newEl) 与 parentEl.appendChild(newEl) 的作用是一样的，但除此之外，你还可以指定 beforebegin、afterbegin 或 afterend 这几个参数值，元素将按这些值的名称所示插入相应的位置。

10.contains()

你有没有遇到过这样的情形，需要知道某个元素是否被包含在另一个元素中？

打个比方，假设我在处理一个鼠标点击事件时，需要知道它是发生在一个模态窗口中还是发生在外面（这样我才能够关闭这个窗口），我大概会这么做：

const handleClick = e =>{
    if(!modalEl.contains(e.target)) modalEl.hidden=true;
}

代码中的modalEl是模态窗口的引用，而e.target则代表各种发生点击事件的元素。

11.getAttribute()

这个是所有元素方法中最没用的一个，但有一个场景除外

对象的属性property通常也会映射到它的特性attribute中，但在某一个场景中，这种假设并不成立，这就是某个元素的href特性，例如<a href="/animals/cat">Cat</a>。

调用el.href不会返回/animals/cat，这可能与你猜测的不符。原因在于，元素实现了HTMLHyperlinkElementUtils接口，该接口提供了一系列辅助属性，例如prototol与hash等等，以展现与链接的目标相关的值。

href就是其中一个实用的属性，它将返回完整的URL，并去掉无用的空格，而不是返回在特性中所指定的相对URL，

这样一来，如果你需要获取href特性中的字符串字面值，就只能使用el.getAttribute('href')方法了。

12.dialog元素的三大法宝

<dialog>是一个相对较新的元素，它带来了两个还算能用的方法，和一个非常棒的方法。其中show()和close()方法的功能与你所想象的一样。

而showModal()方法能够将<dialog>元素显示在页面顶层，居中对齐，这正是所期望的模态窗口行为。你无需指定z-index，或者手动添加一个灰色的背景，也不需要监听esc按键以关闭此窗口。浏览器能够理解模态窗口的工作方式，并自动完成你所期望的行为。

13.forEach()

某些情况，当你获取到一个元素列表的引用时，可以通过forEach()方法记性迭代式调用

假设你需要记录页面所有链接的URL，可以输入以下代码，只要你不介意看到报错

document.getElementsByTagName('a').forEach(el==>{
   console.log(el.href);
})

也可以这么做：

document.querySelectorAll('a').forEach(el==>{
   console.log(el.href);
})

问题出在getElementsByTagName与其他类似的get...方法返回的是一个HTMLCollection接口，而querySelectorAll返回的是一个NodeList接口。

而NodeList接口为我们提供了forEach()方法（此外还包括keys()、values()、和entries()等方法）。

理想的情况下，最好是每个方法都只返回简单的数组，而不是返回一些类似数组的对象。不过别担心，ECMA大神为我们提供了Array.form()方法，它能够把所有这些类数组对象转为一个真正的数组。

所以，这样的代码就能够正常工作：

Array.from(document.getElementsByTagName('a')).forEach(el==>{
    console.log(el.href);
});

创建了一个数组之后，就能对其使用map()、filter()和reduce()以及其他各种数组方法了。

举个栗子，先不管目的是什么，总之你可以按以下方式返回所有外部链接的数组：

Array.from(document.querySelectorAll('a'))
    .map(el==> el.origin)
    .filter(origin => origin !==document.origin)
    .filter(Boolean);

14.表单

或许你已经知道，<form>有一个方法submit()方法。但或许你不知道表单还有一个reset()方法，而且当你需要对表单元素进行验证时，还可以调用reportValidity()方法。

15.select()

虽然这是最后一条，但是也很重要哦，.select()方法会将你指定的元素中的所有内容全选

 

详细信息见：https://mp.weixin.qq.com/s/QLoTIpVgq5IqqYDW4ZQMKg