自学内容网 自学内容网

CH15-DOM元素属性

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)!