DOM的学习

DOM的概念：

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），简称 DOM。DOM 模型被结构化为对象树，又称 DOM 树。

DOM 实际上是以面向对象方式描述的对象模型，它将文档建模为一个个对象，以树状的结构组织（本文称之为“文档树”，树中的对象称为“节点”）。

整个文档是一个文档节点

每个 HTML 标签是一个元素节点

包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点

注释属于注释节点

通过可编程的对象模型，JavaScript 获得了足够的能力来动态操作 HTML。例如：

JavaScript 能添加、删除、改变、查看页面中所有的 HTML 元素、HTML 属性、CSS 样式。

JavaScript 能对页面中已有的 HTML 事件做出反应，或创建新的 HTML 事件。
 

方法	描述
document.getElementById(‘id’)	通过元素 id 来查找元素
document.getElementsByTagName(‘name’)	通过标签名来查找元素
document.getElementsByClassName(‘class’)	通过类名来查找元素
document.getElementsByName(‘name’)	通过表单元素中 name 名查找元素
document.querySelector(‘CSS 选择器’)	通过 CSS 选择器获取匹配上的第一个元素
document.querySelectorAll(‘CSS 选择器’)	通过 CSS 选择器获取匹配上的所有元素

综上所述，除了通过 ID 选择器和 querySelector 选择器获取到的元素是唯一的，其余的选择器返回的是伪数组的形式，可以通过 [下标] 的方式确定我们需要操作的元素。