节点属性

Yang2022年10月14日大约 4 分钟

层次结构

EventTarget

是一切的根“抽象（abstract）”类

该类的对象从未被创建。它作为一个基础，以便让所有 DOM 节点都支持所谓的“事件（event）”

Node

是一个“抽象”类，充当 DOM 节点的基础

它提供了树的核心功能：parentNode，nextSibling，childNodes 等（它们都是 getter）

Node 类的对象从未被创建。但是还有一些继承自它的其他类（因此继承了 Node 的功能）

Document

由于历史原因通常被 HTMLDocument 继承（尽管最新的规范没有规定），是一个整体的文档
全局变量 document 就是属于这个类。它作为 DOM 的入口，是 HTMLDocument 类的一个实例

CharacterData

一个“抽象”类，被下述类继承

Text：对应于元素内部文本的类，例如 <p>Hello</p> 中的 Hello
Comment：注释类。它们不会被展示出来，但每个注释都会成为 DOM 中的一员

Element

是 DOM 元素的基础类

提供了元素级导航 nextElementSibling，children以及搜索方法，如 getElementsByTagName 和 querySelector
浏览器不仅支持 HTML，还支持 XML 和 SVG。因此，Element 类充当的是更具体的类的基础：SVGElement，XMLElement和 HTMLElement

HTMLElement

是所有 HTML 元素的基础类

HTMLInputElement：<input> 元素的类
HTMLBodyElement：<body> 元素的类
HTMAnchorElement：<a> 元素的类
...等

归纳

很多其他标签具有自己的类，可能还具有特定的属性和方法，而一些元素，如 <span>、<section>、<article> 等，没有任何特定的属性，所以它们是 HTMLElement 类的实例

给定节点的全部属性和方法都是继承链的结果

例如，<input> 元素的 DOM 对象，属于 HTMLInputElement 类，获取属性和方法，并将其作为下列类（按继承顺序列出）的叠加：

HTMLInputElement —— 该类提供特定于输入的属性，
HTMLElement —— 它提供了通用（common）的 HTML 元素方法（以及 getter 和 setter）
Element —— 提供通用（generic）元素方法，
Node —— 提供通用 DOM 节点属性，
EventTarget —— 为事件（包括事件本身）提供支持，
……最后，它继承自 Object，因为像 hasOwnProperty 这样的“普通对象”方法也是可用的

// 类型测试
console.log(document.body.constructor.name)           // HTMLBodyElement
console.log(document.body.toString())                 // [object HTMLBodyElement]
console.log(document.body instanceof HTMLBodyElement) // true
console.log(document.body instanceof HTMLElement)     // true
console.log(document.body instanceof Element)         // true
console.log(document.body instanceof Node)            // true
console.log(document.body instanceof EventTarget)     // true

// 探索属性
var dom = document.querySelector('div')
console.log(dom) // 显示元素的 DOM 树
console.dir(dom) // 将元素显示为 DOM 对象

节点属性

nodeType

（只读）提供了一种“过时的”用来获取 DOM 节点类型的方法

返回数值类型，如下
- 1：元素节点
- 3：文本节点
- 9：document 对象

<div>
  Test
  <span>Text</span>
</div>
<script>
  var dom = document.querySelector('div')
  console.log(dom.nodeType) // 1
  console.log(dom.firstChild.nodeType) // 3
  console.log(dom.firstElementChild.nodeType) // 1
  console.log(document.nodeType) // 9
</script>

tagName

（只读）读取节点标签名，仅支持元素节点，非元素节点返回 undefined

<div>
  Test
  <span>Text</span>
</div>
<script>
  var dom = document.querySelector('div')
  console.log(dom.firstElementChild.tagName) // SPAN
  console.log(dom.firstChild.tagName) // undefined
</script>

nodeName

（只读）读取节点标签名，适用于任意 Node 节点
对于其他非元素类型节点（text，comment 等），它拥有一个对应节点类型的字符串

<div>
  Test
  <span>Text</span>
</div>
<script>
  var dom = document.querySelector('div')
  console.log(dom.firstChild.nodeName)        // #text
  console.log(dom.firstElementChild.nodeName) // SPAN
</script>

innerHTML

将元素中的 HTML 获取为字符串形式，也可以进行修改

插入无效的 HTML，浏览器会自动修复错误
innerHTML += str 的操作会进行完全重写，而非附加

<div><span>Text</span></div>
<script>
  var dom = document.querySelector('div')
  console.log(dom.innerHTML) // <span>Text</span> 如果存在文本节点也会打印出来

  // 插入无效的 HTML，浏览器会自动修复错误
  dom.innerHTML = '<b>Test'
  console.log(dom.innerHTML)  // <b>Test</b>
</script>

outerHTML

属性包含了元素的完整 HTML，和 innerHTML 加上元素本身一样，也可以进行修改

赋值不会修改 DOM 元素，而是将其从 DOM 中删除并在其位置插入新的 HTML

<div><span>Text</span></div>
<script>
  var dom = document.querySelector('div')
  console.log(dom.outerHTML) // <div><span>Text</span></div>
</script>

nodeValue/data

返回文本节点内容，一般使用 data，因为它更简洁

<div>Text<!--Comment Text--></div>
<script>
  var oDiv = document.querySelector('div')
  var oText= oDiv.firstChild
  console.log(oText.nodeValue) // Text
  console.log(oText.data) // Text
  var oComment = oText.nextSibling
  console.log(oComment.data) // Comment Text
</script>

textContent

提供了对元素内文本的访问权限：仅文本，不包括注释，并去掉所有 <tags>

实际开发中读取文本场景较少，但是写入文本场景较多，因为 textContent，会将写入数据“作为文本”插入，所有符号均按字面意义处理，不带 HTML 标签

<div id="news"><h1>Headline!</h1><!--Comment Text--><p> Martians attack people!</p></div>
<script>
  console.log(news.textContent) // Headline! Martians attack people!
</script>

hidden

指定元素是否可见，hidden 与 style="display:none" 做的是相同的事，但 hidden 写法更简洁

<button id="btn">显示/隐藏</button>
<div style="background: #f00;color: #fff;line-height: 2;padding: 16px;">Text</div>
<script>
	var oDiv = document.querySelector('div')
	var oBtn = document.getElementById('btn')
	oBtn.onclick=function(){
		oDiv.hidden = !oDiv.hidden
	}
</script>

attributes

读取所有节点属性
返回一个集合，是可迭代对象，该对象将所有元素的特性（标准和非标准的）作为 name 和 value 属性存储在对象中。

document.querySelector('div').attributes

属性设置方法

hasAttribute(name)

检查属性是否存在

elem.hasAttribute(name)

getAttribute(name)

获取属性值

elem.getAttribute(name)

setAttribute(name, value)

设置属性值

elem.setAttribute(name, value)

removeAttribute(name)

移除属性值

elem.removeAttribute(name)