虽然现代化的 web 开发更多地依赖各种 mvc 框架，但开发者仍需要熟练掌握 html 与 dom 方面的基础知识。不过，即使是有着多年经验的前端开发者，也会遇到一些不明所以的情况。本文首先将为初学者介绍 html 与 dom 的基本常识，随后为大家介绍15个比较冷门的 html 元素的方法。
初学者指导
首先让我们来讨论一下 html 与 dom 之间的区别。
显然，普通的
元素就是一段 html 代码，它可以应用在任何一个以 .html 为扩展名的文件中。元素自带一系列特性（attribute），以控制它的显示方式与行为。这就是元素的全部内容，它与 javascript 没有任何关联。
而 dom 的作用是将你的 javascript 代码与文档中的 html 元素关联在一起，让你能够以对象的方式与这些元素进行交互。
这就是所谓的文档对象模型。
在 html 中的每个元素都对应着一个 dom ‘接口’，其中定义了若干属性（property，通常会映射至 html 元素上的特性）与方法。举例来说，一个
你可以按以下方式获取某个元素的引用：
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() 方法，它甚至会自动为你插入一个
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');
这段方法首先向上找到最近的