多种昆明网站建设,空间网,做百度ssp的网站开发人,app网站开发的特点DOM (文档对象模型) 详解
一、DOM 基础概念
1. 定义与作用
DOM#xff08;Document Object Model#xff09;即文档对象模型#xff0c;是一种用于 HTML 和 XML 文档的编程接口。它将文档解析为一个由节点和对象组成的树状结构#xff0c;允许程序和脚本动态访问、修改文…DOM (文档对象模型) 详解
一、DOM 基础概念
1. 定义与作用
DOMDocument Object Model即文档对象模型是一种用于 HTML 和 XML 文档的编程接口。它将文档解析为一个由节点和对象组成的树状结构允许程序和脚本动态访问、修改文档的内容、结构和样式。
2. 核心特点
树形结构DOM 将文档表示为节点树每个节点可以有子节点。平台和语言无关DOM 可以被任何编程语言访问如 JavaScript、Python 等。动态交互通过 DOM程序可以实时改变文档的内容和结构。
3. 节点类型
DOM 树中的节点主要分为以下几种类型
元素节点Element Node表示 HTML 元素如 div、p 等。文本节点Text Node表示元素内的文本内容。属性节点Attribute Node表示元素的属性如 id、class 等。文档节点Document Node表示整个文档是 DOM 树的根节点。注释节点Comment Node表示 HTML 中的注释。
二、DOM 树结构
1. 节点关系
父节点Parent Node每个节点除根节点外都有一个父节点。子节点Child Node一个节点可以有零个或多个子节点。兄弟节点Sibling Node共享同一个父节点的节点互为兄弟节点。祖先节点Ancestor Node父节点的父节点依此类推。后代节点Descendant Node子节点的子节点依此类推。
2. 示例 HTML 与 DOM 树
!DOCTYPE html
html
headtitleDOM 示例/title
/head
bodydiv idcontainerh1Hello, DOM!/h1p classcontent这是一个 a href#DOM 示例/a。/p/div
/body
/html对应的简化 DOM 树结构
Document
└── html (Element)├── head (Element)│ └── title (Element)│ └── DOM 示例 (Text)└── body (Element)└── div (Element, idcontainer)├── h1 (Element)│ └── Hello, DOM! (Text)└── p (Element, classcontent)├── 这是一个 (Text)└── a (Element, href#)└── DOM 示例 (Text)└── 。 (Text)三、JavaScript 中的 DOM 操作
1. 访问 DOM 元素
通过 ID 访问
const element document.getElementById(container);通过标签名访问
const paragraphs document.getElementsByTagName(p);
// 返回 HTMLCollection 对象通过类名访问
const elements document.getElementsByClassName(content);
// 返回 HTMLCollection 对象通过选择器访问
const element document.querySelector(#container p);
// 返回匹配的第一个元素const elements document.querySelectorAll(p.content);
// 返回 NodeList 对象2. 操作元素内容
修改文本内容
const heading document.querySelector(h1);
heading.textContent 新标题;修改 HTML 内容
const container document.getElementById(container);
container.innerHTML p新内容/p;3. 操作元素属性
获取属性值
const link document.querySelector(a);
const href link.getAttribute(href);设置属性值
link.setAttribute(href, https://example.com);
link.setAttribute(target, _blank);直接访问属性
link.href https://example.com;
link.target _blank;4. 操作元素样式
内联样式
const element document.getElementById(container);
element.style.backgroundColor lightblue;
element.style.width 500px;类操作
element.classList.add(active);
element.classList.remove(hidden);
element.classList.toggle(highlight);5. 创建和修改元素
创建新元素
const newDiv document.createElement(div);
newDiv.textContent 新创建的元素;添加子元素
const parent document.getElementById(container);
parent.appendChild(newDiv);插入元素
const referenceElement document.querySelector(p);
parent.insertBefore(newDiv, referenceElement);删除元素
parent.removeChild(referenceElement);替换元素
const newElement document.createElement(span);
parent.replaceChild(newElement, referenceElement);6. 事件处理
事件监听
const button document.getElementById(myButton);
button.addEventListener(click, function() {alert(按钮被点击了);
});事件对象
button.addEventListener(click, function(event) {console.log(事件类型:, event.type);console.log(触发元素:, event.target);
});事件冒泡与捕获
冒泡Bubbling事件从触发元素向上传播到父元素。捕获Capturing事件从文档根向下传播到触发元素。
// 使用捕获阶段
element.addEventListener(click, function() {// ...
}, true);阻止事件传播
event.stopPropagation();阻止默认行为
event.preventDefault();四、DOM 性能优化
1. 减少 DOM 操作
批量修改
// 低效
const list document.getElementById(myList);
for (let i 0; i 1000; i) {const item document.createElement(li);item.textContent Item ${i};list.appendChild(item);
}// 高效
const fragment document.createDocumentFragment();
for (let i 0; i 1000; i) {const item document.createElement(li);item.textContent Item ${i};fragment.appendChild(item);
}
list.appendChild(fragment);2. 使用事件委托
// 为大量按钮添加事件
document.getElementById(buttonContainer).addEventListener(click, function(event) {if (event.target.tagName BUTTON) {console.log(按钮被点击:, event.target.textContent);}
});3. 缓存 DOM 引用
// 低效
for (let i 0; i 1000; i) {document.getElementById(myElement).style.left i px;
}// 高效
const element document.getElementById(myElement);
for (let i 0; i 1000; i) {element.style.left i px;
}4. 避免频繁重排和重绘
重排Reflow
当 DOM 的变化影响了元素的布局信息时浏览器需要重新计算元素的布局将其安放在界面中的正确位置。
重绘Repaint
当一个元素的外观发生改变但没有影响到布局信息时浏览器会将新样式应用到元素上。
优化建议
批量修改样式使用 documentFragment避免频繁读取布局信息使用 transform 和 opacity 进行动画
五、DOM 与 XML
1. XML DOM
DOM 最初是为 XML 设计的同样适用于 HTML。XML DOM 提供了与 HTML DOM 类似的 API 来操作 XML 文档。
2. XML 解析示例
const xmlText booktitleJavaScript DOM/titleauthorJohn Doe/author/book;
const parser new DOMParser();
const xmlDoc parser.parseFromString(xmlText, text/xml);const title xmlDoc.querySelector(title).textContent;
console.log(书名:, title);六、DOM 标准
1. DOM 级别
DOM Level 11998 年发布定义了基本的 DOM 结构和操作。DOM Level 22000 年发布增加了事件模型、样式、遍历和范围等模块。DOM Level 32004 年发布增加了文档验证、加载和保存等功能。DOM Living StandardW3C 持续更新的 DOM 标准。
2. DOM API 分类
核心 DOM通用的 DOM 操作接口。HTML DOM专门针对 HTML 的扩展。SVG DOM针对 SVG 图形的扩展。XML DOM针对 XML 文档的扩展。
七、高级 DOM 技术
1. 节点遍历
const element document.getElementById(container);
let node element.firstChild;while (node) {console.log(节点类型:, node.nodeType);console.log(节点内容:, node.textContent);node node.nextSibling;
}2. 范围Range
const range document.createRange();
range.selectNode(document.getElementById(myElement));// 复制范围内容
const fragment range.cloneContents();
document.body.appendChild(fragment);3. Mutation Observer
监听 DOM 变化的现代 API。
const observer new MutationObserver((mutations) {mutations.forEach((mutation) {console.log(DOM 变化类型:, mutation.type);});
});const options {childList: true,attributes: true,subtree: true
};observer.observe(document.body, options);八、DOM 与性能监控
1. 使用 Performance API
// 测量 DOM 操作时间
console.time(dom操作);// DOM 操作
const element document.createElement(div);
document.body.appendChild(element);console.timeEnd(dom操作);2. Chrome DevTools 性能分析
使用 Performance 面板记录和分析页面性能。关注 Layout重排和 Paint重绘事件。
九、DOM 安全问题
1. XSS 攻击
恶意代码通过未过滤的用户输入注入到 DOM 中。防范措施对用户输入进行过滤和转义。
2. 安全编码实践
// 不安全
const userInput scriptalert(XSS);/script;
document.getElementById(output).innerHTML userInput;// 安全
const textNode document.createTextNode(userInput);
document.getElementById(output).appendChild(textNode);十、DOM 的未来发展
1. Web Components
使用 Shadow DOM 创建封装的组件。减少全局命名空间污染。
2. 虚拟 DOM
React、Vue 等框架使用虚拟 DOM 提高性能。减少直接操作真实 DOM 的频率。
通过深入理解 DOM开发者可以更高效地操作网页内容优化性能并创建出交互性更强的 Web 应用。
