2023-02-16 DOM相关节点元素

1. DOM介绍

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

对于最顶层的html、head、body元素，我们可以直接在document对象中获取到：

html元素：<html> = document.documentElement
body元素：<body> = document.body
head元素：<head> = document.head
文档声明：<!DOCTYPE html> = document.doctype

2. 节点和元素

节点是 HTML 文档中的一种基本类型，它可以是元素节点、文本节点、注释节点等。

元素是节点的一种，它是 HTML 文档中具有标签和属性的部分，如<div>、<p>、<span>等。
元素节点是节点类型中最常见的类型之一，它是由标签和标签内的内容构成的。

节点导航

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

// 例子
// 1. 获取body所有的子节点
console.log(bodyEl.childNodes)
// 2. 获取body的第一个子节点
console.log(bodyEl.firstChild)
// 3. 获取body的注释
console.log(bodyEl.firstChild.nextSibling)
// 4. 获取body的父节点
console.log(bodyEl.parentNode)

table中的额外导航

<table> 元素支持 (除了上面给出的，之外) 以下这些属性：
- table.rows — <tr> 元素的集合；
- table.caption/tHead/tFoot — 引用元素 <caption>，<thead>，<tfoot>；
- table.tBodies — <tbody> 元素的集合；
<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 — 在封闭的 <tr> 中单元格的编号。

form元素的额外导航

<form>元素可以直接通过document:来获取：document.forms

<form>元素中的内容可以通过elements来获取：form.elements

var formEl = document.forms[0]
var elements = formEl.elements

3. 元素导航

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

4. 元素选择

5. 节点属性

5.1 nodeType属性：

其他类型可以查看MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType

5.2 nodeName、tagName

nodeName：获取node节点的名字；
tagName：获取元素的标签名词；

tagName 和 nodeName 之间有什么不同呢？

tagName 属性仅适用于 Element 节点；
nodeName 是为任意 Node 定义的：
✓ 对于元素，它的意义与 tagName 相同，所以使用哪一个都是可以的；
✓ 对于其他节点类型（text，comment 等），它拥有一个对应节点类型的字符串；

5.3 innerHTML、textContent

innerHTML 属性
1.1 将元素中的 HTML 获取为字符串形式；
1.2 设置元素中的内容；
outerHTML 属性
2.1 包含了元素的完整 HTML
2.2 innerHTML 加上元素本身一样；
textContent 属性
3.1 仅仅获取元素中的文本内容；
innerHTML和textContent的区别：
4.1 使用 innerHTML，我们将其“作为 HTML”插入，带有所有 HTML 标签。
4.2 使用 textContent，我们将其“作为文本”插入，所有符号（symbol）均按字面意义处理。

5.4 nodeValue/data

用于获取非元素节点的文本内容

5.5 其他属性

hidden属性：也是一个全局属性，可以用于设置元素隐藏。
value: <input>，<select> 和 <textarea>的 value。
href: a标签的href
id

6.元素属性

6.1 attribute

标准的attribute：某些attribute属性是标准的，比如id、class、href、type、value等；
非标准的attribute：某些attribute属性是自定义的，比如abc、age、height等；

对attribute的操作

elem.hasAttribute(name) — 检查特性是否存在。
elem.getAttribute(name) — 获取这个特性值。
elem.setAttribute(name, value) — 设置这个特性值。
elem.removeAttribute(name) — 移除这个特性。
attributes：attr对象的集合，具有name、value属性；

attribute具备以下特征：

它们的名字是大小写不敏感的（id 与 ID 相同）。
它们的值总是字符串类型的。

6.2 property

对于标准的attribute，会在DOM对象上创建与其对应的property属性：

在大多数情况下，它们是相互作用的

改变property，通过attribute获取的值，会随着改变；
通过attribute操作修改，property的值会随着改变；
但是input的value修改只能通过attribute的方法；

除非特别情况，大多数情况下，设置、获取attribute，推荐使用property的方式：

这是因为它默认情况下是有类型的；

6.3 HTML5的data-*自定义属性

习HTML5的data-*自定义属性，那么它们也是可以在dataset属性中获取到的：

7.js动态修改样式

选择一：在CSS中编写好对应的样式，动态的添加class(推荐)；

元素的class attribute，对应的property并非叫class，而是className：

我们可以对className进行赋值，它会替换整个类中的字符串。

如果我们需要添加或者移除单个的class，那么可以使用classList属性。

elem.classList 是一个特殊的对象：

elem.classList.add (class) ：添加一个类
elem.classList.remove(class)：添加/移除类。
elem.classList.toggle(class) ：如果类不存在就添加类，存在就移除它。
elem.classList.contains(class)：检查给定类，返回 true/false。

classList是可迭代对象，可以通过for of进行遍历。

选择二：动态的修改style属性；

如果需要单独修改某一个CSS属性，那么可以通过style来操作：

对于多词（multi-word）属性，使用驼峰式 camelCase

如果我们将值设置为空字符串，那么会使用CSS的默认样式：

多个样式的写法，我们需要使用cssText属性：
不推荐这种用法，因为它会替换整个字符串；

元素style的读取 - getComputedStyle

如果我们需要读取样式：

对于内联样式，是可以通过style.*的方式读取到的;
对于style、css文件中的样式，是读取不到的；

2023-02-16 DOM相关节点元素