JavaScript- 4.1 DOM-document对象
本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
JavaScript- 1.1 行内、内部、外部三种引用方式
JavaScript- 1.2 ECMA基本语法和控制流
JavaScript- 1.3 DOM对页面内容进行操作
JavaScript- 1.4 BOM对浏览器进行操作
JavaScript- 1.5 数据类型+变量+运算符
JavaScript- 1.6 基本控制流
JavaScript- 2.1 系统函数和自定义函数
JavaScript- 2.2 内置对象MATH
JavaScript- 2.3 内置对象String
JavaScript- 2.4 内置对象Date
JavaScript- 2.5 内置对象ARRAY
JavaScript- 2.6 数组应用
JavaScript- 2.7 二维数组
JavaScript- 3.1 定时器函数 window.settimeout & window.settinterval
JavaScript- 3.2 JavaScript实现不同显示器尺寸的响应式主题和页面
JavaScript- 4.1 DOM-document对象
目录
系列文章目录
前言
一、JavaScript中的Document对象详解
1、Document对象的基本概念
2、Document对象的主要属性和方法
1. 访问元素
2. 创建和添加元素
3. 修改DOM结构
4. 文档信息
5. 文档就绪状态
6. 样式操作
7. 类名操作
8. 属性操作
9. 数据属性
10. 文档遍历
3、现代DOM操作API
1. insertAdjacentHTML
2. 文档片段（DocumentFragment）
3. 模板元素（HTML Template）
4、事件处理
二、代码实践
1、九九乘法表
2、DOM操作--增删改复制移动
总结
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、JavaScript中的Document对象详解
Document对象是DOM（文档对象模型）的入口点，代表了整个HTML或XML文档。通过Document对象，JavaScript可以访问和操作网页的内容、结构和样式。
1、Document对象的基本概念
Document对象是window对象的一个属性，可以通过以下方式访问：
javascript
// 标准方式
const doc = document;// 或者通过window对象
const doc = window.document;2、Document对象的主要属性和方法
1. 访问元素
通过ID获取元素：
javascript
const element = document.getElementById('elementId');通过类名获取元素集合：
javascript
const elements = document.getElementsByClassName('className');通过标签名获取元素集合：
javascript
const elements = document.getElementsByTagName('div');通过CSS选择器获取元素：
javascript
// 获取第一个匹配的元素
const element = document.querySelector('.container');// 获取所有匹配的元素
const elements = document.querySelectorAll('p.highlight');2. 创建和添加元素
创建新元素：
javascript
const newDiv = document.createElement('div');创建文本节点：
javascript
const textNode = document.createTextNode('Hello World');添加元素到DOM：
javascript
// 追加到父元素的末尾
parentElement.appendChild(newDiv);// 插入到特定位置
parentElement.insertBefore(newDiv, referenceElement);3. 修改DOM结构
替换元素：
javascript
parentElement.replaceChild(newElement, oldElement);移除元素：
javascript
parentElement.removeChild(childElement);
// 或者现代方式
childElement.remove();克隆元素：
javascript
const clonedElement = element.cloneNode(true); // true表示深克隆4. 文档信息
获取文档标题：
javascript
const title = document.title;设置文档标题：
javascript
document.title = 'New Page Title';获取文档URL：
javascript
const url = document.URL;获取文档根元素：
javascript
const htmlElement = document.documentElement; // <html>元素5. 文档就绪状态
检查文档是否加载完成：
javascript
document.readyState; // 返回"loading", "interactive"或"complete"document.addEventListener('DOMContentLoaded', function() {// DOM已完全加载和解析
});window.addEventListener('load', function() {// 所有资源（图片等）已加载完成
});6. 样式操作
获取计算样式：
javascript
const styles = window.getComputedStyle(element);
const color = styles.getPropertyValue('color');修改元素样式：
javascript
element.style.backgroundColor = 'red';
element.style.cssText = 'color: blue; font-size: 16px;'; // 批量设置7. 类名操作
添加类：
javascript
element.classList.add('new-class');移除类：
javascript
element.classList.remove('old-class');切换类：
javascript
element.classList.toggle('active');检查类是否存在：
javascript
const hasClass = element.classList.contains('some-class');8. 属性操作
获取属性：
javascript
const value = element.getAttribute('data-id');设置属性：
javascript
element.setAttribute('data-id', '123');移除属性：
javascript
element.removeAttribute('disabled');访问标准属性：
javascript
const href = anchorElement.href; // 比getAttribute('href')更推荐9. 数据属性
HTML5数据属性（data-*）的特殊处理：
javascript
// 设置数据属性
element.dataset.userId = '123'; // 对应data-user-id="123"// 获取数据属性
const userId = element.dataset.userId;10. 文档遍历
获取body元素：
javascript
const body = document.body;获取head元素：
javascript
const head = document.head;获取所有元素：
javascript
const allElements = document.getElementsByTagName('*');3、现代DOM操作API
1. insertAdjacentHTML
javascript
element.insertAdjacentHTML('beforebegin', '<div>Before</div>');
element.insertAdjacentHTML('afterbegin', '<div>After begin</div>');
element.insertAdjacentHTML('beforeend', '<div>Before end</div>');
element.insertAdjacentHTML('afterend', '<div>After</div>');2. 文档片段（DocumentFragment）
javascript
const fragment = document.createDocumentFragment();
// 添加多个元素到fragment
fragment.appendChild(element1);
fragment.appendChild(element2);
// 一次性添加到DOM
document.body.appendChild(fragment);3. 模板元素（HTML Template）
html
<template id="myTemplate"><div class="item"><h2></h2><p></p></div>
</template>javascript
const template = document.getElementById('myTemplate');
const content = template.content.cloneNode(true);
// 修改内容
content.querySelector('h2').textContent = 'Title';
content.querySelector('p').textContent = 'Description';
// 添加到DOM
document.body.appendChild(content);4、事件处理
虽然事件处理通常与Element对象关联更紧密，但Document对象本身也可以处理事件：
javascript
// 全局事件监听
document.addEventListener('click', function(event) {console.log('Document clicked', event.target);
});// 事件委托
document.addEventListener('click', function(event) {if (event.target.matches('.button')) {console.log('Button clicked');}
});Document对象是JavaScript与网页交互的核心接口，掌握其属性和方法对于动态网页开发至关重要。随着现代JavaScript和浏览器API的发展，DOM操作变得更加高效和便捷。
二、代码实践
1、九九乘法表
代码如下：
HTML
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DOM-document对象</title></head><body><pre><script type="text/javascript">document.write("hello world");document.write("hello world");</script></pre><pre><script type="text/javascript">document.writeln("hello world");//默认加了一个回车document.writeln("hello world");</script></pre><script type="text/javascript">//可以写html元素document.write("<h1>hello world</h1>");//乘法口诀表document.write("<table width='600px' border='1px'>");for (var i = 1; i <= 9; i++) {document.write("<tr>");for (var j = 1; j <= i; j++) {document.write("<td>");document.write(j + "*" + i + "=" + j * i);document.write("</td>");}document.write("</tr>");}document.write("</table>");</script></body>
</html>
代码运行如下：
2、DOM操作--增删改复制移动
代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DOM操作--增删改复制移动</title><style type="text/css">div {width: 50px;height: 50px;background-color: aqua;}</style></head><body><a href="javascript:void(0);" onclick="create()">增加元素</a><a href="javascript:void(0);" onclick="del()">删除元素</a><a href="javascript:void(0);" onclick="replace()">替换元素</a><a href="javascript:void(0);" onclick="copy()">复制元素</a><a href="javascript:void(0);" onclick="move()">移动元素</a><p class="p1">段落1</p><p class="p2" id="id1">段落2</p><p class="p3" id="id2">段落3</p><div id="div1"></div><script type="text/javascript">// 1. 增加function create() {// 1.创建元素节点 createlement// 2.添加内容或者属性// 3.放置在页面的某个父节点之下 appendchildvar myp = document.createElement('p');myp.innerText = "段落4";// document.body.appendChild(myp);document.getElementById('id2').appendChild(myp);}// 2.删除function del() {var myp = document.getElementById('id1');// 删除时先找到父元素myp.parentNode.removeChild(myp);}// 3.替换function replace(){// 新元素var myImg = document.createElement('img');myImg.src="../img/1.jpg";// 旧元素var myp = document.getElementById('id2');myp.parentNode.replaceChild(myImg,myp);}// 4.复制function copy(){// 新元素// myDiv.cloneNode(true);// 旧元素var myDiv = document.getElementById('div1');document.body.appendChild(myDiv.cloneNode(true));}// 5.移动function move(){// 段落2和3换 insertbeforevar p2 = document.getElementById('id1');var p3 = document.getElementById('id2');p2.parentNode.insertBefore(p3,p2);}</script></body>
</html>
代码运行如下：
总结
以上就是今天要讲的内容，本文简单记录了Document对象，仅作为一份简单的笔记使用，大家根据注释理解