当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），简称 DOM。DOM 模型被结构化为对象树，又称DOM 树。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的标题</title> </head> <body> <p>第一个段落</p> <a href="https://www.baidu.com">百度一下</a> </body> </html>
DOM 实际上是以面向对象方式描述的对象模型，它将文档建模为一个个对象，以树状的结构组织（本文称之为“文档树”，树中的对象称为“节点”）。
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点
注释属于注释节点
通过可编程的对象模型，JavaScript 获得了足够的能力来动态操作 HTML。例如：
JavaScript 能添加、删除、改变、查看页面中所有的 HTML 元素、HTML 属性、CSS 样式。
JavaScript 能对页面中已有的 HTML 事件做出反应，或创建新的 HTML 事件。
获取 HTML 元素
方法 |
描述 |
document.getElementById(‘id’) |
通过元素 id 来查找元素 |
document.getElementsByTagName(‘name’) |
通过标签名来查找元素 |
document.getElementsByClassName(‘class’) |
通过类名来查找元素 |
document.getElementsByName(‘name’) |
通过表单元素中 name 名查找元素 |
document.querySelector(‘CSS 选择器’) |
通过 CSS 选择器获取匹配上的第一个元素 |
document.querySelectorAll(‘CSS 选择器’) |
通过 CSS 选择器获取匹配上的所有元素 |
<p class="isCalss" id="isId">第一个段落</p> <p class="isCalss">第二个段落</p> <input class="isCalss" name="isName" type="text"> <input class="isCalss" name="isName" type="text"> <script> // 获取到第一个 P 标签 document.getElementById('isId'); // 获取到两个 p 标签 document.getElementsByTagName('p'); // 获取到两个 p 标签和两个 input 标签 document.getElementsByClassName('isCalss'); // 获取到两个 input 标签 document.getElementsByName('isName'); // 获取到第一个 p 标签 document.querySelector('.isCalss'); // 获取到两个 p 标签和两个 input 标签 document.querySelectorAll('.isCalss'); </script>
综上所述，除了通过 ID 选择器和 querySelector 选择器获取到的元素是唯一的，其余的选择器返回的是伪数组的形式，可以通过 [下标] 的方式确定我们需要操作的元素。
// 获取 calss 名为 isCalss 的第一个元素
document.getElementsByClassName('isCalss')[0];
以上就是我关于dom的总结
