JS基础之初识DOM

1. 什么是dom?

DOM可以看做是一个节点，那什么是节点呢

• html 标签是一个节点（Node）。
• head、title、body、p 标签都是节点。
• 文本插入到html中，都是文本节点
• 注释是注释节点
• 所有HTML元素都是元素节点
• 所有HTML属性都是属性节点
• 嵌套其他节点的节点叫做父节点。
• 被嵌套的节点叫做子节点。
• 同一个父节点下的节点叫做兄弟节点。
• 父亲的父亲以及上溯十八代祖宗叫做祖先节点。
• 儿子的儿子以及子子孙孙无穷匮也叫做后代节点。

2.DOM有什么用

你可以通过JS语言来操作DOM以改变网页。

为了改变网页，必须告诉JS是哪一个节点，这就是操作DOM; (因为DOM就是节点)

例如：你在控制台（console）中输入：

var x = document.querySelector("p");

alert(x);

第一行，就是JS访问document节点，然后访问节点中的第一个P节点，将这个节点传递给变量x.

把X视为一个对象，可以更改内容，绑定鼠标事件等操作

举一反三：其他事件类型：划过，滚动等；除了p元素以外的其他元素，都可以适用。

例如：知乎搜索栏

当你在知乎的搜索栏输入数据时，Javascript 捕获到了你的输入时间，对服务器使用异步查询，动态显示搜索结果。
当你向下滑动时，Javascript 捕获到了你滑动的距离，根据距离的大小来判断是否改变 DOM，进而让顶部的导航栏跟随浏览器窗口滚动，免得你回头去找。
当你点击修改按钮时，Javascript 捕获到了这个按钮的鼠标点击事件，反馈了一个可编辑的答案给你。

总结：

• 操作DOM可以改变网页的交互方式。所有网页的交互都依赖这种DOM技术，即使不用JS，也可以使用其他语言操作DOM。
• DOM是一棵树，每一条分支，每一片树叶都做了编号，你告诉一个脚本，一个函数去寻找哪一个枝干上的哪一片叶子，对这个叶子做什么改变。

3. 什么是document节点？

其实整个html网页就是一个Document节点；它是HTML文档的根节点与所有其他节点。通过Document对象，我们就可以从脚本中对HTML页面中的所有元素进行访问。

当浏览器载入HTML文档，HTML文档就会成为document对象。

进阶内容：

Javascript 不能够真正改变 DOM，它仅仅是改变呈现内容，当你刷新的时候什么都还原了。
但是你可以把这些改变传递给服务器，由后端比如 PHP 来进行后续的操作， PHP 可以改变底层数据。
用户的交互比如弹窗等等根本没必要让服务器也跟着掺和， 因为交互只是暂时的，用完了，还要变成默认的，不需要你保存到服务器，只要保证你点击的时候有反馈就行了。这就是前端。

HTML 表达静态结构（有哪些元素，每个元素代表什么意义，而不是内容）
CSS 呈现美化（元素的颜色，形状，布局）
Javascript 负责动态交互（操作 DOM，使用 Ajax 进行异步刷新，与服务器交互）

作者：Fadeoc Khaos 来源：知乎

对原文略有删改