目录
DOM 加载与脚本执行的时序问题
1. 将 <script> 标签放到 HTML 末尾
2.使用 defer 属性
3. 使用 window.onload
一、获取元素
1、getElementById
2、getElementsByClassName
3、getElementsByTagName
4、querySelector和querySelectorALL
5、对象的属性关系查找
二、修改元素
1、修改内容
2、修改属性
3、修改样式
三、添加元素
四、删除元素
DOM（文档对象模型）操作全称document object model,是指在浏览器中通过 JavaScript 动态修改、添加、删除和获取 HTML 元素的内容和结构。DOM 是浏览器对网页的内部表示，它把网页的每个元素视为一个对象，可以通过 JavaScript 访问和操作这些对象。这样就能在js里面用编程的方式对html里面的元素做处理了
DOM 加载与脚本执行的时序问题
当 HTML 中需要操作的标签在 <script> 标签后面，导致 JavaScript 无法找到尚未生成的 DOM 元素时，可以通过以下三种方式解决问题：【否则会显示null】
1. 将 <script> 标签放到 HTML 末尾
<!DOCTYPE html>
<html>
<head><title>解决 DOM 加载问题</title>
</head>
<body><div id="example">示例内容</div><script src="js/dom操作.js"></script>
</body>
</html>
2.使用 defer 属性
为外部 JavaScript 文件添加 defer 属性。defer 使脚本的执行延迟到 HTML 解析完成后，因此适合处理 DOM 尚未生成的问题。
<!DOCTYPE html>
<html>
<head><title>解决 DOM 加载问题</title><script src="js/dom操作.js" defer></script>
</head>
<body><div id="example">示例内容</div>
</body>
</html>
3. 使用 window.onload
通过 window.onload 确保脚本在页面内容加载完成后再执行。这种方式对内嵌和外部脚本都有效。
<!DOCTYPE html>
<html>
<head><title>解决 DOM 加载问题</title><script>window.onload = function() {const div = document.getElementById('example');div.innerText = '内容已加载';};</script>
</head>
<body><div id="example">示例内容</div>
</body>
</html>
下面是对dom常见四种操作的学习：
一、获取元素
1、getElementById
通过id获取符合条件的第一个对象，因此id值最好不重复设置，可以通过 . 来访问其具有的属性。
var obj1 = document.getElementById('first')
console.log(obj1)这样我们就获取到对象obj1了，进而可对其进行我们想要的操作，这里举例点击obj1对象的背景颜色随机改变：
//进行操作-
obj1.onclick = function (){var color = ''; // 初始化颜色变量，用于存储随机生成的颜色// 随机循环生成6个十六进制数（0-15）for(var i = 0; i < 6; i++) {var num = Math.round(Math.random() * 15); // 生成0到15之间的随机数// 如果随机数是大于9的值，则转换为对应的十六进制字符if(num == 10) num = 'a'; // 10转为'a'if(num == 11) num = 'b'; // 11转为'b'if(num == 12) num = 'c'; // 12转为'c'if(num == 13) num = 'd'; // 13转为'd'if(num == 14) num = 'e'; // 14转为'e'if(num == 15) num = 'f'; // 15转为'f'// 将生成的十六进制数字符添加到color变量中color += num;}console.log(color); // 输出生成的颜色代码// 设置页面的背景色为随机生成的颜色obj1.style.background = "#" + color
}
2、getElementsByClassName
根据class值查找，找到所有符合条件的对象组成的数组，注意访问的时候需要用下标
var arr = document.getElementsByClassName("aaa")对其进行操作：鼠标点击第i个对象时触发弹框
for(var i=0;i<arr.length;i++) {arr[i].onclick =function()
{alert(1)//鼠标点击第i个对象时触发弹框
}
} 
操作2：随机改变颜色，这里注意this的使用 ----绑定事件和执行事件不在同一时刻
for(var j=0 ;j<arr.length; j++) {arr[j].onclick = function (){ var color = ''; // 初始化颜色变量，用于存储随机生成的颜色// 随机循环生成6个十六进制数（0-15）for(var i = 0; i < 6; i++) {var num = Math.round(Math.random() * 15); // 生成0到15之间的随机数// 如果随机数是大于9的值，则转换为对应的十六进制字符if(num == 10) num = 'a'; // 10转为'a'if(num == 11) num = 'b'; // 11转为'b'if(num == 12) num = 'c'; // 12转为'c'if(num == 13) num = 'd'; // 13转为'd'if(num == 14) num = 'e'; // 14转为'e'if(num == 15) num = 'f'; // 15转为'f// 将生成的十六进制数字符添加到color变量中color += num;}// 设置当前点击元素的背景色为随机生成的颜色this.style.background = "#" + color;}
}最后为什么不能用arr[j]，而是this？
在 for 循环中，先给每个元素绑定onclick，function内部不执行，触发事件时j已经循环完了，j已经为最后一个元素索引了
所以arr[j] 永远指向最后一个元素，这样即使点击了其他元素，也会应用到最后一个元素上。而this 会指向触发该事件的 DOM 元素
3、getElementsByTagName
根据元素名称查找：找到所有符合条件的对象组成的数组
var arr = document.getElementsByTagName("div")4、querySelector和querySelectorALL
根据元素选择器querySelector查找，获取符合条件的第一个对象
document.querySelector('.aa')//和css选择器一样根据元素选择器querySelectorALL查找，获取符合条件的所有对象组成的数组
document.querySelectorAll('.aa')5、对象的属性关系查找
Node: DOM 中所有的节点类型（元素、文本、注释等）都继承自 Node 接口。
- Node 包含
text属性，表示文本内容（如文本节点）。Element: 仅表示 HTML 或 XML 元素，不包括文本或注释节点。
- Element 不显示
text属性，而是专注于元素特性。
找父亲 parentNode parentElement
找孩子 childNodes children
第一个孩子 firstChild firstElementChild
最后一个孩子 lastChild lastElementChild
上一个元素 previousSibling previousElementSibling
下一个元素 nextSibling nextElementSibling
console.log(obj.parentNode)
console.log(obj.parentElement)console.log(obj.childNodes)
console.log(obj.children)console.log(obj.firstChild)
console.log(obj.firstElementChild)console.log(obj.lastChild)
console.log(obj.lastElementChild)console.log(obj.previousSibling)
console.log(obj.previousElementSibling)console.log(obj.nextSibling)
console.log(obj.nextElementSibling)二、修改元素
首先要获取元素
var bb = document.getElementById("bb");
var obj2 = document.getElementById("a0");
1、修改内容
innerText 当前修改的内容当作文本来处理
innerHTML 当前修改的内容当作标签来处理
区别与联系
innerText 直接呈现内容
innerHTML会解析标签，然后再呈现
当里面都是文本时（没有标签的话），两个呈现的一样
value 修改input的值（修改 用于收集用户信息的标签）
obj2.innerText =" <h1>新文本</h1>"
obj2.innerHTML =" <h1>新文本1</h1>"
bb.value = "请输入新文本"2、修改属性
原生属性 （对象自带的属性） 对象.属性=值
console.log(bb.id);
bb.id = 'cc';
bb.className = "dd";
操作自定义属性
获取自定义属性：getAttribute 方法，
console.log(obj2.getAttribute("xxxx")); // 打印出 99
设置自定义属性：setAttribute 方法，如果属性 eat 不存在，则会创建该属性并赋值为 "apple"
obj2.setAttribute("eat", "apple");
3、修改样式
通过单独设置样式属性 或 使用 cssText 一次性设置多个样式。
bb.style.background = 'red'; // 设置背景色为红色
bb.style.color = 'blue'; // 设置文字颜色为蓝色
bb.style.fontSize = '50px'; // 设置字体大小为 50px
等同于：语法与 CSS 写法相同，属性之间用分号分隔。
obj2.style.cssText = "background:red;color:blue;font-size:80px";
三、添加元素
有复制一个元素和重新创建元素两个途径添加元素。
createElement() 创建新元素：
语法：document.createElement(tagName)
var newNode = document.createElement("h1"); // 创建一个新的 h1 元素
newNode.innerText = "新添加的元素"; // 设置新元素的文本内容
newNode.className = "xixi"; // 添加 class 名
newNode.style.background = "purple"; // 设置背景色
cloneNode() 复制已有元素：
语法：node.cloneNode(deep)
deep参数：false（浅复制）：仅复制元素本身，不复制其子节点。true（深复制）：复制元素及其所有子节点。
var oldNode = document.querySelector("ul"); // 查找到要复制的 ul 元素
var newNode2 = oldNode.cloneNode(true); // 深复制 ul 及其子节点
appendChild() 添加到子元素末尾：将子节点添加到父节点的最后。
obj3.appendChild(newNode); // 将新创建的 h1 元素添加到 obj3 的子节点末尾
obj3.appendChild(newNode2); // 将复制的 ul 元素添加到 obj3
insertBefore() 插入到指定子节点前 ：
- 语法：
parentNode.insertBefore(newNode, referenceNode) - 在指定的子节点
referenceNode前插入新节点。
var h4 = document.querySelector("h4"); // 找到需要插入前的子节点
obj3.insertBefore(newNode, h4); // 将 newNode 插入到 h4 之前
replaceChild() 替换子节点 ：
- 语法：
parentNode.replaceChild(newNode, oldChild) - 用新节点替换指定的子节点。
obj3.replaceChild(newNode, h4); // 用 newNode 替换 h4 元素
四、删除元素
想删除一个元素 就去找它的父级元素,父级元素调用removeChild()
var obj4 = document.getElementById("sec")
var h4 = document.querySelector("h4") //要删除哪个
obj4.removeChild(h4) //元素的父级元素调用remove// h4.parentNode.removeChild(h4) 也可以关系查找 ref参考资料：
DOM操作指南-CSDN博客
JavaScriptDOM操作详解：获取、创建、修改与事件处理-CSDN博客
