前端【7】javascript-dom操作

news/2025/1/23 3:52:33/

 

目录

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 末尾

javascript"><!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 尚未生成的问题。

javascript"><!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 确保脚本在页面内容加载完成后再执行。这种方式对内嵌和外部脚本都有效。

javascript"><!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值最好不重复设置，可以通过 . 来访问其具有的属性。

javascript">var obj1 = document.getElementById('first')
console.log(obj1)

         这样我们就获取到对象obj1了，进而可对其进行我们想要的操作，这里举例点击obj1对象的背景颜色随机改变：

javascript">//进行操作-
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值查找，找到所有符合条件的对象组成的数组，注意访问的时候需要用下标

javascript">var arr = document.getElementsByClassName("aaa")

 对其进行操作：鼠标点击第i个对象时触发弹框

javascript">for(var i=0;i<arr.length;i++) {arr[i].onclick =function()
{alert(1)//鼠标点击第i个对象时触发弹框
}
}

 

操作2：随机改变颜色，这里注意this的使用 ----绑定事件和执行事件不在同一时刻

javascript">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

        根据元素名称查找：找到所有符合条件的对象组成的数组

javascript">var arr = document.getElementsByTagName("div")

4、querySelector和querySelectorALL

        根据元素选择器querySelector查找，获取符合条件的第一个对象

javascript">document.querySelector('.aa')//和css选择器一样

根据元素选择器querySelectorALL查找，获取符合条件的所有对象组成的数组 

javascript">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

javascript">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)

二、修改元素

首先要获取元素

javascript">var bb = document.getElementById("bb");
var obj2 = document.getElementById("a0");

1、修改内容

innerText 当前修改的内容当作文本来处理
innerHTML 当前修改的内容当作标签来处理
区别与联系
innerText 直接呈现内容
innerHTML会解析标签，然后再呈现
当里面都是文本时（没有标签的话），两个呈现的一样

value 修改input的值（修改 用于收集用户信息的标签）

javascript">obj2.innerText =" <h1>新文本</h1>" 
obj2.innerHTML =" <h1>新文本1</h1>"
bb.value = "请输入新文本"

2、修改属性

原生属性 （对象自带的属性） 对象.属性=值

javascript">console.log(bb.id);
bb.id = 'cc';
bb.className = "dd";

操作自定义属性 

获取自定义属性：getAttribute 方法，

javascript">console.log(obj2.getAttribute("xxxx")); // 打印出 99

设置自定义属性：setAttribute 方法，如果属性 eat 不存在，则会创建该属性并赋值为 "apple"

javascript">obj2.setAttribute("eat", "apple");

3、修改样式

通过单独设置样式属性  或  使用 cssText 一次性设置多个样式。

javascript">bb.style.background = 'red'; // 设置背景色为红色
bb.style.color = 'blue'; // 设置文字颜色为蓝色
bb.style.fontSize = '50px'; // 设置字体大小为 50px

等同于：语法与 CSS 写法相同，属性之间用分号分隔。 

javascript">obj2.style.cssText = "background:red;color:blue;font-size:80px";

三、添加元素

有复制一个元素和重新创建元素两个途径添加元素。

createElement() 创建新元素：

语法：document.createElement(tagName)

javascript">var newNode = document.createElement("h1"); // 创建一个新的 h1 元素
newNode.innerText = "新添加的元素"; // 设置新元素的文本内容
newNode.className = "xixi"; // 添加 class 名
newNode.style.background = "purple"; // 设置背景色

cloneNode() 复制已有元素：

语法：node.cloneNode(deep)

  • deep 参数：
    • false（浅复制）：仅复制元素本身，不复制其子节点。
    • true（深复制）：复制元素及其所有子节点。
javascript">var oldNode = document.querySelector("ul"); // 查找到要复制的 ul 元素
var newNode2 = oldNode.cloneNode(true); // 深复制 ul 及其子节点

 appendChild() 添加到子元素末尾：将子节点添加到父节点的最后。

javascript">obj3.appendChild(newNode); // 将新创建的 h1 元素添加到 obj3 的子节点末尾
obj3.appendChild(newNode2); // 将复制的 ul 元素添加到 obj3

insertBefore() 插入到指定子节点前 ：

  • 语法：parentNode.insertBefore(newNode, referenceNode)
  • 在指定的子节点 referenceNode 前插入新节点。
javascript">var h4 = document.querySelector("h4"); // 找到需要插入前的子节点
obj3.insertBefore(newNode, h4); // 将 newNode 插入到 h4 之前

replaceChild() 替换子节点 ：

  • 语法：parentNode.replaceChild(newNode, oldChild)
  • 用新节点替换指定的子节点。
javascript">obj3.replaceChild(newNode, h4); // 用 newNode 替换 h4 元素

四、删除元素

想删除一个元素 就去找它的父级元素,父级元素调用removeChild()

javascript">
var obj4 = document.getElementById("sec")
var h4 = document.querySelector("h4") //要删除哪个
obj4.removeChild(h4) //元素的父级元素调用remove// h4.parentNode.removeChild(h4)  也可以关系查找

ref参考资料：

DOM操作指南-CSDN博客

JavaScriptDOM操作详解：获取、创建、修改与事件处理-CSDN博客


http://www.ppmy.cn/news/1565381.html

相关文章

AI绘画入门：探索数字艺术新世界（1/10）

AI绘画入门：探索数字艺术新世界（1/10）

引言&#xff1a;AI 绘画的兴起与现状 在科技飞速发展的当下&#xff0c;AI 绘画如同一场艺术领域的风暴&#xff0c;正以惊人的速度席卷而来&#xff0c;彻底改变着我们对艺术创作的认知。近年来&#xff0c;AI 绘画相关的话题屡屡登上热搜&#xff0c;从社交媒体上各种 AI 生…
阅读更多...
vulnhub靶场【jangow】靶机，考察反弹shell的流量及端口的选择

vulnhub靶场【jangow】靶机，考察反弹shell的流量及端口的选择

前言 靶机&#xff1a;jangow&#xff0c;IP地址为192.168.10.9 攻击&#xff1a;kali&#xff0c;IP地址为192.168.10.2 都采用虚拟机&#xff0c;网卡为桥接模式 该靶机目前只剩下一个了&#xff0c;之前记得是有两台构成系列的。 文章中涉及的靶机&#xff0c;来源于vul…
阅读更多...
HTML 文本格式化详解

HTML 文本格式化详解

在网页开发中&#xff0c;文本内容的呈现方式直接影响用户的阅读体验。HTML 提供了多种文本格式化元素&#xff0c;可以帮助我们更好地控制文本的显示效果。本文将详细介绍 HTML 中的文本格式化元素及其使用方法&#xff0c;帮助你轻松实现网页文本的美化。 什么是 HTML 文本格…
阅读更多...
【Linux】网络层

【Linux】网络层

目录 IP协议 协议头格式 网段划分 2中网段划分的方式 为什么要进行网段划分 特殊的IP地址 IP地址的数量限制 私有IP地址和公有IP地址 路由 IP协议 在通信时&#xff0c;主机B要把数据要给主机C&#xff0c;一定要经过一条路径选择&#xff0c;为什么经过路由器G后&…
阅读更多...
Pandas 数据分析（二）【股票数据】

Pandas 数据分析（二）【股票数据】

股票数据分析 写在前面题目背景021 加载股票数据到CSV文件022 查看基本信息和数据统计023 更改索引列为普通数据列024 给数据添加月份和年份025 计算每年的平均收盘价026 找到收盘价最低的数据行027 筛选出部分数据列028 设置日期列为索引列029 删除不需要的数据列030 对数据列…
阅读更多...
Docker【实用教程】2025最新版

Docker【实用教程】2025最新版

官网 https://www.docker.com/ windows 下载安装 Docker 桌面版 打开官网 https://www.docker.com/&#xff0c;下载对应的桌面端 下载后双击打开&#xff0c;按默认配置安装即可。 linux 下载安装 Docker curl -fsSL https://get.docker.com -o get-docker.shsh get-docker.sh…
阅读更多...
Oracle数据库传统审计怎么用

Oracle数据库传统审计怎么用

Oracle数据库传统审计怎么用 审计功能开启与关闭By Session还是By AccessWhenever Successful数据库语句审计数据库对象审计查看审计策略和记录Oracle数据库审计功能分为传统审计（Traditional Auditing）和统一审计（Unified Auditing）。统一审计是从Oracle 12c版本开始引入的…
阅读更多...
记一次线上SQL死锁事故：如何避免死锁？

记一次线上SQL死锁事故：如何避免死锁？

背景 之前我参与过一个项目&#xff0c;在项目初期&#xff0c;我们是没有将读写表分离的&#xff0c;而是基于一个主库完成 读写操作。在业务量逐渐增大的时候&#xff0c;我们偶尔会收到系统的异常报警信息&#xff0c;DBA 通知我 们数据库出现了死锁异常。 按理说业务开始…
阅读更多...
最新文章

Copyright @ 2022~2023