前端必刷系列之红宝书——第 14 章

"红宝书" 通常指的是《JavaScript 高级程序设计》，这是一本由 Nicholas C. Zakas（尼古拉斯·扎卡斯）编写的 JavaScript 书籍，是一本广受欢迎的经典之作。这本书是一部翔实的工具书，满满的都是 JavaScript 知识和实用技术。

不管你有没有刷过红宝书，如果现在还没掌握好，那就一起来刷红宝书吧，go！go！go！

系列文章：

第一部分：基本知识（重点、反复阅读）

第二部分：进阶内容（重点、反复阅读）

第三部分：BOM 和 DOM （着重学习）

第 14 章 DOM

节点层级

Node 类型

在DOM中，Node 是一个表示文档中的节点的基本接口，它是所有节点类型的基类。Node 接口定义了一些通用的属性和方法，这些属性和方法被所有节点类型所继承。

Node.nodeName： 返回节点的名称。
Node.nodeType： 返回节点的类型，以数字表示。
- 1 表示元素节点
- 2 表示属性节点
- 3 表示文本节点
- 8 表示注释节点
- 等等...
Node.nodeValue： 返回或设置节点的值，具体的含义和用法取决于节点的类型。
Node.parentNode： 返回节点的父节点。
Node.childNodes： 返回一个包含节点所有子节点的 NodeList。
Node.firstChild： 返回节点的第一个子节点。
Node.lastChild： 返回节点的最后一个子节点。
Node.previousSibling： 返回节点的前一个同级节点。
Node.nextSibling： 返回节点的后一个同级节点。

js 复制代码

// 添加元素节点到父元素
const parentElement = document.getElementById('parentElementId');
parentElement.appendChild(newElement);

// 在父元素的特定位置插入元素节点
const referenceElement = document.getElementById('referenceElementId');
parentElement.insertBefore(newElement, referenceElement);

// 替换节点
const parentElement = document.getElementById('parentElementId');
const oldChild = document.getElementById('oldChildId');
const newChild = document.createElement('div');

parentElement.replaceChild(newChild, oldChild);

// 删除节点
const elementToRemove = document.getElementById('elementToRemove');
elementToRemove.parentNode.removeChild(elementToRemove);

// 复制节点
const originalElement = document.getElementById('originalElementId');
const clonedElement = originalElement.cloneNode(true);

Document 类型

Document 类型是 JS 中表示文档节点的类型。

在浏览器中，document 是 HTMLDocument 的实例，表示整个 HTML 页面。

Document 类型的节点有以下特征：

nodeType 等于 9
nodeName 值为 '#document'
nodeValue 值为 null
parentNode 值为 null
ownerDocument 值为 null
子节点可以是 DocumentType(最多一个)、Element（最多一个）、ProcessingInstruction 或 Comment 类型。

document 对象可用于获取关于页面的信息以及操纵其外观和底层结构。

js 复制代码

document.documentElement // 取得对<html>的引用
document.childNodes[0] // 取得对<html>的引用
document.firstChild // 取得对<html>的引用

document.body // 取的对<body>的引用
document.doctype // 取的对<!doctype>的引用

所有主流浏览器都支持 document.documentElement、document.body。

文档信息：

JS 复制代码

document.title // 文档标题，可设置
document.URL // 完整 URL
document.domain // 域名，可设置（限制）
document.referrer // 来源

可以通过设置合法的 document.domain 让两个页面之间通信。

定位元素：

js 复制代码

document.getElementById()
document.getElementsByTagName()
document.getElementsByName()

Element 类型

Element 表示 XML 或 HTML 元素，对外暴露出访问元素标签名，子节点和属性的能力。

Element 类型的节点具有以下特征：

nodeType 等于 1
nodeName 值为元素的标签名
nodeValue 值为 null
parentNode 值为 Document 或 Element 对象
子节点可以是 Element、Text、Comment、ProcessingInstruction、CDATASection、EntityReference 类型。

操作属性：

js 复制代码

// 获取元素属性值
var linkUrl = document.getElementById("myLink")

linkUrl.getAttribute("href");

// 设置元素属性值
linkUrl.setAttribute("href", "https://www.newexample.com");

// 移除元素属性
linkUrl.removeAttribute("attributeName");

attributes:

Element 类型是唯一使用 attributes 属性的 DOM 节点类型。

js 复制代码

var element = document.getElementById("myElement");
var allAttributes = element.attributes;

// 遍历所有属性
for (var i = 0; i < allAttributes.length; i++) {
    console.log(allAttributes[i].name + ": " + allAttributes[i].value);
}

Text 类型

Text 类型包含按字面解释的纯文本，也可能包含转义后的 HTML 字符，但不含 HTML 代码。

Text 类型特征：

nodeType 等于 3
nodeName 值为 '#text'
nodeValue 值为节点中包含的文本
parentNode 值为 Element 对象
不支持子节点

Comment 类型

DOM 中的注释通过 Comment 类型表示。

Comment 类型的特征：

nodeType 等于 8
nodeName 值为 '#comment'
nodeValue 值为注释的内容
parentNode 值为 Document 或 Element 对象
不支持子节点

DocumentType 类型

DocumentType 类型的节点包含文档的文档类型信息。

DocumentType 特征：

nodeType 等于 10
nodeName 值为文档类型的名称
nodeValue 值为 null
parentNode 值为 Document 对象
不支持子节点

DocumentFragment 类型

DocumentFragment 类型是唯一一个在标记中没有对应表示的类型。

DocumentFragment 特征：

nodeType 等于 11
nodeName 值为 '#document-fragment'
nodeValue 值为 null
parentNode 值为 null
子节点可以是 Element、Text、Comment、ProcessingInstruction、CDATASection、EntityReference 类型。

DOM 编程

动态脚本

js 复制代码

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // 处理脚本加载完成的事件
    script.onload = function () {
        console.log('Script loaded: ' + url);

        // 执行回调函数（可选）
        if (typeof callback === 'function') {
            callback();
        }
    };

    // 将脚本添加到文档头部
    document.head.appendChild(script);
}

// 使用示例
loadScript('path/to/your/script.js', function() {
    // 在脚本加载完成后执行的操作
    console.log('Callback function executed.');
});

MutationObserver 接口

MutationObserver 是 JavaScript 中的一个接口，它提供了一种异步观察DOM（文档对象模型）树变化的能力。使用 MutationObserver 可以监测对DOM的更改，例如元素的添加、删除、属性的修改等。

基本用法

JS 复制代码

function observeChanges(targetNode, config, callback) {
  var observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
  return observer;
}

function stopObserving(observer) {
  observer.disconnect();
}

// 示例1
var targetNode1 = document.getElementById('element1');
var config1 = { attributes: true, childList: true, subtree: true };
var observer1 = observeChanges(targetNode1, config1, myCallback1);

// 示例2
var targetNode2 = document.getElementById('element2');
var config2 = { attributes: true };
var observer2 = observeChanges(targetNode2, config2, myCallback2);

// 停止观察
stopObserving(observer1);
stopObserving(observer2);

未完待续...

参考资料

《JavaScript 高级程序设计》（第 4 版）