深入15个HTML元素方法，你见过吗？

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《深入15个HTML元素方法，你见过吗？》，聊聊MySQL、nginx、github、spring、javascript，我们一起来看看吧！

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

初学者指导

首先让我们来讨论一下 HTML 与 DOM 之间的区别。

显然，普通的

元素就是一段 HTML 代码，它可以应用在任何一个以 .html 为扩展名的文件中。元素自带一系列特性（attribute），以控制它的显示方式与行为。

这就是元素的全部内容，它与 JavaScript 没有任何关联。

而 DOM 的作用是将你的 JavaScript 代码与文档中的 HTML 元素关联在一起，让你能够以对象的方式与这些元素进行交互。

这就是所谓的文档对象模型。

在 HTML 中的每个元素都对应着一个 DOM ‘接口’，其中定义了若干属性（property，通常会映射至 HTML 元素上的特性）与方法。举例来说，一个

元素对应着一个 HTMLTableElement 接口。

你可以按以下方式获取某个元素的引用：

const searchBox = document.getElementById('search-box');

现在，你就可以访问该元素上定义的所有属性与方法了。打个比方，你可以通过 

searchBox.value

 访问它的 value 属性，也可以调用 

searchBox.focus()

 方法让光标移至输入框上。

感谢你参加这个58秒的 DOM 入门培训课程，哈哈。

现在的问题在于，大多数元素都没有提供什么有趣的方法。因此，除非你特意到官方文档规范上去搜索那些可能永远都用不到的东西，否则很容易忽略掉那些零散的小技巧。

幸运的是，浏览规范与整理小技巧正是我用于避免陷入困境的两种最喜欢的方式。那么，让我们开始吧……

如果你也希望尝试一下这些技巧，又恰好有一些浏览器 DevTools 可以使用的话，可以在元素树型结构中先选中某个元素，然后在控制台中输入 

$0

，它会返回给你一个所选中元素的引用。如果你需要返回该元素的对象，请输入 

dir($0)

。

在控制台中，你可以实现各种丰富的功能。

1 table 的方法

原始的 table 元素（时至今日仍然是网站布局方法里的第一名）本身自带许多精巧的方法，使用这些方法创建表格就像搭建宜家里的桌子一样简单。

以下是部分实用的方法。

const tableEl = document.querySelector('table');
const headRow = tableEl.createHead().insertRow();
headerRow.insertCell().textContent = 'Make';
headerRow.insertCell().textContent = 'Model';
headerRow.insertCell().textContent = 'Color';
const newRow = tableEl.insertRow();
newRow.insertCell().textContent = 'Yes';
newRow.insertCell().textContent = 'No';
newRow.insertCell().textContent = 'Thank you';

整段代码里完全用不着使用 

document.createElement()

 方法。

如果你在一个 table 元素上直接调用 

.insertRow()

 方法，它甚至会自动为你插入一个 

<tbody> 元素，是不是很棒？
<blockquote><h3>2 scrollIntoView()</h3></blockquote>
<p>你知道吗？当页面的 URL 中包含 </p><pre class="brush:go;">#something

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

这确实是一项很贴心的功能，但如果你在页面加载之后再渲染元素，这项功能就不起作用了。

不过，你也可以通过以下方式，手动地让这项功能重新生效：

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

3 hidden

好吧，hidden 或许不是一个方法，但如果你提出抗议，那我也要争论一下：在 hidden 的背后很可能对应着一个 setter，这可是一个货真价实的方法，对不对？

不管怎样，你是否曾经为了隐藏某个元素而使用过 

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');

我知道你在想些什么：这种写法违背了 ‘toggle’ 这个词的本义（开关），那些从 IE 时代过来的开发者们都这么想，他们断言应当彻底摒弃使用第二个参数的做法。

所以，我收回我的话。不必坚持这种写法了，各位请随意！

5 querySelector()

好吧，你当然知道这个方法，但据我推测，应该只有 17% 的开发者才知道，该方法可以使用在任意元素上。

打个比方，

myElement.querySelector('.my-class')

 的作用是返回在 

myElement

 的子代中包含 

my-class

 这个 class 的所有元素。

6 closest

该方法可在任意元素上使用，它能够向上查找元素的树型结构，可以理解为 与 

querySelector()

 相反的方法。因此，我可以通过以下方法获取当前内容的对应标头：

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

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

<a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6ycZiSpqWsvrresoBkhc3Id37Ogdyxo5KthWCxdnFkv42jYIp9grCzlbCigZyimbOImdCF3cijheB-nLCJfWa-s6Nt' rel='nofollow'>Cat</a>

 。

调用 

el.href

 不会返回 

/animals/cat

，这可能与你的猜测不符。原因在于 

<a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq5roGCUgXuytMyero55jZe-i6nam6q6soTTYabHn5ynx4B9pZJsg6axlbytgIiNubBmg9qRlrGvjpiGma5idoW4jHF5hn5qhbir0q-OioHYxYtm1oq63KWavYalxniGZMaQsKp5soairty0o46GiJmxeIPQh7e2pIXQdWO7n32ttI2fZX-AjrKzlbOygWSMlr2ui86HtKF2' rel='nofollow'>HTMLHyperlinkElementUtils</a> 接口，该接口提供了一系列辅助属性，例如 <pre class="brush:go;">prototol

 与 

hash

 等等，以展现与链接的目标相关的值。

href

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

这样一来，如果你需要获取 

href

 特性中的字符串字面值，就只能使用 

el.getAttribute('href')

 方法了。

12 dialog 元素的三大法宝

<dialog></dialog>

 是一个相对较新的元素，它带来了两个还算能用的方法，和一个非常棒的方法。其中

show()

 和 

close()

 方法的功能与你所想象的一样，我感觉还算可以。

而 

showModal()

 方法能够将 

<dialog></dialog>

 元素显示在页面的顶层，居中对齐，这正是所期望的模态窗口行为。你无需指定 

z-index

，或者手动添加一个灰色的背景，也不需要监听 esc 按键以关闭此窗口。浏览器能够理解模态窗口的工作方式，并自动完成你所期望的行为。

这真是太棒了。

13 forEach()

某些情况下，当你获取到一个元素列表的引用时，可以通过 

forEach()

 方法进行迭代式调用。

用 

for()

 进行循环已经是 2014 年代的老古董了。

假设你需要记录页面中所有链接的 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.from()

 方法，它能够把所有这些类数组对象转化为一个真正的数组。

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

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);

我最喜欢的一个方法是 

.filter(Boolean)

，它肯定会给将来的我在调试问题时带来无穷的烦恼，哈哈。

14 表单

或许你已经知道，

 有一个 

submit()

 方法。但或许你不知道表单还有一个 

reset()

 方法，而且当你需要对表单元素进行验证时，还可以调用 

reportValidity()

 方法。

此外，你也可以通过对表单的 

elements

 属性加上元素的 

name

 特性 的方式调用它的属性。打个比方，

myFormEl.elements.email

 将返回属于某个 

 中的 

<input name="email">

 元素（‘属于’，并不代表它一定是一个‘子元素’）。

好吧，其实刚才我是骗你的。

elements

 并不会返回一个元素列表，而是返回一个控件列表（显然它不是一个数组，因为没必要这么做）。

举例来说：假设你有三个单选按钮，每个都有相同的名称 

animal

，那么 

formEl.elements.animal

 将返回一个单选按钮集的引用（一个控件，三个元素）。

而 

formEl.elements.animal.value

 将返回所选中的单选按钮的值。

这种语法看起来非常古怪，让我们来分解一下看看：

formEl

 是一个元素，

elements

 则对应 HTMLFormControlsCollection 接口，这并非一个真正的数组，其中的每一项内容也未必代表一个 HTML 元素。

animal

 是多个单选按钮的集合，只是因为他们具有相同的 

name

 特性才聚集在一起（RadioNodeList 接口就是为此而生的），而 

value

 则返回该集合中所选中的那个单选按钮的 

value

 特性。

非常直观，嗯……

15 select()

感谢你耐心阅读本文，希望本文能为你带来一些新知识，给你的工作带来实际的用途。

为大家准备了一份中高端程序员进阶视频资料 (共六节) ，包含vue.js node.js react.js == ==
有需要的伙伴可以领取，童叟无欺 全栈开发交流圈：582735936

以上就是《深入15个HTML元素方法，你见过吗？》的详细内容，更多关于mysql的资料请关注golang学习网公众号！