CH15-DOM元素属性

🕗 发布于 2024-07-13 22:23 javascript ajax 前端

CH15-DOM

本章目标

了解DOM模型的概念和结构
掌握如何使用DOM获取元素
掌握如何使用DOM操作属性

一、DOM概述

1.1 什么是DOM？

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

1.2DOM的结构

DOM把文档视为一种树形结构，以树节点的方式表示文档中的各个内容通过

在这里插入图片描述

二、使用DOM获取html元素

2.1 getElementById()

getElementById()：通过 id 获取html 元素

例：点击“查看”按钮，显示文本框中输入的姓名

在这里插入图片描述

姓名:
<input type="text"  id="name"/>
<input type="button" value="查看" onclick="show()"/>

<script type="text/javascript">
function show()
{
//获得文本框对象
var a=document.getElementById("name");
//输出文本框对象的值
alert(a.value);
}
</script>

2.2 getElementsByClassName()

getElementsByClassName()：返回文档中所有指定类名的元素集合

例：点击更改按钮更改第一个元素的文本

点击前：

在这里插入图片描述

点击后：

在这里插入图片描述

<h1 class="title" >这是标题</h1>
<h1 class="title" >这是标题2</h1>
<input type="button" value="更改" onclick="show()"/>

<script type="text/javascript">
function show()
{
//获取指定的HTML类名的元素
var x=document.getElementsByClassName('title'); 
//更改第一个元素的文本
x[0].innerHTML="Hello World!";
}
</script>

2.3 getElementsByTagName()

getElementsByTagName()：通过标签名获得页面中的元素，返回一个数组

需求：查看input标签的个数

在这里插入图片描述

效果：

在这里插入图片描述

<form>
        <input type="text"  id="name"/>
        <input type="button" value="查看input标签的个数" onclick="fun()"/>
<form>
<script>
    function fun()
            {
                //通过标签名获得页面中的元素，返回一个数组
                var obj = document.getElementsByTagName("input");
                alert(obj.length);
            }
</script>

2.4 querySelector()

querySelector():获取HTML的元素

例：获取Html id的元素修改元素的文本

在这里插入图片描述

修改后：

在这里插入图片描述

<p id="demo">这是一个p标签</p>
<button onclick="myFunction()">点击我修改 id="demo" 的 p 元素内容</button>
<script>
    function myFunction() {
        //获取文档中的id="demo"的元素，进行文本的更改
        document.querySelector("#demo").innerHTML = "Hello World!";
    }
</script>

2.5 querySelectorAll()

querySelectorAll():返回文档中匹配指定 CSS 选择器的所有元素

例：获取所有的example元素修改第一个example元素的背景颜色

修改前：

在这里插入图片描述

修改后：

在这里插入图片描述

<h2 class="example">这是一个h2标题</h2>
<p class="example">这是一个p段落</p> 
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
        //获取css选择器中所有的example元素
    var x = document.querySelectorAll(".example");
        //将第一个example元素的背景颜色设置为红色
    x[0].style.backgroundColor = "red";
}
</script>

三、使用DOM操作属性

3.1 innerHTML

innerHTML：获取对象的内容或向对象插入内容

例：点击修改文本按钮修改html元素的文本

修改前：

在这里插入图片描述

修改后：

在这里插入图片描述

<p id="demo">p标签</p>
<input type="button" onclick="myFunction()" value="修改文本">
<script>
    function myFunction() {
        //通过id获取元素修改它的文本
        var x = document.getElementById('demo').innerHTML="这是一个段落";
    }
</script>

3.2 innerText

innerText：设置或返回指定节点及其所有子节点的文本内容

例：点击修改文本返回指定的纯文本信息

点击前：

在这里插入图片描述

点击后：

在这里插入图片描述

<p id="demo">p标签</p>
<input type="button" onclick="myFunction()" value="修改文本">
<script>
    function myFunction() {
        //通过id获取元素返回指定的纯文本信息，显示标签，但标签无效
        document.getElementById("demo").innerText="<h1>My First JavaScript</h1>";
    }
</script>

3.3 getAttribute

getAttribute：获取元素属性的值

例：获取html元素属性的样式

效果图：

在这里插入图片描述

<input type="text" id="btn" style="background-color:aqua;"> 
<input type="button" onclick="myFunction()" value="查看">
<script>
   function myFunction() {
       //通过id获取元素的属性(要获取的属性有双引号)
       alert(document.getElementById("btn").getAttribute("style"));
   }
</script>

3.4 setAttribute

setAttribute：设置元素的属性

例：设置红盒子的Html属性值

效果图：

在这里插入图片描述

<div id="red">红盒子</div>
<script>
    //获取红盒子的引用
var red = document.getElementById("red"); 
    //为红盒子对象设置title属性和值
    red.setAttribute("title", "这是红盒子");  
</script>

3.5 removeAttribute

removeAttribute：从指定元素中删除一个属性

例：获取span元素删除对应的样式

删除前：

在这里插入图片描述

删除后：

在这里插入图片描述

<span style="color:red">Hello World</span>
<button onclick="muFunction()">点我删除属性</button>
<script>
function muFunction(){
            //获取span元素删除样式
            document.getElementsByTagName("span")[0].removeAttribute("style"); 
     } 
</script>

3.6 style

style：设置样式

例：设置字体颜色为蓝色

在这里插入图片描述

<form>
<p id="p">Hello World!</p> 
<input  type="button" value="字体颜色"  onclick="fun()" />
</form>
<script type= "text/javascript">
    function fun(){
        //通过id获取元素设置它的字体颜色为蓝色
    document.getElementById("p").style.color="blue"; 
    }
</script>

3.7 className

className：设置或返回元素的 class 属性

需求：用户点击div区域时，修改div的样式

在这里插入图片描述

<style type="text/css">
.div1{
border:1px dashed red;
background-color:pink;
width:200px;
height:200px;
}
.div2{
border:1px dashed yellow;
background-color:blue;
width:300px;
height:300px;
}
</style>
<div class="div1" onclick="change();"  id="div"></div>
  
<script type="text/javascript">
function change()
{
var d = document.getElementById("div");
d.className = "div2";
}
</script>

注：使用className一次修改多个css样式时,必须先将对应的样式通过类选择器编辑好

例：用户点击div区域时，修改div的样式，再次点击时，修改回原来的样式

<script type="text/javascript">
function change()
{
var d = document.getElementById("div");
if(d.className=="div1")
{
d.className = "div2";
}
else
 {
d.className="div1"
}
}
</script>

四、课后作业

练习1：使用 HTML DOM 更改图像 src 属性的值。

<img id="image" src="a.gif"/>

练习2：点击删除按钮删除图片

在这里插入图片描述

练习3：点击替换按钮进行图片替换

在这里插入图片描述

练习4：关闭广告

在这里插入图片描述

练习5：开关灯效果如下：

关灯：

在这里插入图片描述

开灯：

在这里插入图片描述

原文地址：https://blog.csdn.net/m0_37631902/article/details/140400602

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【软件测试】 1+X初级功能测试试题
下一篇：220V降5V芯片输出电压电流封装选型WT

leetcode289:生命游戏
根据，简称为，是英国数学家约翰·何顿·康威在 1970 年发明的细胞自动机。给定一个包含m × n个格子的面板，每一个格子都可以看成是一个细胞。每个细胞都具有一个初始状态：1即为（live），或0即为
阅读更多2024-10-20
MongoDB数据恢复
注意：两个MongoDB的版本要一致，本文使用的是mongo:4.2.24。先把K8S上面的MongoDB 容器停止（可以把副本改成0）。1、将容器挂载MongoDB的数据目录备份到本地。经常是数据文
阅读更多2024-10-20
C#中实现事务
C#中实现事务
阅读更多2024-10-20
【LeetCode每日一题】——560.和为 K 的子数组
给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列。
阅读更多2024-10-20
「漏洞复现」满客宝智慧食堂系统 selectUserByOrgId 未授权访问漏洞
请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失，均由使用者本人负责，作者不为此承担任何责任。工具来自网络，安全性自测，如有侵权请联系删除。本次
阅读更多2024-10-20
React面试题目（从基本到高级）
React前端面试常见题目涵盖了React的基础概念、组件、状态管理、生命周期、性能优化等多个方面。
阅读更多2024-10-20
12.个人博客系统（Java项目基于spring和vue）
1 在校学习的学生，可用于日常学习使用或是毕业设计使用 2 毕业一到两年的开发人员，用于锻炼自己的独立功能模块设计能力，增强代码编写能力。 3 亦可以部署为商化项目使用。 4 需要完整资料及源码
阅读更多2024-10-20
YoloV8改进策略：注意力改进|DeBiFormer，可变形双级路由注意力|引入DeBiLevelRoutingAttention注意力模块（全网首发）
本次改进的核心在于将DeBiLevelRoutingAttention模块嵌入到YoloV8的主干网络中，具体位置是在SPPF（Spatial Pyramid Pooling Fast）模块之后。这一
阅读更多2024-10-20
word取消自动单词首字母大写
情况说明：在word输入单词后首字母会自动变成大写取消单词首字母大写步骤：（1）点击菜单栏文件（2）点击“更多”——>“选项”（3）点击“校对”——>“自动更正选项”（4）取消“句首字母大
阅读更多2024-10-20
web前端网页用户注册页面
【代码】web前端网页用户注册页面。
阅读更多2024-10-20

CH15-DOM元素属性

CH15-DOM

本章目标

一、DOM概述

1.1 什么是DOM？

1.2DOM的结构

二、使用DOM获取html元素

2.1 getElementById()

2.2 getElementsByClassName()

2.3 getElementsByTagName()

2.4 querySelector()

2.5 querySelectorAll()

三、使用DOM操作属性

3.1 innerHTML

3.2 innerText

3.3 getAttribute

3.4 setAttribute

3.5 removeAttribute

3.6 style

3.7 className

四、课后作业

相关文章