DOM模型

news2024/12/29 9:22:47

文章目录

  • DOM模型
  • 获取DOM对象常用方法
    • 通过元素ID获取DOM对象
    • 通过元素标签名获取DOM对象
    • 通过元素的class属性获取DOM对象
    • 通过元素的name属性获取DOM对象
    • 通过CSS选择器获取所有DOM对象
    • 通过CSS选择器获取第一个DOM对象
  • 获取DOM对象时机
  • 操作DOM属性
    • 直接通过属性名修改属性
    • 使用getAttribute、setAttribute方法
    • 使用removeAttribute方法
  • 常用DOM对象属性
    • innerText 纯文本内容和 innerHTML html代码
    • style 样式
    • className 类样式
  • 遍历DOM数组

DOM模型

获取DOM对象常用方法

  1. 通过元素ID获取DOM对象：document.getElementById('元素ID')
  2. 通过元素标签名获取DOM对象：document.getElementsByTagName('标签名')
  3. 通过元素的class属性获取一组DOM对象document.getElementsByClassName('类名')
  4. 通过元素的name属性获取DOM对象document.getElementsByName('name值')
  5. 通过CSS选择器获取DOM对象：document.querySelector('选择器') 或 document.querySelectorAll('选择器')
  6. 通过父元素获取子元素DOM对象：父元素对象.children[index] 或 父元素对象.childNodes[index]
  7. 获取文本节点DOM对象：document.createTextNode('文本内容')

通过元素ID获取DOM对象

getElementById()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 通过元素ID获取DOM对象 -->
    <button onclick="getByID()">id</button>
    
    <p id="vip">你好，世界！</p>
</body>
<script>
    function getByID() {
        let d = document.getElementById('vip')
        console.log( d );
    }
</script>
</html>

输出结果：
在这里插入图片描述

通过元素标签名获取DOM对象

getElementsByTagName()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 通过元素标签名获取DOM对象 -->
    <button onclick="getTagName()">元素标签名</button>
    
    <h1>你好！</h1>
    <h1>世界！</h1>

</body>
<script>
    function getTagName() {
        let d = document.getElementsByTagName('h1')
        console.log( d );
    }
</script>
</html>

输出结果：
在这里插入图片描述

通过元素的class属性获取DOM对象

getElementsByClassName()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 通过元素的class属性获取DOM对象 -->
    <button onclick="getClassName()">元素的class属性</button>
    <a href="" class="abc">www</a>
    <span class="abc">aaaa</span>

</body>
<script>
    function getClassName() {
        let d = document.getElementsByClassName('abc')
        console.log( d );
    }
</script>
</html>

输出效果：
在这里插入图片描述

通过元素的name属性获取DOM对象

document.getElementsByName()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 通过元素的name属性获取DOM对象 -->
    <button onclick="getByName()">元素的name属性</button>
    <h1 name="xyz">张三</h2>
    <h3 name="xyz">李四</h2>
    <h6 name="xyz">王五</h2>

</body>
<script>
    function getByName() {
        let d = document.getElementsByName('xyz')
        console.log( d );
    }
</script>
</html>

输出结果：
在这里插入图片描述

通过CSS选择器获取所有DOM对象

document.querySelectorAll(‘选择器’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 通过CSS选择器获取所有DOM对象 -->
    <button onclick="SelectorAll()">SelectorAll</button>
    <div>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
    </div>
</body>
<script>
    function SelectorAll() {
        let d = document.querySelectorAll('div>p')
        console.log( d );
    }
</script>
</html>

输出结果：
在这里插入图片描述

通过CSS选择器获取第一个DOM对象

document.querySelector(‘选择器’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 通过CSS选择器获取第一个DOM对象 -->
    <button onclick="Selector()">Selector</button>
    <div>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
    </div>
</body>
<script>
    function Selector() {
        let d = document.querySelector('div>p')
        console.log( d );
    }
</script>
</html>

输出结果：
在这里插入图片描述

获取DOM对象时机

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="x">段落1</p>
</body>
    <script>
        let p = document.getElementById('x')
        console.log(p);
    </script>
</html>

输出结果：
在这里插入图片描述
上面的代码包含一个段落元素和一段嵌入的JavaScript脚本。该脚本使用了document对象的getElementById方法来获取具有id属性值为"x"的元素（即段落元素），并将其存储在变量p中，最后使用console.log方法打印出p变量的值。

在这个例子中，我们可以看到如何使用document对象的getElementById方法获取指定的DOM元素。该方法接受一个字符串参数，要获取元素的id属性值，返回一个DOM元素对象。我们可以将该对象存储在变量中，以便在后续的JavaScript代码中使用。

如果把script里面的内容放在head内：
输出null，因为运行时从上到下依次运行，在script标签内找不到x属性
在这里插入图片描述

操作DOM属性

操作DOM属性主要有三种方法：

  1. 使用点操作符

可以使用点操作符来访问DOM元素的属性，其中点操作符后面跟随属性名称。例如，要访问一个元素的id属性，可以使用以下语法：

let element = document.getElementById('myElement');
let id = element.id;
  1. 使用getAttribute方法

可以使用getAttribute方法来获取元素的任何属性（包括自定义属性）。例如，要获取一个元素的data-id属性，可以使用以下语法：

let element = document.getElementById('myElement');
let dataId = element.getAttribute('data-id');
  1. 直接设置属性值

可以直接设置DOM元素的属性值。例如，要将一个元素的class属性设置为"highlight"，可以使用以下语法：

let element = document.getElementById('myElement');
element.className = 'highlight';

需要注意的是，这种方法只适用于DOM元素的标准属性。对于自定义属性和一些非标准属性，可能需要使用setAttribue方法来设置属性值。

直接通过属性名修改属性

下面的代码包括一个按钮和一个段落元素，当点击按钮时，会触发f1()函数
该函数通过document.getElementById()获取id为’p’的段落元素，然后通过直接修改该元素的style.color属性值来将文字颜色设置为红色
最后当按钮被点击时，就会发生这个效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button onclick="f1()">直接通过属性名修改属性</button>
    <p id="p"> from 来自!</p>

</body>
<script>
    function f1(){
        let p = document.getElementById('p')
        p.style.color = 'red'
    }
</script>
</html>

输出结果：
在这里插入图片描述

使用getAttribute、setAttribute方法

获取属性方法和修改属性方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <button onclick="f1()">获取属性方法和修改属性方法</button><br><br>
    <img src="./喜洋洋.jpg" onclick="f1()" id="xiyangyang">
</body>
<script>
    function f1(){
        let img = document.getElementById('xiyangyang')
        let src = img.getAttribute('src') //按照指定的属性名获取属性值
        //console.log( src );
        if (src=='./喜洋洋.jpg') {
            img.setAttribute('src','./懒洋洋.jpg')  //修改指定的属性值
        } else {
            img.setAttribute('src','./喜洋洋.jpg')  //修改指定的属性值

        }
    }
</script>
</html>

输出结果：
请添加图片描述
上面的代码包括一个按钮和一张图片元素。当点击图片时，会触发f1()函数。该函数通过document.getElementById()获取id为’xiyangyang’的图片元素，然后通过getAttribute()方法获取该元素的src属性值。
如果src为’./喜洋洋.jpg’，则通过setAttribute()方法将该元素的src属性修改为’./懒洋洋.jpg’，反之则将src属性修改为’./喜洋洋.jpg’。这样就实现了图片的切换。

使用removeAttribute方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <input type="text" value="灰太狼：我一定会回来的" readonly id="abc">
    <button onclick="f1()">点我解锁</button>
</body>
<script>
    function f1(){
        let input = document.getElementById('abc')
        input.removeAttribute('readonly')
    }
</script>
</html>

输出结果：
请添加图片描述
在上面的代码中有一个文本输入框和一个按钮。文本框的value属性被设置为"灰太狼：我一定会回来的"，而且该文本输入框设置为只读，即用户无法编辑其内容。
当点击按钮时，会触发f1()函数。该函数通过document.getElementById()获取id为’abc’的文本输入框元素，然后通过removeAttribute()方法移除其readonly属性，使用户能够编辑该文本框的内容。

常用DOM对象属性

JavaScript中常用的DOM对象属性包括：

  1. innerHTML：获取或设置元素的HTML内容。
  2. innerText：获取或设置元素的纯文本内容。
  3. value：获取或设置表单元素的值。
  4. className：获取或设置元素的class属性。
  5. style：获取或设置元素的样式属性。
  6. id：获取或设置元素的唯一标识符。
  7. src：获取或设置图像或脚本的URL。
  8. href：获取或设置链接的URL。
  9. checked：获取或设置复选框或单选按钮的选中状态。
  10. disabled：获取或设置元素的禁用状态。
  11. tagName：获取元素的标签名称。

innerText 纯文本内容和 innerHTML html代码

innerText属性代表的是标记中间的纯文本内容
innerHTML属性代表的是标记中间的HTML代码

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button onclick="f1()">innerHTML</button>
    <div id="d">

    </div>
</body>
<script>
    function f1(){
        let div = document.getElementById('d')
        div.innerText='汤姆抓杰瑞'
    }
</script>
</html>

输出结果：
在这里插入图片描述
再来看下div.innerText改成div.innerHTML，会发现效果一样
因为后面的元素中都是纯文本内容，纯文本内容没有区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button onclick="f1()">inner</button>
    <div id="d">

    </div>
</body>
<script>
    function f1(){
        let div = document.getElementById('d')
        div.innerHTML='杰瑞被汤姆抓'
    }
</script>
</html>

输出结果：
在这里插入图片描述

由于上面的纯文本内容没有区别，那在下面innerHTML上加上一个h1标记

div.innerHTML='<h1>杰瑞被汤姆抓</h1>'

输出效果：
在这里插入图片描述
如果再次换成innerText，会发现：

div.innerText='<h1>杰瑞被汤姆抓</h1>'

在这里插入图片描述

style 样式

用于设置或获取DOM对象的style样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button onclick="f2()">inner</button>
    <button onclick="f1()">style</button>
    <div id="d">

    </div>
</body>
<script>
    function f1(){
        let div = document.getElementById('d')
        div.style.color='yellowgreen'
        div.style.fontSize='50px'
        div.style.border='solid black 2px'
    }
    function f2(){
        let div = document.getElementById('d')
        div.innerText='女主人看到了杰瑞'
    }
</script>
</html>

输出效果：
得先有inner内容，才能看到样式改变
请添加图片描述

className 类样式

className属性可以用来设置或获取DOM对象中指定一个或者多个类样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .abc{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <button onclick="f1()">className</button>
    <div id="d">

    </div>
</body>
<script>
    function f1(){
        let div = document.getElementById('d')
        div.className = 'abc'    
    }
</script>
</html>

在这里插入图片描述

遍历DOM数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>端午节</p>
    <p>吃粽子</p>
    <p>划龙舟</p>
    <button onclick="f1()">改变</button>
</body>
<script>
    function f1(){
        let arr = document.querySelectorAll('p')
        arr.forEach( (p) => {
            p.style.color='gold'
            p.style.fontSize='40px'
        } )
    }
</script>
</html>

输出结果：
请添加图片描述

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

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

相关文章

Qt中使用QXmlStreamReader读取xml文件中遇到的问题

Qt中使用QXmlStreamReader读取xml文件中遇到的问题

Qt系列文章目录 文章目录 Qt系列文章目录前言一、为什么xml.readElementText()是空的问题原因QXmlStreamReader类简介 前言 <?xml version"1.0" encoding"UTF-8"?> <note><yolov5>E:/work/python_jdk/yolov5/dist/detect/detect.exe&…
阅读更多...
终于有人把 Java 面试高分 Guide 总结得如此系统，堪称傻瓜式笔记总结

终于有人把 Java 面试高分 Guide 总结得如此系统，堪称傻瓜式笔记总结

纵观今年的技术招聘市场&#xff0c; Java 依旧是当仁不让的霸主 &#xff01;即便遭受 Go 等新兴语言不断冲击&#xff0c;依旧岿然不动。究其原因&#xff1a; Java 有着极其成熟的生态&#xff0c;这个不用我多说&#xff1b; Java 在 运维、可观测性、可监 控性方面都有着…
阅读更多...
OpenCV(图像颜色空间变换)

OpenCV(图像颜色空间变换)

目录 1、分类 1.1 RGB颜色模型 1.2 HSV颜色模型 1.3 GRAY颜色模型 2、图像数据类型间的相互转换 3 、颜色转换函数 1、分类 RGB\HSV\GRAY颜色模型。 1.1 RGB颜色模型 1.2 HSV颜色模型 1.3 GRAY颜色模型 2、图像数据类型间的相互转换 3 、颜色转换函数 第四个参数使用例子…
阅读更多...
60、使用MNN+DBNET进行二维码检测

60、使用MNN+DBNET进行二维码检测

基本思想&#xff1a;顺手转了个模型&#xff0c;可以方便进行条形码和对应的数字检测&#xff0c;以方便下一步进行条形码识别和ocr进行数字检测(这里只检测暂不识别&#xff0c;识别暂定下一篇) cmakelists.txt cmake_minimum_required(VERSION 3.16) project(untitled22) s…
阅读更多...
两台电脑之间传输文件——就近共享

两台电脑之间传输文件——就近共享

文章目录 背景步骤补充&#xff1a;跨设备共享 背景 两台电脑之间共享文件有很多种方式&#xff0c;这里介绍一种最简洁的——Windows自带的就近共享。它适合偶尔传输一些简单文件。比如把笔记本上的电子书传输到surface上阅读。 注意: 如果共享的电脑正在运行最新版本的Wind…
阅读更多...
js对象数组去重：

js对象数组去重：

目录 双层for循环&#xff1a; indexof()&#xff1a; map方法(推荐)&#xff1a; 双层for循环&#xff1a; ​ //双层for循环let arrObj [{name: "小红",id: 1},{name: "小橙",id: 1},{name: "小黄",id: 4},{name: "小绿",id: 3}…
阅读更多...
软件设计模式与体系结构-设计模式-结构型软件设计模式-组合模式

软件设计模式与体系结构-设计模式-结构型软件设计模式-组合模式

目录 结构型软件设计模式概述 一、组合模式动机组合模式结构实例一&#xff1a;五子棋游戏实例二&#xff1a;空军指挥系统关于组合模式的讨论1. 安全形式的组合模式2. 透明形式的组合模式优缺点适用环境 课程作业 结构型软件设计模式 概述 动机 结构型软件设计模式的主要目的…
阅读更多...
C++语言之 do-while 语句

C++语言之 do-while 语句

有时候&#xff0c;使用 while 语句会想要先执行一遍循环体&#xff0c;这就可以使用 do-while 语句。下面会介绍 do-whie 语句。 目录 1.格式 1.1 格式1 1.2 格式2 2.执行过程 3.例题 1.格式 如果主体中只有单个语句的话&#xff0c;花括号可以省略。&#xff08;如格式…
阅读更多...
Http host 标头攻击

Http host 标头攻击

一、什么是http host 标头攻击 HTTP Host 标头攻击是一种网络安全攻击技术&#xff0c;利用了 HTTP 协议中的 Host 标头字段的漏洞。Host 标头字段用于指定客户端请求的目标主机名或域名。 攻击者可以通过构造恶意的 HTTP 请求&#xff0c;伪造或篡改 Host 标头字段的值&#x…
阅读更多...
【Python从入门到进阶】urllib的异常处理

【Python从入门到进阶】urllib的异常处理

接上篇《25、urllib获取快餐网站店铺数据》 上一篇我们讲解了如何使用urllib的post请求抓取某某快餐网站店铺数据。本篇我们来讲解urllib的异常处理机制。 一、异常处理的重要性 在编程过程中&#xff0c;无论是与网络交互还是执行其他操作&#xff0c;都存在各种意外和错误可…
阅读更多...
阿里云外网无法访问Dcoker容器

阿里云外网无法访问Dcoker容器

应该是docker和linux网段冲突 1、路由策略开启转发 cat >> /etc/sysctl.conf <<EOF net.ipv4.ip_forward 1 net.bridge.bridge-nf-call-ip6tables 1 net.bridge.bridge-nf-call-iptables 1 net.bridge.bridge-nf-call-arptables 1 EOF sysctl -p 2、查看配置…
阅读更多...
spring boot security自定义认证

spring boot security自定义认证

前言 前置阅读 spring boot security快速使用示例 spring boot security之前后端分离配置 说明 实际场景&#xff0c;我们一般是把用户信息保存在db中&#xff08;也可能是调用三方接口&#xff09;&#xff0c;需要自定义用户信息加载或认证部分的逻辑&#xff0c;下面提供…
阅读更多...
第三章javascript类型,值和变量

第三章javascript类型,值和变量

第三章类型,值和变量 计算机程序通过操作值(数值3.14)或文本(如"hello world")来工作,编程语言中这些可以表示操作的值被称为类型,而一门语言支持的类型集支持的类型集也是这门语言最基本的特征. 程序在需要吧某个值保存下来以便将来使用时,会把这个值赋给(或存入)…
阅读更多...
UE4/5GeneratedDynamicMeshActor生成建模方块【更多建模的函数就等你自己去探索把，Append ...】

UE4/5GeneratedDynamicMeshActor生成建模方块【更多建模的函数就等你自己去探索把，Append ...】

目录 装备工作 逻辑制作&#xff1a; 之前我们讲了很多关于GeneratedDynamicMeshActor复制别的网格体的东西&#xff0c;以及替换到网格体里面&#xff0c;但会发现这样终究是没什么用&#xff0c;所以这里我们来讲解一下&#xff0c;不用其他的网格体让GeneratedDynamicMesh…
阅读更多...
Tuxera NTFS2023Mac标准版读写NTFS格式硬盘

Tuxera NTFS2023Mac标准版读写NTFS格式硬盘

NTFS是什么&#xff1f;这是微软随Windows系统开发的一种文件格式&#xff0c;专门为网络和磁盘配额、文件加密等管理安全特性设计。比起FAT格式&#xff0c;NTFS属于一种较为新型的磁盘格式。现在我们使用的u盘很大一部分都是NTFS格式。 那有小伙伴会询问&#xff0c;想在Mac系…
阅读更多...
SpringSecurity(三):自定义认证数据源(源码+落地实现)。

SpringSecurity(三):自定义认证数据源(源码+落地实现)。

自定义认证数据源 前言认证流程分析易混梳理AuthenticationManager 与 ProviderManagerProviderManager 与 AuthenticationProvider难点&#xff1a;为什么ProviderManager会有一个parent&#xff1f; 数据源的获取配置AuthenticationManager默认的全局 AuthenticationManager自…
阅读更多...
RabbitMQ：高效传递消息的魔法棒，一篇带你助力构建可靠的分布式系统（上篇）

RabbitMQ：高效传递消息的魔法棒，一篇带你助力构建可靠的分布式系统（上篇）

目录 一 什么是MQ1.1 MQ的概念1.2 MQ的流量消峰1.3 MQ的应用解耦1.4 MQ的异步处理1.5 MQ的分类以及如何选择1.5.1 ActiveMQ1.5.2 Apache Kafka1.5.3 RabbitMQ1.5.4 RocketMQ1.5.5 四种MQ的区别 1.6 MQ的核心概念1.6.1 MQ四大核心概念1.6.2 MQ六大核心部分 1.7 安装RabbitMQ 二.…
阅读更多...
5.3 Web服务器简介及HTTP协议

5.3 Web服务器简介及HTTP协议

5.3 Web服务器简介及HTTP协议 Web Server&#xff08;网页服务器&#xff09; 一个Web Server就是一个服务器软件&#xff08;程序&#xff09;&#xff0c;或者是运行这个服务器软件的硬件&#xff08;计算机&#xff09;。其主要功能是通过HTTP协议与客户端&#xff08;通常…
阅读更多...
【洛谷】B3643 图的存储（邻接矩阵+邻接表）

【洛谷】B3643 图的存储（邻接矩阵+邻接表）

思路简单&#xff0c;话不多说直接上ACcode(详细注释): ACcode:(安全饲用)&#xff1a; #include<bits/stdc.h> using namespace std; #define int long long const int N1e310; int mp[N][N],n,m; vector<int>v[N]; void fun1(){//邻接矩阵打印 for(int i1;i<…
阅读更多...
学成在线----项目优化

学成在线----项目优化

1、项目优化-redis缓存 2、缓存穿透 使用缓存后代码的性能有了很大的提高&#xff0c;虽然性能有很大的提升但是控制台打出了很多“从数据库查询”的日志&#xff0c;明明判断了如果缓存存在课程信息则从缓存查询&#xff0c;为什么要有这么多从数据库查询的请求的&#xff1f…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023