2025-02-20 日报 Day103

今日的鸡汤

我将玫瑰藏于身后，
风起花落，
从此鲜花赠自己，
纵马踏花向自由。

今日学习内容

1、JS 红皮书 P423-425 第十四章：DOM

今日笔记

1、Comment类型: DOM 中的注释通过 Comment 类型表示。Comment 类型的节点具有以下特征：

• nodeType: 8
• nodeName: “#comment”
• nodeValue: 注释的内容
• parentNode: 指向父节点
  Comment 类型与 Text 类型继承同一个基类（CharacterData），因此拥有除 splitText()之外
  Text 节点所有的字符串操作方法。与 Text 类型相似，注释的实际内容可以通过 nodeValue 或 data属性获得。
  注释节点可以作为父节点的子节点来访问。比如下面的 HTML 代码：
  这里的注释是
  元素的子节点，这意味着可以像下面这样访问它： let div = document.getElementById("myDiv"); let comment = div.firstChild; alert(comment.data); // "A comment" 可以使用 document.createComment()方法创建注释节点，参数为注释文本，如下所示： let comment = document.createComment("A comment"); 显然，注释节点很少通过 JavaScrpit 创建和访问，因为注释几乎不涉及算法逻辑。此外，浏览器不承认结束的标签之后的注释。如果要访问注释节点，则必须确定它们是元素的后代。 2、CDATASection类型: CDATASection 类型表示 XML 中特有的 CDATA 区块。CDATASection 类型继承 Text 类型，因此拥有包括 splitText()在内的所有字符串操作方法。CDATASection 类型的节点具有以下特征：
• nodeType: 4
• nodeName: “#cdata-section”
• nodeValue: CDATA 区块的内容
• parentNode: Document 或 Element 对象
  CDATA 区块只在 XML 文档中有效，因此某些浏览器比较陈旧的版本会错误地将 CDATA 区块解析为 Comment 或 Element。比如下面这行代码：
  3、DocumentType类型: DocumentType 类型的节点包含文档的文档类型（doctype）信息，具有以下特征：
• nodeType: 10
• nodeName: 文档类型的名称
• nodeValue: null
• parentNode: Document 对象
  DocumentType 对象在 DOM Level 1 中不支持动态创建，只能在解析文档代码时创建。
  4、DocumentFragment类型: DocumentFragment 类型表示一个轻量级的文档对象，具有以下特征：
• nodeType: 11
• nodeName: “#document-fragment”
• nodeValue: null
• parentNode: null
• 子节点: 可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或 EntityReference。

let fragment = document.createDocumentFragment(); 
let ul = document.getElementById("myList"); 
for (let i = 0; i < 3; ++i) { 
 let li = document.createElement("li"); 
 li.appendChild(document.createTextNode(`Item ${i + 1}`)); 
 fragment.appendChild(li); 
} 
ul.appendChild(fragment);

5、Attr类型: 元素数据在 DOM 中通过 Attr 类型表示。Attr 类型构造函数和原型在所有浏览器中都可以直接访问。技术上讲，属性是存在于元素 attributes 属性中的节点。Attr 节点具有以下特征：

• nodeType: 2
• nodeName: 属性的名称
• nodeValue: 属性的值
• parentNode: null
  属性节点尽管是节点，却不被认为是 DOM 文档树的一部分。Attr 节点很少直接被引用，通常开发者更喜欢使用 getAttribute()、removeAttribute()和 setAttribute()方法操作属性。
  Attr 对象上有 3 个属性：name、value 和 specified。其中，name 包含属性名（与 nodeName一样），value 包含属性值（与 nodeValue 一样），而 specified 是一个布尔值，表示属性使用的是默认值还是被指定的值。
  可以使用 document.createAttribute()方法创建新的 Attr 节点，参数为属性名。比如，要给元素添加 align 属性，可以使用下列代码：

  let attr = document.createAttribute("align"); 
  attr.value = "left"; 
  element.setAttributeNode(attr); 
  alert(element.attributes["align"].value); // "left" 
  alert(element.getAttributeNode("align").value); // "left" 
  alert(element.getAttribute("align")); // "left"

  注意 将属性作为节点来访问多数情况下并无必要。推荐使用 getAttribute()、removeAttribute()和 setAttribute()方法操作属性，而不是直接操作属性节点。