HTML、DOM和JS的了解

1、HTML、JS、以及DOM的关系的关系说明

关于HTML、JS、以及DOM的关系一直很迷惑，虽然一直听人说，但并未理解。

偶然间，忽然懂了这三者之间的关系。

举例吧：

• HTML就是最终的页面，是一个静态的页面。是什么就是什么，没有外界操作就不会有改变；
• 如果要修改HTML的内容呢？这时就需要使用JS语言了，使用JS对HTML进行处理，调用对应函数即可；
• 但是JS如何处理的呢？JS函数内部又是如何处理的呢？这就需要DOM了。DOM 定义了访问和操作 HTML 文档的标准方法。

相当于DOM是一个底层API；JS通过对底层API进行封装，提供了简单的操作方法；我们用JS最多，但如果不用JS，其他语言同样可以通过DOM操作HTML。这就是三者之间的关系了。

2、对于DOM中结点的理解

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

这里要注意：

• 文档节点只有一个，就是文档本身。
• HTML元素：这个包含那些呢？参考链接即可，特别全。HTML 元素参考 - HTML（超文本标记语言） | MDN
• 属性结点：HTML 属性是属性节点。但HTML属性有哪些呢？HTML 属性参考 - HTML（超文本标记语言） | MDN
• 文本节点：文本节点很好理解。我们一般在元素内直接写的文字就是文本节点（虽然一般意识不到，不过在DOM中是这么处理的）。

3、结束