详解DOM编程

news2025/1/12 18:09:51

华子目录

  • DOM操作
    • Document对象
      • document对象属性
      • 属性
      • 示例
      • document对象方法
      • 示例
      • DOM对象节点
  • 操作网页元素分为两步:
    • DOM元素的选中方式
    • DOM操作文本内容
    • DOM操作对象属性
    • DOM操作元素样式

DOM操作

学习网址

  • DOM学习： http://c.biancheng.net/view/9360.html

  • 交互事件学习： https://www.runoob.com/jsref/dom-obj-event.html

  • DOM（Document Object Model）：文档对象编程，针对 HTML和 XML文档的 API（应用程序接口）。主要是JavaScript对浏览器上页面进行对象化，将HTML页面上的每个标签化作一个对象，整个文档属于一个DOM树。
    在这里插入图片描述

Document对象

  • document对象就是window对象的子对象，主要代指的就是浏览器的可见部分（页面主体），
  • 因为页面是客户最终要看到的结果，所以DOM编程就显得尤为重要了。
  • 当浏览器加载一个 HTML 文档时，会创建一个 Document对象，Document对象是 DOM树中所有节点的根节点。通过 Document 对象我们可以访问 HTML 文档中的所有元素。
  • 提示：Document 对象是 Window 对象的一部分，所以您可以通过 window.document 来访问 Document 对象。

document对象属性

在JavaScript中，document 对象代表了整个HTML文档，并提供了对文档内容、结构和样式进行访问和修改的接口。document 对象包含了许多属性和方法，以下是一些常见的 document 对象属性：

属性

  1. documentElement

    • 返回文档中的根元素（通常是 <html> 元素）。

  2. URL（只读）

    • 返回当前文档的完整URL。

  3. domain

    • 返回当前文档的域名。出于安全原因，某些浏览器可能限制或修改此属性的值。

  4. referrer（只读）

    • 返回加载当前文档的文档的URL。如果当前文档不是由其他文档引用的，则此属性为空字符串。

  5. title

    • 返回或设置文档的标题（即 <title> 元素中的文本）。

  6. body

    • 返回文档的 <body> 元素或 null（如果文档中没有 <body> 元素）。

  7. head

    • 返回文档的 <head> 元素或 null（如果文档中没有 <head> 元素）。

  8. documentElement

    • 返回文档的根元素，通常是 <html> 元素。

  9. lastModified（只读）

    • 返回文档最后修改的日期和时间（字符串格式）。

  10. charset

    • 返回文档的字符编码。

  11. characterSet

    • 与 charset 相同，返回文档的字符编码。

  12. doctype

    • 返回与文档关联的文档类型声明（Document Type Declaration, DOCTYPE）或 null（如果文档没有DOCTYPE）。

  13. cookie

    • 返回文档相关的cookie。对于设置cookie，通常使用 document.cookie = "key=value; expires=date; path=path; domain=domain; secure"。

  14. forms

    • 返回一个 HTMLCollection，它包含了文档中所有的 <form> 元素。

  15. images

    • 返回一个 HTMLCollection，它包含了文档中所有的 <img> 元素。

  16. links

    • 返回一个 HTMLCollection，它包含了文档中所有的 <a> 和 <area> 元素，这些元素具有 href 属性。

  17. scripts

    • 返回一个 HTMLCollection，它包含了文档中所有的 <script> 元素。

  18. styleSheets

    • 返回一个 StyleSheetList，它包含了文档中所有的样式表。

  19. fullscreenEnabled（只读）

    • 返回一个布尔值，表示浏览器是否支持全屏API（如果浏览器支持且用户允许，则页面可以进入全屏模式）。

  20. compatMode（只读）

    • 返回文档的渲染模式，可以是 “BackCompat”（向后兼容模式）或 “CSS1Compat”（标准模式）。

示例

  1. 获取文档标题：
console.log(document.title);
  1. 设置文档标题：
document.title = "新的页面标题";
  1. 获取所有表单元素：
var forms = document.forms;
for (var i = 0; i < forms.length; i++) {
    console.log(forms[i].name);
}

请注意，document 对象还包含了许多用于操作文档内容、结构和样式的方法，如 createElement(), appendChild(), getElementById(), getElementsByClassName(), getElementsByTagName(), 等等。

在这里插入图片描述

document对象方法

document 对象在 JavaScript 中提供了许多用于操作 HTML 文档内容、结构和样式的方法。以下是一些常见的 document 对象方法：

  1. getElementById(id)

    • 返回对拥有指定 ID 的第一个对象的引用。

  2. getElementsByClassName(name)

    • 返回文档中所有具有指定类名的元素的集合，作为 NodeList 对象。

  3. getElementsByTagName(name)

    • 返回文档中所有具有指定标签名的元素的集合，作为 HTMLCollection 对象。

  4. getElementsByName()

    • 返回带有指定名称的对象集合。

  5. createElement(tagName)

    • 创建一个新的元素节点，元素类型由参数指定。

  6. createTextNode(data)

    • 创建一个新的文本节点，文本内容由参数指定。

  7. createAttribute()

    • 创建一个属性节点

  8. activeElement

    • 返回当前获取焦点元素

  9. addEventListener()

    • 向文档添加监听事件

  10. appendChild(node)

  • 将一个节点添加到指定父节点的子节点列表的末尾。
  1. removeChild(node)
  • 从子节点列表中删除指定的子节点。
  1. replaceChild(newNode, oldNode)
  • 替换子节点列表中的某个子节点。
  1. insertBefore(newNode, referenceNode)
  • 在指定的参考节点之前插入新的子节点。

  1. hasFocus()

    • 如果文档有焦点，则返回 true；否则返回 false。

  2. execCommand(commandId, showUI, value)

    • 在当前文档上执行命令，如编辑命令（如剪切、复制、粘贴等）。请注意，execCommand 方法在现代浏览器中可能不再被支持或具有限制的使用场景。

  3. querySelector(selector)

    • 返回文档中匹配指定 CSS 选择器的第一个 Element 元素。如果没有找到匹配的元素，则返回 null。

  4. querySelectorAll(selector)

    • 返回文档中匹配指定 CSS 选择器的所有 Element 元素的 NodeList（静态的）。

  5. addEventListener(type, listener[, options])

    • 向指定元素添加事件句柄。

  6. removeEventListener(type, listener[, options])

    • 从指定元素中删除之前添加的事件句柄。

  7. write(htmlExpr)

    • 向 HTML 输出流写内容。此方法主要用于动态生成 HTML 内容，但通常不推荐在文档加载完成后使用，因为它会覆盖整个页面内容。

  8. writeln(htmlExpr)

    • 与 write() 类似，但会在输出内容的末尾添加一个换行符。

  9. open(url, name[, features[, replace]])

    • 打开一个新的浏览器窗口或一个新的标签页，具体取决于浏览器和参数设置。此方法通常与 write() 和 close() 一起使用来动态加载新页面。

  10. close()

    • 关闭由 document.open() 方法打开的输出流，并显示选定的内容。

  11. scrollTo(x-coord, y-coord)

    • 滚动当前窗口到指定的坐标。

  12. scrollBy(x-coord, y-coord)

    • 滚动当前窗口，基于当前滚动位置滚动指定的偏移量。

  13. scrollToView(element)

    • 滚动页面到指定的元素，使其可见。注意，此方法在标准 HTML 中并不存在，但某些浏览器可能提供了类似的方法或扩展。

示例

  1. 创建并添加一个新元素：
var newElement = document.createElement("div"); // 创建一个新的 div 元素
newElement.innerHTML = "Hello, world!"; // 设置元素的内容
document.body.appendChild(newElement); // 将新元素添加到 body 的子节点列表的末尾
  1. 获取并修改所有具有特定类名的元素：
var elements = document.getElementsByClassName("myClass");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = "red"; // 修改所有元素的文本颜色为红色
}
  1. 使用 addEventListener 添加事件监听器：
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

这些方法允许你以编程方式操作 HTML 文档，从简单的元素创建和修改到复杂的事件处理和交互。

  • 方法中：获取DOM对象的方法6个方法必须掌握。创建标签和属性的方法也必须掌握。

在这里插入图片描述

DOM对象节点

  • 节点 node 可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType 和 nodeValue
document.getElementById('box').nodeType // 1表示元素节点
  • 节点的层次结构可以划分为： 父节点与子节点 、 兄弟节点 这三种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点

在这里插入图片描述

操作网页元素分为两步:

1.找出元素
2.对应的元素实施操作

DOM元素的选中方式

Element -- 元素
函数语法基本都是小驼峰
1.通过id获取元素
	document.getElementById() 
2.通过class获取元素
	document.getElementsByClassName() 
3.通过标签名获取元素
	document.getElementsByTagName()

获取的元素默认值为HTMLCollection 类似于数组 但是他不是数组
	同:数据都有下标的概念/数据可以被遍历
	异:他不可以使用数组方法
基于这个原因 如果直接对伪数组进行dom操作都是无效 我们要操作的不是这个伪数组 而是这个伪数组里的元素 所以要添加下标来访问对应的元素

DOM操作文本内容

  • DOM中，当我们获取DOM对象后，有可能需要修改DOM对象的内容，那么有如下三种方式：

    • innerText【非W3C标准】
    • textContent【W3C标准】
    • innerHTML 【慎用】 XSS攻击

  • innerHTML插入的子元素会解析HTML标签，innerText和textContent不会解析标签，只是将内容当成文本插入。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="box">多喝岩浆</div>

    <div class="water">123</div>
    <div class="water">456</div>
    <div class="water">789</div>

    <p>罗普</p>
    <p>婷婷</p>
    <p>吴昊</p>

    <script>
        //通过id获取元素
        let box = document.getElementById('box')
        box.innerText = '多喝热水' //修改元素的文本内容
        console.log(box, typeof box)
        console.log(box.innerText)// 查看元素的文本内容

        //通过class获取元素
        let water = document.getElementsByClassName('water')
        console.log(water, typeof water) //伪数组
        // water.innerText = '早上好'
        // water[0].innerText = '早上好'
        // water[1].innerText = '中午好'
        // water[2].innerText = '晚上好'

        for (let i = 0; i < water.length; i++) {
            water[i].innerText = `要多喝热水 这是第${i}杯`
        }

        //通过标签名获取元素
        let p = document.getElementsByTagName('p')[1]
        //取标签元素的时候 就指定 我要取的是下标为1的元素而不是全部
        p.innerText='小概率'
        // p[1].innerText='小概率'

    </script>
</body>

</html>

DOM操作对象属性

常见的DOM对象属性操作有三种方式：

  • DOM对象.属性名
  • DOM对象[属性名]
  • 调用系统API - getAttribute(属性名)、setAttribute(属性名, 属性值)
操作元素属性 --> 获取到元素后 ,通过元素名. 的方式进行操作
	元素名.属性名 //使用元素的属性
	元素名.属性名 = xxx // 修改元素属性
	
	元素名.title //设置/获取元素的标题
	元素名.src //设置/获取元素的资源路径
	元素名.className //设置/获取元素的类名

	//通过api接口函数获取和设置
	元素名.getAttribute(属性名)  //获取属性值
	元素名.setAttribute(属性名, 属性值)   //设置属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: #096;
        }
        .tt{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <img src="../img/2.jpg" alt="">

    <div class="box"></div>

    <script>
        let img = document.getElementsByTagName('img')[0]
        console.log(img.src) //查看img路径的位置

        img.src = '../img/3.jpg'

        let box = document.getElementsByClassName('box')[0]
        box.className = 'tt'
    </script>
</body>
</html>

DOM操作元素样式

获取样式的值

  • 元素名.style.样式名
操作元素样式(css) --> 获取元素后，通过元素名.style.样式名 的方式进行操作
	元素名.style.样式名 //访问该元素的css样式
	元素名.style.width // 访问元素的宽度样式
	
如果css的样式有(-)减号作为连接符 在用js写时候 不写链接符而是用小驼峰命名法
font-size --> fontSize
background-color --> backgroundColor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div id="hot">多喝岩浆</div>

    <script>
        let hot = document.getElementById('hot')
        hot.style.color = 'pink'
        hot.style.fontSize = '66px'

        let box = document.getElementsByClassName('box')[0]
        box.style.backgroundColor = '#096'
        box.style.border = '3px solid #ccc'

    </script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1656407.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

P8799 [蓝桥杯 2022 国 B] 齿轮

P8799 [蓝桥杯 2022 国 B] 齿轮

P8799 [蓝桥杯 2022 国 B] 齿轮 分析 最右边的齿轮的转速是最左边齿轮的q倍 最右边的齿轮的半径是最左边齿轮的q倍 题意即为&#xff1a;查询数组中是否存在两个数&#xff0c;其中一个是另一个的q倍 题目范围&#xff1a;查询次数q:2*10^5&#xff0c;数组范围2*10^5&…
阅读更多...
PyTorch中定义自己的数据集

PyTorch中定义自己的数据集

文章目录 1. 简介2. 查看PyTorch自带的数据集(可视化)3. 准备材料3.1 图片数据3.2 标签数据 4. 方法 1. 简介 尽管PyTorch提供了许多自带的数据集&#xff0c;如MNIST、CIFAR-10、ImageNet等&#xff0c;但它们对于没有经验的用户来说&#xff0c;理解数据加载器的工作原理以及…
阅读更多...
品牌舆情监测工作要怎么做？

品牌舆情监测工作要怎么做？

一个负面舆论的传播&#xff0c;可能在短时间内对企业品牌形象造成巨大损害&#xff0c;甚至引发舆情危机。因此&#xff0c;如何有效地进行品牌舆情监测&#xff0c;成为企业不可忽视的问题。伯乐网络传媒多年网络公关、舆情监测经验&#xff0c;今天就来给大家分享一下。 一、…
阅读更多...
wsl2安装rancher及导入k3s集群

wsl2安装rancher及导入k3s集群

环境准备 安装wsl2点击此文]ubuntu20.04安装docker 点击此文,安装完成后docker镜像仓库改成阿里云镜像加速地址.如果不熟请点击此文 docker 安装rancher 启动wsl,根据官方文档以root身份执行 sudo docker run -d --restartunless-stopped -p 80:80 -p 443:443 --privileged …
阅读更多...
Redis 支持的 Java 客户端都有哪些？

Redis 支持的 Java 客户端都有哪些？

Redis 是一种高性能的键值存储系统&#xff0c;它以其快速、灵活和可扩展的特性而闻名。在 Java 开发中&#xff0c;与 Redis 交互的方式通常是通过使用 Redis 的 Java 客户端。 这些客户端提供了访问 Redis 数据库的接口&#xff0c;使开发人员能够在 Java 应用程序中轻松地使…
阅读更多...
软件设计师（案例分析）

软件设计师（案例分析）

软件设计师 数据流图总结 数据库总结 面向对象分析 数据流图 做题方法&#xff1a; 第一题&#xff1a;找外部实体&#xff0c;这个实体可以是系统也可以是人&#xff0c;比如客户中介等。 第二题&#xff1a;数据存储&#xff0c;这个比较简单&#xff0c;根据加工就可以看出来…
阅读更多...
硬件知识积累 音频插座的了解，看音频插座的原理图来了解音频插座的引脚。

硬件知识积累 音频插座的了解，看音频插座的原理图来了解音频插座的引脚。

1. 音频接口 音频插座是一种用于连接音频信号线路的电子元件&#xff0c;常见于音频设备&#xff08;如音响、耳机、话筒等&#xff09;中。它的主要作用是将电子信号转化为声音信号&#xff0c;以满足人们对于音乐、电影、游戏等方面的需求。 根据插头形状的不同&#xff0c;音…
阅读更多...
通过编写dockerfile部署python项目

通过编写dockerfile部署python项目

docker命令总览 docker通过dockerfile构建镜像常用命令 # 创建镜像&#xff08;进入dockerfile所在的路径&#xff09; docker build -t my_image:1.0 .# 查看镜像 docker images# 创建容器 docker run -dit --restartalways -p 9700:9700 --name my_container my_image:1.0 #…
阅读更多...
跟随Facebook的足迹：社交媒体背后的探索之旅

跟随Facebook的足迹：社交媒体背后的探索之旅

在当今数字化时代&#xff0c;社交媒体已经成为了人们日常生活中不可或缺的一部分。而在这庞大的社交媒体网络中&#xff0c;Facebook作为其中的巨头&#xff0c;一直在引领着潮流。从创立之初的一个大学社交网络到如今的全球性平台&#xff0c;Facebook的发展历程承载了无数故…
阅读更多...
【LeetCode】链表oj专题

【LeetCode】链表oj专题

前言 经过前面的学习&#xff0c;咋们已经学完了链表相关知识&#xff0c;这时候不妨来几道链表算法题来巩固一下吧&#xff01; 如果有不懂的可翻阅之前文章哦&#xff01; 个人主页&#xff1a;小八哥向前冲~-CSDN博客 数据结构专栏&#xff1a;数据结构【c语言版】_小八哥…
阅读更多...
初学者必知：ARM与单片机的区别

初学者必知：ARM与单片机的区别

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「ARM的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;ARM和单片机之间有许多区别&#…
阅读更多...
使用Processing和PixelFlow库创建交互式流体太极动画

使用Processing和PixelFlow库创建交互式流体太极动画

使用Processing和PixelFlow库创建交互式流体太极动画 引言准备工作效果展示代码结构代码解析第一部分&#xff1a;导入库和设置基本参数第二部分&#xff1a;流体类定义MyFluidDataConfig 类详解MyFluidData 类详解my_update 方法详解流体类定义完整代码 第三部分&#xff1a;太…
阅读更多...
信创基础软件之中间件

信创基础软件之中间件

信创基础软件之中间件 中间件概述 中间件是一种应用于分布式系统的基础软件&#xff0c;位于应用与操作系统、数据库之间&#xff0c;主要用于解决分布式环境下数据传输、数据访问、应用调度、系统构建和系统集成、流程管理等问题&#xff0c;是分布式环境下支撑应用开发、运…
阅读更多...
深圳CPDA|如何利用数据分析改进业务流程，提高效率？

深圳CPDA|如何利用数据分析改进业务流程，提高效率？

在当今数字化时代&#xff0c;数据已经成为企业决策和优化的关键资源。通过有效地收集、分析和应用数据&#xff0c;企业可以深入了解其业务流程中的瓶颈和问题&#xff0c;从而改进流程&#xff0c;提高效率。本文将探讨如何利用数据分析改进业务流程&#xff0c;并提高效率。…
阅读更多...
FebHost：什么是.ME域名？

FebHost：什么是.ME域名？

.ME域名是一个独一无二且被广泛接受的顶级域名&#xff08;TLD&#xff09;&#xff0c;在近年来逐渐受到了大众的喜爱。最初&#xff0c;它被设定为黑山的国家/地区代码顶级域名&#xff08;ccTLD&#xff09;。但现在&#xff0c;.ME已经发展成为一个全球公认的顶级域名&…
阅读更多...
Python应用：让生活更智能

Python应用：让生活更智能

随着科技的进步&#xff0c;Python已成为一种非常受欢迎的编程语言&#xff0c;它在数据分析、人工智能、Web开发等领域有着广泛的应用。今天&#xff0c;我们将探讨一个Python应用的例子&#xff0c;这个应用将帮助我们更智能地管理日常生活。 应用名称&#xff1a;智能生活助…
阅读更多...
鸿蒙开发接口Ability框架：【@ohos.application.StartOptions (StartOptions)】

鸿蒙开发接口Ability框架：【@ohos.application.StartOptions (StartOptions)】

StartOptions StartOptions模块对系统的基本通信组件进行查询和设置的能力。 说明&#xff1a; 本模块首批接口从API version 9 开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 本模块接口仅可在Stage模型下使用。 开发前请熟悉鸿蒙开发指导文档…
阅读更多...
CentOS 重启网络失败service network restart

CentOS 重启网络失败service network restart

命令 service network restart 提示 Job for network.service failed because the control process exited with error code. See “systemctl status network.service” and “journalctl -xe” for details. 原因分析 使用journalctl -xe命令查看日志后的具体错误 -- Un…
阅读更多...
STM32单片机实战开发笔记-PWM波输出频率及占空比配置【wulianjishu666】

STM32单片机实战开发笔记-PWM波输出频率及占空比配置【wulianjishu666】

单片机物联网开发资料&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1XzodQuML7CqZ4ZKinDGKkg?pwdbgep 提取码&#xff1a;bgep PWM模块测试 功能描述 脉冲宽度调制模式&#xff1a; PWM边沿对齐模式&#xff1a; 向上计数配置 当TIMX_CR1寄存器中的DIR为低的时…
阅读更多...
AD3552/AD3551驱动开发

AD3552/AD3551驱动开发

开发环境&#xff1a;Vivado2021.2 ; Windows with Cygwin HDL版本&#xff1a;hdl_2021_r2 GitHub - analogdevicesinc/hdl at hdl_2021_r2 no-OS版本&#xff1a;no_OS-2021_R2 GitHub - analogdevicesinc/no-OS at 2021_R2 1.创建hdl 详细步骤参见参考链接1&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023