DOM遍历复习

最新推荐文章于 2024-11-01 13:37:40 发布

volunteer1024

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量128

点赞数

分类专栏： JavaScript 文章标签： DOM javascript js

本文链接：https://blog.csdn.net/volunteer1024/article/details/115006714

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM 复习

DOM 遍历

参考文献：https://zh.javascript.info/dom-navigation

在这里插入图片描述

DOM 遍历

特殊节点

<html> = document.documentElement
<body> = document.body
当脚本在head中，获取不到document.body
<head> = document.head

兄弟节点和父节点

兄弟节点 sibling ：具有相同父节点的节点

下一个兄弟节点 nextSibling , previousSibling
访问父亲节点：parentNode

子节点

childNodes 子节点集合，而不是数组。elem.hasChildNodes() 判断 elem是否有子节点。DOM 集合是只读的，不可以通过 childNodes[i] = … 的操作替换
firstChild
lastChild

纯元素导航

区别：element是元素，node是节点。

alert( document.documentElement.parentNode ); // document
alert( document.documentElement.parentElement ); // null
// 因为根节点 document.documentElement（<html>）的父节点是 document。但 document 不是一个元素节点，
// 所以 parentNode 返回了 document，但 parentElement 返回的是 null

词中间加了 Element：

children — 仅那些作为元素节点的子代的节点。
firstElementChild，lastElementChild — 第一个和最后一个子元素。
previousElementSibling，nextElementSibling — 兄弟元素。
parentElement — 父元素。

表格

<table> 元素支持 (除了上面给出的) 以下这些属性:

table.rows — <tr> 元素的集合。
table.caption/tHead/tFoot — 引用元素 <caption>，<thead>，<tfoot>。
table.tBodies — <tbody> 元素的集合（根据标准还有很多元素，但是这里至少会有一个 — 即使没有被写在 HTML 源文件中，浏览器也会将其放入 DOM 中）。

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

tbody.rows — 表格内部 <tr> 元素的集合。

<tr>：

tr.cells — 在给定 <tr> 中的 <td> 和 <th> 单元格的集合。
tr.sectionRowIndex — 给定的 <tr> 在封闭的 <thead>/<tbody>/<tfoot> 中的位置（索引）。
tr.rowIndex — 在整个表格中 <tr> 的编号（包括表格的所有行）。

<td> 和 <th>：
td.cellIndex — 在封闭的中单元格的编号。

querySelector

elem.querySelector(css) ：调用会返回给定 CSS 选择器的第一个元素。
elem.querySelectorAll(css)：它返回 elem 中与给定 CSS 选择器匹配的所有元素。
elem.matches(css) ：不会查找任何内容，它只会检查 elem 是否与给定的 CSS 选择器匹配。它返回 true 或 false。
elem.closest(css) ：会查找与 CSS 选择器匹配的最近的祖先。

实时集合和静态集合

getElementsBy* 返回的是实时的集合
querySelectorAll 返回的是静态集合

<div>First div</div>

<script>
  let divs = document.getElementsByTagName('div');
  let divsSelector = document.querySelectorAll('div');
  alert(divs.length); // 1
  alert(divsSelector.length); // 1
</script>

<div>Second div</div>

<script>
  alert(divs.length); // 2
  alert(divsSelector.length); // 1 静态
</script>