DOM节点属性

DOM 节点是常规的 JavaScript 对象。它们使用基于原型的类进行继承。
因为对象通常都具有 constructor 属性。它引用类的 constructor，constructor.name 就是它的名称：

alert( document.body.constructor.name ); // HTMLBodyElement

在浏览器中，使用 console.dir(elem) 输出元素来查看也是非常容易的

nodeType

nodeType 属性提供了另一种“过时的”用来获取 DOM 节点类型的方法。
它有一个数值型值（numeric value）：

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

tagName和nodeName

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

alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY

• tagName 属性仅适用于 Element 节点。
• nodeName 是为任意 Node 定义的

标签名称始终是大写的，除非是在 XML 模式下

innerHTML：内容

innerHTML 属性允许将元素中的 HTML 获取为字符串形式。
我们也可以修改它。因此，它是更改页面最有效的方法之一。
小心：“innerHTML+=” 会进行完全重写
我们可以使用 elem.innerHTML+="more html" 将 HTML 附加到元素上。
就像这样：

chatDiv.innerHTML += "<div>Hello<img src='smile.gif'/> !</div>";
chatDiv.innerHTML += "How goes?";

但我们必须非常谨慎地使用它，因为我们所做的 不是 附加内容，而且完全地重写。

outerHTML

outerHTML 属性包含了元素的完整 HTML。就像 innerHTML 加上元素本身一样。

<div id="elem">Hello <b>World</b></div>
<script>
  alert(elem.outerHTML); // <div id="elem">Hello <b>World</b></div>
</script>

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

nodeValue或data

innerHTML 属性仅对元素节点有效。
其他节点类型，例如文本节点，具有它们的对应项：nodeValue 和 data 属性。这两者在实际使用中几乎相同，只有细微规范上的差异。因此，我们将使用 data，因为它更短。

textContent纯文本

textContent 它允许以“安全方式”写入文本。
假设我们有一个用户输入的任意字符串，我们希望将其显示出来。

• 使用 innerHTML，我们将其“作为 HTML”插入，带有所有 HTML 标签。
• 使用 textContent，我们将其“作为文本”插入，所有符号（symbol）均按字面意义处理。

“hidden” 属性

“hidden” 特性（attribute）和 DOM 属性（property）指定元素是否可见。
我们可以在 HTML 中使用它，或者使用 JavaScript 对其进行赋值，如下所示：

<div>Both divs below are hidden</div>
<div hidden>With the attribute "hidden"</div>
<div id="elem">JavaScript assigned the property "hidden"</div>
<script>
  elem.hidden = true;
</script>

从技术上来说，hidden 与 style="display:none" 做的是相同的事。但 hidden 写法更简洁。
这里有一个 blinking 元素：

let elem = document.createElement('div')
elem.innerText = 'A blinking element'
document.body.append(elem)
setInterval(() => elem.hidden = !elem.hidden, 1000);