|
|
// 引入所需的模块
|
|
|
var domWalk = require("dom-walk");
|
|
|
|
|
|
var Comment = require("./dom-comment.js"); // 用于创建注释节点
|
|
|
var DOMText = require("./dom-text.js"); // 用于创建文本节点
|
|
|
var DOMElement = require("./dom-element.js"); // 用于创建元素节点
|
|
|
var DocumentFragment = require("./dom-fragment.js"); // 用于创建文档片段
|
|
|
var Event = require("./event.js"); // 用于创建事件
|
|
|
var dispatchEvent = require("./event/dispatch-event.js"); // 用于派发事件
|
|
|
var addEventListener = require("./event/add-event-listener.js"); // 用于添加事件监听器
|
|
|
var removeEventListener = require("./event/remove-event-listener.js"); // 用于移除事件监听器
|
|
|
|
|
|
// 模块导出一个 Document 构造函数
|
|
|
module.exports = Document;
|
|
|
|
|
|
// Document 构造函数
|
|
|
function Document() {
|
|
|
// 确保通过构造函数来创建实例
|
|
|
if (!(this instanceof Document)) {
|
|
|
return new Document();
|
|
|
}
|
|
|
|
|
|
// 创建 head, body 和 html 元素，并构建文档结构
|
|
|
this.head = this.createElement("head");
|
|
|
this.body = this.createElement("body");
|
|
|
this.documentElement = this.createElement("html");
|
|
|
|
|
|
// 将 head 和 body 添加到 html 元素中
|
|
|
this.documentElement.appendChild(this.head);
|
|
|
this.documentElement.appendChild(this.body);
|
|
|
|
|
|
// childNodes 是一个包含文档根元素的数组
|
|
|
this.childNodes = [this.documentElement];
|
|
|
|
|
|
// 定义 nodeType 属性为 9（表示文档节点）
|
|
|
this.nodeType = 9;
|
|
|
}
|
|
|
|
|
|
// 定义 Document 原型对象，包含文档对象的各种方法
|
|
|
var proto = Document.prototype;
|
|
|
|
|
|
// 创建文本节点
|
|
|
proto.createTextNode = function createTextNode(value) {
|
|
|
return new DOMText(value, this);
|
|
|
};
|
|
|
|
|
|
// 创建命名空间元素
|
|
|
proto.createElementNS = function createElementNS(namespace, tagName) {
|
|
|
var ns = namespace === null ? null : String(namespace);
|
|
|
return new DOMElement(tagName, this, ns);
|
|
|
};
|
|
|
|
|
|
// 创建元素节点
|
|
|
proto.createElement = function createElement(tagName) {
|
|
|
return new DOMElement(tagName, this);
|
|
|
};
|
|
|
|
|
|
// 创建文档片段
|
|
|
proto.createDocumentFragment = function createDocumentFragment() {
|
|
|
return new DocumentFragment(this);
|
|
|
};
|
|
|
|
|
|
// 创建事件对象
|
|
|
proto.createEvent = function createEvent(family) {
|
|
|
return new Event(family);
|
|
|
};
|
|
|
|
|
|
// 创建注释节点
|
|
|
proto.createComment = function createComment(data) {
|
|
|
return new Comment(data, this);
|
|
|
};
|
|
|
|
|
|
// 通过 ID 获取元素
|
|
|
proto.getElementById = function getElementById(id) {
|
|
|
id = String(id); // 确保 ID 是字符串
|
|
|
|
|
|
// 使用 domWalk 遍历文档的所有节点，找到匹配的节点
|
|
|
var result = domWalk(this.childNodes, function (node) {
|
|
|
if (String(node.id) === id) {
|
|
|
return node; // 找到匹配的节点后返回
|
|
|
}
|
|
|
});
|
|
|
|
|
|
return result || null; // 如果没有找到则返回 null
|
|
|
};
|
|
|
|
|
|
// 引用 DOMElement 中的方法
|
|
|
proto.getElementsByClassName = DOMElement.prototype.getElementsByClassName;
|
|
|
proto.getElementsByTagName = DOMElement.prototype.getElementsByTagName;
|
|
|
proto.contains = DOMElement.prototype.contains;
|
|
|
|
|
|
// 引入事件监听相关的方法
|
|
|
proto.removeEventListener = removeEventListener;
|
|
|
proto.addEventListener = addEventListener;
|
|
|
proto.dispatchEvent = dispatchEvent;
|
