专栏名称: 众成翻译

翻译，求知的另一种表达

你可能从未听说过的15种HTML元素方法！

众成翻译 · 掘金 · · 2018-07-24 03:05

正文

初学者须知

我们来讨论HTML和DOM之间的区别。

显然，一个普通 <table> 元素就是HTML。您可以在.html的文件中使用它。它有一组属性影响它的外观和行为方式。这就是HTML，不过它与JavaScript无关。

DOM是将JavaScript代码与文档中的HTML元素相关联的内容，因此您可以与对象等元素进行交互。

它是一个文档到对象模型.

HTML中的每种类型的元素都有自己的DOM“接口”，用于定义属性（通常映射到HTML元素上的属性）和方法。例如， <table> 有一个名为HTMLTableElement的接口。

您可以通过编写以下内容来获取对特定元素的引用：

然后，您可以访问可用于该类型元素的所有属性和方法。例如，您可以使用searchBox.value访问value属性，或者通过调用searchBox.focus（）将光标放在框中。

感谢您参加关于DOM的58秒课程。

你可以在浏览器DevTools中尝试一下，在元素树中选择一个元素，然后在控制台中输入$0。它会为您提供了所选元素的参考。要将元素视为对象，请键入dir($0)。

你可以在控制台中做很多事情。

#1 table methods

table （仍然是排列网站的第一种方式）有很多漂亮的方法，使得构建它们就像构建一个Ikea表一样简单。

使用document.createElement()只会创造一个单一的table，不过如果直接在table元素上调用它，.insertRow（）方法甚至会为你插入一个 <tbody> 。不是很好吗？

#2 scrollIntoView()

您知道如果在URL中有#something，那么当页面加载时，浏览器将滚动页面以便您可以看到具有该ID的元素？

这是非常周到的，但如果您在页面加载后渲染该元素，则它不起作用。

您可以使用以下方法手动重新创建此行为：

#3 hidden

无论如何，你有没有做过myElement.style.display ='none'来隐藏一个元素？好吧，别这样做了！

你可以用myElement.hidden = true。

#4 toggle()

好的，这也不是一个元素方法，它是一个元素属性的方法。具体来说，它是一种使用myElement.classList.toggle（'some-class'）来切换从元素添加/删除类的方法。

您应该刚刚将第二个参数传递给toggle方法。如果成功，你的 class将被添加到元素中。

#5 querySelector()

好的，你肯定已经知道了这个，但我怀疑你们中有17％的人不知道你可以在任何元素上使用它。

例如，myElement.querySelector（'.my-class'）只匹配具有类my-class并且是myElement的后代的元素。

#6 closest()

这是一个可用于查看_up_元素树的所有元素的方法。它就像一个reverso querySelector（）。所以，我可以使用这样的方式得到当前部分的标题：

到第一个 <article> 然后回到第一个 <h1> 。

#7 getBoundingClientRect()

这将返回一个整洁的小对象，其中包含有关您调用它的元素的一些维度细节。

但请注意两种不同的方式：

调用它会导致重新绘制。根据设备和页面的复杂程度，这可能需要几毫秒。如果你反复打电话，请密切注意，例如在动画中。
并非所有浏览器都返回所有这些值。

#8 matches()

可以使用它来检查特定元素是否具有特定类。

#9 insertAdjacentElement()

我今天学到了这个！它就像appendChild（），但可以更好地控制你追加那个child的位置。

parentEl.insertAdjacentElement（'beforeend'，newEl）与执行parentEl.appendChild（newEl）相同，但您也可以指定beforebegin或afterbegin或afterend将其放在这些名称所暗示的位置。

#10 contains()

你有没有想知道一个元素是否在另一个元素中？

例如，如果我正在处理鼠标单击并想知道它是发生在模态内还是外部（所以我可以关闭它）

#11 getAttribute()

当然，除了一个特定的情况外，所有元素方法中最无用的。

你还记得当我提到的时候， properties 通常映射到 attributes ？

其中一个不实的情况是 <a href="/animals/cat"> Cat </a> 等元素的href属性。

el.href不会像你期望的那样返回/ animals / cat。这是因为 <a> 元素实现了HTMLHyperlinkElementUtils接口，该接口具有一堆辅助属性，如协议和散列，可以告诉您有关链接目标的信息。

其中一个有用的属性是href，它将为您提供 full URL ，包含所有修剪，而不是属性中的相对URL。

因此，如果您想要href属性中的文字字符串，则必须使用el.getAttribute（'href'）。

#12 the dialog element trio

相对较新的 <dialog> 元素show（）和close（）将完全按照你的期望去做。

但是showModal（）将在页面中心的其他所有内容上显示 <dialog> ，就像你想要你的模态一样。无需z-index或手动添加灰色背景或监听转义键以关闭它 - 浏览器知道模态如何工作并将为您完成所有这些操作。

#13 forEach()

当您获得对元素列表的引用时，可以使用forEach（）迭代它们。