本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
JavaScript- 1.1 行内、内部、外部三种引用方式
JavaScript- 3.1 定时器函数 window.settimeout & window.settinterval
JavaScript- 3.2 JavaScript实现不同显示器尺寸的响应式主题和页面
JavaScript- 4.1 DOM-document对象
JavaScript- 3.2 JavaScript实现不同显示器尺寸的响应式主题和页面
JavaScript- 4.1 DOM-document对象
目录
[1. 访问元素](#1. 访问元素)
[2. 创建和添加元素](#2. 创建和添加元素)
[3. 修改DOM结构](#3. 修改DOM结构)
[4. 文档信息](#4. 文档信息)
[5. 文档就绪状态](#5. 文档就绪状态)
[6. 样式操作](#6. 样式操作)
[7. 类名操作](#7. 类名操作)
[8. 属性操作](#8. 属性操作)
[9. 数据属性](#9. 数据属性)
[10. 文档遍历](#10. 文档遍历)
[1. insertAdjacentHTML](#1. insertAdjacentHTML)
[2. 文档片段（DocumentFragment）](#2. 文档片段（DocumentFragment）)
[3. 模板元素（HTML Template）](#3. 模板元素（HTML Template）)
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、JavaScript中的Document对象详解
Document对象是DOM（文档对象模型）的入口点，代表了整个HTML或XML文档。通过Document对象，JavaScript可以访问和操作网页的内容、结构和样式。
1、Document对象的基本概念
Document对象是window对象的一个属性，可以通过以下方式访问：
javascript
javascript
// 标准方式
const doc = document;
// 或者通过window对象
const doc = window.document;2、Document对象的主要属性和方法
1. 访问元素
通过ID获取元素：
javascript
javascript
const element = document.getElementById('elementId');通过类名获取元素集合：
javascript
javascript
const elements = document.getElementsByClassName('className');通过标签名获取元素集合：
javascript
javascript
const elements = document.getElementsByTagName('div');通过CSS选择器获取元素：
javascript
javascript
// 获取第一个匹配的元素
const element = document.querySelector('.container');
// 获取所有匹配的元素
const elements = document.querySelectorAll('p.highlight');2. 创建和添加元素
创建新元素：
javascript
javascript
const newDiv = document.createElement('div');创建文本节点：
javascript
javascript
const textNode = document.createTextNode('Hello World');添加元素到DOM：
javascript
javascript
// 追加到父元素的末尾
parentElement.appendChild(newDiv);
// 插入到特定位置
parentElement.insertBefore(newDiv, referenceElement);3. 修改DOM结构
替换元素：
javascript
javascript
parentElement.replaceChild(newElement, oldElement);移除元素：
javascript
javascript
parentElement.removeChild(childElement);
// 或者现代方式
childElement.remove();克隆元素：
javascript
javascript
const clonedElement = element.cloneNode(true); // true表示深克隆4. 文档信息
获取文档标题：
javascript
javascript
const title = document.title;设置文档标题：
javascript
javascript
document.title = 'New Page Title';获取文档URL：
javascript
javascript
const url = document.URL;获取文档根元素：
javascript
javascript
const htmlElement = document.documentElement; // <html>元素5. 文档就绪状态
检查文档是否加载完成：
javascript
javascript
document.readyState; // 返回"loading", "interactive"或"complete"
document.addEventListener('DOMContentLoaded', function() {
// DOM已完全加载和解析
});
window.addEventListener('load', function() {
// 所有资源（图片等）已加载完成
});6. 样式操作
获取计算样式：
javascript
javascript
const styles = window.getComputedStyle(element);
const color = styles.getPropertyValue('color');修改元素样式：
javascript
javascript
element.style.backgroundColor = 'red';
element.style.cssText = 'color: blue; font-size: 16px;'; // 批量设置7. 类名操作
添加类：
javascript
javascript
element.classList.add('new-class');移除类：
javascript
javascript
element.classList.remove('old-class');切换类：
javascript
javascript
element.classList.toggle('active');检查类是否存在：
javascript
javascript
const hasClass = element.classList.contains('some-class');8. 属性操作
获取属性：
javascript
javascript
const value = element.getAttribute('data-id');设置属性：
javascript
javascript
element.setAttribute('data-id', '123');移除属性：
javascript
javascript
element.removeAttribute('disabled');访问标准属性：
javascript
javascript
const href = anchorElement.href; // 比getAttribute('href')更推荐9. 数据属性
HTML5数据属性（data-*）的特殊处理：
javascript
javascript
// 设置数据属性
element.dataset.userId = '123'; // 对应data-user-id="123"
// 获取数据属性
const userId = element.dataset.userId;10. 文档遍历
获取body元素：
javascript
javascript
const body = document.body;获取head元素：
javascript
javascript
const head = document.head;获取所有元素：
javascript
javascript
const allElements = document.getElementsByTagName('*');3、现代DOM操作API
1. insertAdjacentHTML
javascript
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
javascript
const fragment = document.createDocumentFragment();
// 添加多个元素到fragment
fragment.appendChild(element1);
fragment.appendChild(element2);
// 一次性添加到DOM
document.body.appendChild(fragment);3. 模板元素（HTML Template）
html
html
<template id="myTemplate">
<div class="item">
<h2></h2>
<p></p>
</div>
</template>javascript
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
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
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操作--增删改复制移动
代码如下：
html
<!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.放置在页面的某个父节点之下 appendchild
var 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换 insertbefore
var p2 = document.getElementById('id1');
var p3 = document.getElementById('id2');
p2.parentNode.insertBefore(p3,p2);
}
</script>
</body>
</html>代码运行如下：
总结
以上就是今天要讲的内容，本文简单记录了Document对象，仅作为一份简单的笔记使用，大家根据注释理解