【JS】文档树部分知识

最新推荐文章于 2024-06-30 15:04:54 发布

changyme

最新推荐文章于 2024-06-30 15:04:54 发布

阅读量321

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/changyme/article/details/119897219

版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

DOM树简介

根据DOM，每个HTML标签都是一个对象，嵌套的标签是闭合标签的子标签，标签内的文本也是一个对象。标签被称为元素节点，元素内的文本形成文本节点，

特殊之处：

DOM中表格永远有
注释也会成为DOM的一部分

与控制台的交互，详情查看:

https://zh.javascript.info/dom-nodes

遍历DOM

对DOM的所有操作都是以document对象开始，它是DOM的主入口点，从它可访问任何结点。

最顶层：

<html>=document.documentElement

<body>=document.body

<head>=document.head

子节点：

子节点：直系子元素；子孙元素：嵌套在给定元素中的所有元素；

childNoeds集合列出了所有子节点，包括文本节点。

<html>
<body>
  <div>Begin</div>

  <ul>
    <li>Information</li>
  </ul>

  <div>End</div>

  <script>
    for (let i = 0; i < document.body.childNodes.length; i++) {
      alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ..., SCRIPT
    }
  </script>
  ...more stuff...
</body>
</html>

firstChild和lastChild属性是访问第一个和最后一个子元素的快捷方式。

elem.hasChildNodes()用于检查节点是否有子节点。

DOM集合：childNodes看起来像一个数组，但其实是一个集合——一个类数组的可迭代对象。

导致两个结果：1.可以用for…of来迭代他；2.无法使用数组内置方法。

需要注意几点：

DOM集合是只读的；无法通过修改childNodes来改变节点内容
DOM集合是实时的；
不要用for…in遍历集合，其遍历的是所有可枚举的属性，集合中还有其他除了值之外的属性。

兄弟节点和父节点

下一个兄弟节点在 nextSibling 属性中，上一个是在 previousSibling 属性中。

可以通过 parentNode 来访问父节点。

纯元素导航

上述属性可以访问所有节点，对于注释节点和文本节点我们并不想访问，因此只考虑元素节点的导航链接如下：

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

更多链接：表格

基本的“导航”属性如上所述，而某些类型的DOM元素可能会提供特定于其类型的其他属性。

例如表格，还支持以下这些属性：

table.rows
table.caption/tHead/tFoot
table.tBodies
tbody.rows
tr.cells——在给定<tr>中的<td>和<th>单元格的集合。
tr.sectionRowIndex——给定的<tr>在封闭的<thead>/<tbody>/<tfoot>中的位置
tr.rowIndex——在整个表格中<tr>的编号

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

搜索：getElement,querySelector

DOM导航属性适用于了解整个文档树结构或元素彼此相邻时，如果想获取页面上任意元素，要使用本部分内容。

document.getElementById或只使用id

...
<script>
	let elem=document.getElementById('elem');//元素含有id属性，且其属性值为elem
	elem.style.background='red';//此时elem是对带有id]'elem'的DOM元素的引用
</script>

此外，还有一个通过 id 命名的全局变量，它引用了元素；该引用除非有一个具有相同名称的js变量，否则它具有优先权。

在实际开发中，document.getElementById是首选方法。

querySelectorAll

elem.querySelectorAll(css)是最通用的返回elem中与给定CSS选择器匹配的所有元素的方法。

<script>
	let elements=document.querySelectorAll('ul>li:last-child');
	...
</script>

也可以使用伪类，类似:hover,:active

querySelector

该调用会返回给定css选择器的第一个元素。

matches

该函数不会查找内容，而是检查elem是否与给定的CSS选择器匹配。

closest

元素的祖先组成了从元素到顶端的父级链，elem.closest(css)会查找与CSS选择器匹配的最近祖先并返回。

getElementsBy*

getElementsByTagName,getElementsByClassName,fetElementsByName

返回值是一个集合，若函数名中不带’s’则返回值是一个值。

所有的getElementsBy*方法都会返回一个实时的集合，文档发生改动时会自动更新。

但是querySelectorAll返回一个静态集合，就像元素的固定数组。

最后，检查层级方法

elemA.contains(elemB)，如果元素B包含于元素A，那么该函数返回值为false.

节点属性

节点类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vhkTRj35-1629804982061)(C:\Users\cz18\AppData\Roaming\Typora\typora-user-images\image-20210810172022154.png)]

nodeType属性

它有一个数值型值（numeric value）：

对于元素节点 elem.nodeType == 1，
对于文本节点 elem.nodeType == 3，
对于 document 对象 elem.nodeType == 9，
在规范中还有一些其他值

nodeName和tagName

给定一个 DOM 节点，我们可以从 nodeName 或者 tagName 属性中读取它的标签名

区别：tagName 仅受元素节点支持（因为它起源于 Element 类），而 nodeName 则可以说明其他节点类型。

注意：标签名始终是大写的，除非是在XML格式下。

innerHTML：内容

该属性允许将元素中的HTML获取为字符串形式，我们可以修改它，因此这也是修改页面的最有效方法之一。

插入时若出此案标签未闭合的情况，浏览器会修复我们的错误。但是如果插入

要谨慎使用+=！这不是附加内容，而是归零后完全重写！

outerHTML：元素完整的HTML

相当于innerHTML加上其本身的全部内容。

注意！与 innerHTML 不同，写入 outerHTML 不会改变元素。而是在 DOM 中替换它

所以对于旧元素的引用还保持原样，也不是没改，只是下次再用需要更新！

nodeValue/data：文本节点内容

该属性只对元素节点有效，两个属性获取的内容差不多，多用data。

该属性可以读也可以写。

textContent：纯文本

textContent 提供了对元素内的文本的访问权限：仅文本，去掉所有 <tags>。

用textContent可以以安全方式写入文本，好用。

hidden属性

“hidden” 特性（attribute）和 DOM 属性（property）指定元素是否可见。

从技术上来说，hidden 与 style="display:none" 做的是相同的事。但 hidden 写法更简洁。

<div id='elem'>JavaScript assigned the property hidden</div> 
<script>
    elem.hidden=true;//隐藏标签
    setInterval(()=>elem.hidden=!elem.hidden,1000);//设置标签闪烁
</script>