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

初学者指导

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

显然,普通的 <table> 元素就是一段 HTML 代码,它可以应用在任何一个以 .html 为扩展名的文件中。元素自带一系列特性(attribute),以控制它的显示方式与行为。

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

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

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

在 HTML 中的每个元素都对应着一个 DOM ‘接口’,其中定义了若干属性(property,通常会映射至 HTML 元素上的特性)与方法。举例来说,一个 <table> 元素对应着一个 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> 元素,是不是很棒?

2 scrollIntoView()

你知道吗?当页面的 URL 中包含 #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');

这段方法首先向上找到最近的 <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') &gt; -1) {
// do something
}

比上面的好一点,但和本文没什么关系:


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

最佳方式:


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

9 insertAdjacentElement()

我今天才刚学到这一条!它的作用类似于 appendChild() ,但能够更好地控制插入子元素的具体位置。

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

多么强大的控制能力!

多棒的点子。

10 contains()

你有没有遇到过这样的情形,需要知道某个元素是否被包含在另一个元素中?至少我本人经常会遇到这样的问题。

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


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

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

有趣的是,每当遇到这种情形,在我第一遍写代码的时候,100%的概率会将其中的判断逻辑写反。

哪怕是我提高了警惕,并在保存代码之前尝试将逻辑颠倒过来写,仍然还是写错。

#11 getAttribute()

这毫无疑问是所有元素方法中最没用的一个,但有一个场景除外。

你是否记得,我在本文的开头部分曾提到,对象的属性 property 通常也会映射到它的特性 attribute 中(我在上文中特别用粗体强调了这一点,注意不是斜体)?

但在某一个场景中,这种假设并不成立,这就是某个元素的 href 特性,例如 <a href="/animals/cat">Cat</a> 。

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

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

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

12 dialog 元素的三大法宝

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

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

这真是太棒了。

13 forEach()

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

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

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


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

也可以这么做:


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

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

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

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

所以,这样的代码就能够正常工作:


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

奖励关卡:创建了一个数组之后,你就能够对其使用 map() 、filter() 和 reduce() 以及其他各种数组方法了。打个比方,先不管目的是什么,总之你可以按以下方式返回所有外部链接的数组:


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

我最喜欢的一个方法是 .filter(Boolean),它肯定会给将来的我在调试问题时带来无穷的烦恼,哈哈。

14 表单

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

此外,你也可以通过对表单的 elements 属性加上元素的 name 特性 的方式调用它的属性。打个比方,myFormEl.elements.email 将返回属于某个 <form> 中的 <input name="email" /> 元素(‘属于’,并不代表它一定是一个‘子元素’)。

好吧,其实刚才我是骗你的。elements 并不会返回一个元素列表,而是返回一个控件列表(显然它不是一个数组,因为没必要这么做)。

举例来说:假设你有三个单选按钮,每个都有相同的名称 animal,那么 formEl.elements.animal 将返回一个单选按钮集的引用(一个控件,三个元素)。

而 formEl.elements.animal.value 将返回所选中的单选按钮的值。

这种语法看起来非常古怪,让我们来分解一下看看:formEl 是一个元素,elements 则对应 HTMLFormControlsCollection 接口,这并非一个真正的数组,其中的每一项内容也未必代表一个 HTML 元素。animal是多个单选按钮的集合,只是因为他们具有相同的 name 特性才聚集在一起(RadioNodeList 接口就是为此而生的),而 value 则返回该集合中所选中的那个单选按钮的 value 特性。

非常直观,嗯……

15 select()

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

原文链接:https://my.oschina.net/u/3972188/blog/2994947

深入15个HTML元素方法,你见过吗?的更多相关文章

  1. 15个HTML元素方法!

    首先让我们来讨论一下 HTML 与 DOM 之间的区别. 显然,普通的 <table> 元素就是一段 HTML 代码,它可以应用在任何一个以 .html 为扩展名的文件中.元素自带一系列特 ...

  2. 几种php 删除数组元素方法

    几种php教程 删除数组元素方法在很多情况下我们的数组会出现重复情况,那我们删除数组中一些重复的内容怎么办,这些元素我必须保持他唯一,所以就想办法来删除它们,下面利用了遍历查询来删除重复数组元素的几种 ...

  3. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  4. DOM 之 document 查找元素方法

    DOM 之 document 查找元素方法 getElementById("idName"); // 始终取得第一个 idName 的元素 getElementsByTagName ...

  5. selenium+python定位元素方法

    定位元素方法 官网地址:http://selenium-python.readthedocs.org/locating-elements.html        这里有各种策略用于定位网页中的元素(l ...

  6. 使用webdriverwait封装查找元素方法

    对于selenium原生的查找元素方法进行封装,在timeout规定时间内循环查找页面上有没有某个元素 这样封装的好处: 1.可以有效提高查找元素的效率,避免元素还没加载完就抛异常 2.相对于time ...

  7. html5.js让IE(包含IE6)支持HTML5元素方法

    原文地址:http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE(包含IE6)支持HTML5元素方法 微软的最新浏览器IE8及 ...

  8. jQuery DOM 元素方法(get)

    jQuery DOM 元素方法 1..get() 获得由选择器指定的 DOM 元素. $(selector).get(index)index 可选.规定获取哪个匹配元素(通过 index 编号). 实 ...

  9. vue修改数组元素方法

    示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

随机推荐

  1. Robot Framework(七)创建用户关键字

    2.6创建用户关键字 关键字表用于通过将现有关键字组合在一起来创建新的更高级别关键字.这些关键字称为用户关键字,以区别于 测试库中实现的最低级库关键字.创建用户关键字的语法与创建测试用例的语法非常接近 ...

  2. 【零基础】快速入门爬虫框架HtmlUnit

    迅速的HtmlUnit htmlunit是一款开源的web页面分析工具,理论上来说htmlunit应用于网页的自动化测试,但是相对来说更多人使用它来进行小型爬虫的快速开发.使用htmlunit进行爬虫 ...

  3. cannot open clipboard 解决办法

    对于电脑本身或者一些应用程序操作的时候,会出现cannot open clipboard的问题,这是你系统没有剪切板程序 首先: 在开始->运行中输入clipbrd 回车, 如果系统弹出了剪切板 ...

  4. kotlin array

    (1)Kotlin语言使用Array表示数组. (2)[] 可以用于访问数组的元素, [] 被进行了操作符的重载,调用的是 Array 类的 setter 和 getter 方法 2.创建数组 (1) ...

  5. 图解Python 【第七篇】:网络编程Socket

    本节内容一览图:  前言总结: Python 提供了两个基本的 socket 模块. 第一个是 Socket,它提供了标准的 BSD Sockets API. 第二个是 SocketServer, 它 ...

  6. vue active样式显示

    html:代码 <ul> <li @click="current='xxxx'" :class="{active:current=='xxxx'}&qu ...

  7. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

  8. nodejs获取常见疾病数据示例

    日常生活中有一些常见的疾病,这个可以通过百度等搜索到,但是如果你要完成一款app或者小程序.网站之类的该如何来获取常见疾病的信息呢?首先想到的是通过爬虫爬取数据,然后整理搜索....其实这种方法还是太 ...

  9. mac被锁有pin码的解锁方法

    停用规律: 错误5次密码停用1分钟 再错误3次停用5分钟 在错误1次就停用15分钟 再错误1次就是60分钟了,而且还没输入框了,这时候我们要通过按 option,commond这2个按钮来唤起输入框 ...

  10. Python2.7 threading模块学习

    主要学习一下python的多线程编程,使用threading模块,threading 包括:Thread.conditions.event.rlock.semaphore等类. Thread对象可以实 ...