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>