JavaScript中的DOM（一）_document.body-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51636525/article/details/124884265

这篇博客介绍了JavaScript中的DOM理解，从document对象开始，讲解了节点和元素间的导航，包括父节点、子节点、兄弟节点的获取。还详细阐述了表格元素和表单元素的导航属性，以及如何获取页面上的元素，包括querySelector、querySelectorAll和getElementById等方法。同时，讨论了节点的相关属性，如nodeType、nodeName、innerHTML等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.DOM的理解

DOM称为文档对象模型（Document Object Model）

将页面所有内容表示为可以修改的对象

◼浏览器会对我们编写的HTML、CSS进行渲染，同时它又要考虑我们可能会通过JavaScript来对其进行操作：
 于是浏览器将我们编写在HTML中的每一个元素（Element）都抽象成了一个个对象；
 所有这些对象都可以通过JavaScript来对其进行访问，那么我们就可以通过JavaScript来操作页面；
 所以，我们将这个抽象过程称之为文档对象模型（Document Object Model）；
◼ 整个文档被抽象到 document 对象中：
 比如document.documentElement对应的是html元素；
 比如document.body对应的是body元素；
 比如document.head对应的是head元素；

在html结构中，最终会形成一个树结构；

在抽象成DOM对象的时候，它们也会形成一个树结构，我们称之为DOM Tree；

2. document对象

◼ Document节点表示的整个载入的网页，它的实例是全局的document对象：
 对DOM的所有操作都是从 document 对象开始的；
 它是DOM的入口点，可以从document开始去访问任何节点元素；
◼ 对于最顶层的html、head、body元素，我们可以直接在document对象中获取到：
 html元素：= document.documentElement
 body元素：= document.body
 head元素：= document.head
 文档声明： = document.doctype

3.节点Node之间的导航navigator

如果我们获取到一个节点后，可以根据这个节点去获取其他的节点，我们称之为节点之间的导航

节点存在以下的关系

父节点：parentNode
前兄弟节点：previousSibling
后兄弟节点：nextSibling
子节点：childNodes
第一个子节点：firstChild
最后一个子节点：lastChild

    <div class="box">
      <!-- 我是注释 -->
      <h1 class="title">我是标题</h1>
      <div class="container">我是div元素</div>
      <div class="desc">我是一个段落</div>
      我是文本
    </div>
    <script>
      var titleEl = document.querySelector(".title")
      var parentNode = titleEl.parentNode
      var previousSibling = titleEl.previousSibling
      var nextSibling = titleEl.nextSibling
      var childNodes = document.body.childNodes
      var firstChild = document.body.firstChild
      var lastChild = document.body.lastChild

    </script>

4.元素Element之间的导航navigator

如果我们获取到一个元素（Element）后，可以根据这个元素去获取其他的元素，我们称之为元素之间的导航。

节点之间存在如下的关系：

父元素：parentElement
前兄弟节点：previousElementSibling
后兄弟节点：nextElementSibling
子节点：children
第一个子节点：firstElementChild
第二个子节点：lastElementChild

<div class="box">
      <!-- 我是注释 -->
      <h1 class="title">我是标题</h1>
      <div class="container">我是div元素</div>
      <div class="desc">我是一个段落</div>
      我是文本
    </div>
    <script>
      var titleEl = document.querySelector(".title")
      var parentElement = titleEl.parentElement
      var previousElementSibling = titleEl.previousElementSibling
      var nextElementSibling = titleEl.nextElementSibling
      var children = document.body.children
      var firstElementChild = document.body.firstElementChild
      var lastElementChild = document.body.lastElementChild
      console.log(parentElement);
      console.log(previousElementSibling);
      console.log(nextElementSibling);
      console.log(children);
      console.log(firstElementChild);
      console.log(lastElementChild);
    </script>

5.表格table元素的导航navigator

<table>元素支持（除了上面给出的之外）还支持以下这些属性

table.rows——<tr>元素的集合
table.caption/tHead/tFoot——引用元素<caption>,<thead>,<tfoot>
table.tBodies——<tbody>元素的集合

<thead>,<tfoot>,<tbody>元素提供了 rows 属性

tbody.rows — 表格内部元素的集合；

<tr>

tr.cells — 在给定中的和单元格的集合；
tr.sectionRowIndex — 给定的中的位置（索引）；
tr.rowIndex — 在整个表格中的编号（包括表格的所有行）；

<td>和<th>

td.cellIndex — 在封闭的中单元格的编号