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="javascript language-javascript">show()"/>
<script type="text/javascript">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="javascript language-javascript">show()"/>
<script type="text/javascript">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="javascript language-javascript">fun()"/>
<form>
<script>javascript">
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="javascript language-javascript">myFunction()">点击我修改 id="demo" 的 p 元素内容</button>
<script>javascript">
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="javascript language-javascript">myFunction()">点我</button>
<script>javascript">
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="javascript language-javascript">myFunction()" value="修改文本">
<script>javascript">
function myFunction() {
//通过id获取元素修改它的文本
var x = document.getElementById('demo').innerHTML="这是一个段落";
}
</script>
3.2 innerText
innerText：设置或返回指定节点及其所有子节点的文本内容
例：点击修改文本 返回指定的纯文本信息
点击前：
点击后：
<p id="demo">p标签</p>
<input type="button" onclick="javascript language-javascript">myFunction()" value="修改文本">
<script>javascript">
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="javascript language-javascript">myFunction()" value="查看">
<script>javascript">
function myFunction() {
//通过id获取元素的属性(要获取的属性有双引号)
alert(document.getElementById("btn").getAttribute("style"));
}
</script>
3.4 setAttribute
setAttribute：设置元素的属性
例：设置红盒子的Html属性值
效果图：
<div id="red">红盒子</div>
<script>javascript">
//获取红盒子的引用
var red = document.getElementById("red");
//为红盒子对象设置title属性和值
red.setAttribute("title", "这是红盒子");
</script>
3.5 removeAttribute
removeAttribute：从指定元素中删除一个属性
例：获取span元素删除对应的样式
删除前：
删除后：
<span style="color:red">Hello World</span>
<button onclick="javascript language-javascript">muFunction()">点我删除属性</button>
<script>javascript">
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="javascript language-javascript">fun()" />
</form>
<script type= "text/javascript">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="javascript language-javascript">change();" id="div"></div>
<script type="text/javascript">javascript">
function change()
{
var d = document.getElementById("div");
d.className = "div2";
}
</script>
注：使用className一次修改多个css样式时,必须先将对应的样式通过类选择器编辑好
例：用户点击div区域时，修改div的样式，再次点击时，修改回原来的样式
<script type="text/javascript">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：开关灯 效果如下：
关灯：
开灯：
