VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > Java教程 >
  • day06-JavaScript03

 

11.DOM

  • 官方文档:https://www.w3school.com.cn/js/js_htmldom.asp

  • 基本介绍:

  1. DOM全称是Document Object Model,文档对象模型

    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

    DOM就是一个编程接口,是针对HTML文档、XML等文档的一套API。类似于JDBC是针对数据库的一套API

  2. 就是把文档中的标签,属性,文本 转换为对象来管理

  3. dom的分类有许多种,通常所说的dom是html dom

image-20221101192820930

11.1HTML DOM-文档对象模型

  1. 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。(映射)

    这样做的好处是:对象可以有许多属性和方法,通过这些属性,方法/函数,对对象进行操作,从而反过来影响对象映射的标签的展示效果

  2. HTML DOM树:

image-20221101193804379

html文档被映射之后就变成了一个dom模型,可以直接在dom中进行编程,而dom模型的变化又会反过来影响展示的内容,但是html文档本身没有发生改变,在程序里的操作影响的是浏览器的内存。

总结:html文档本身是静态的,不会变化。程序影响的是dom树,dom树的改变又会反过来去改变浏览器页面的内容,它的整个变化是在内存里面的。

11.2Document对象

11.2.1document说明

  1. document 管理了所有的html文档内容
  2. document 它是一种树结构的文档
  3. 有层级关系,在dom中把所有的标签都对象化
  4. 通过 document 可以访问所有的标签对象

11.2.2document方法

https://www.w3school.com.cn/js/js_htmldom_document.asp

文档对象代表网页。如果希望访问 HTML 页面中的任何元素,总是从访问 document 对象开始,下面是一些使用 document 对象来访问和操作 HTML 的实例

image-20221101195026441

image-20221101195058715

image-20221101220606837

1.案例使用-getElementById

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

注意:动态绑定要先使用window.onload加载页面完毕,再获取标签的dom对象

应用实例


	
 
<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="UTF-8">
 
<title>getElementById的使用</title>
 
<script type="text/javascript">
 
//1.先得到h1的dom对象
 
//2.对h1对象的dom对象操作即可
 
//静态绑定
 
function getValue() {
 
var myHeader = document.getElementById("myHeader");
 
//alert(myHeader);//[object HTMLHeadingElement]
 
//myHeader.innerText 的意思是:获取到myHeader包含的文本
 
alert(myHeader.innerText);//文本-是兄弟就来点我
 
alert(myHeader.innerHTML);//html-<div>是兄弟就来点我</div>
 
}
 
 
 
//动态绑定
 
window.onload = function () {
 
//先得到h1的dom对象
 
var myHeader = document.getElementById("myHeader");
 
//给myHeader绑定onclick事件
 
myHeader.onclick = function () {
 
alert("动态绑定 内容是=" + myHeader.innerText);//文本-是兄弟就来点我
 
}
 
}
 
</script>
 
</head>
 
<body>
 
<!--静态绑定一个点击事件 onclick="getValue()"-->
 
<h1 id="myHeader">
 
<div>是兄弟就来点我</div>
 
</h1>
 
<p>Click on the header to alter its value</p>
 
</body>
 
</html>

image-20221101202019816 image-20221101202027754

2.案例2-getElementsByName

getElementsByName() 方法可返回带有指定名称的对象的集合

应用实例:完成多选框案例

image-20221101202312333

思路:所有的html标签都被映射成对象,而标签里的属性如name,value,checked也是对象的属性,可以直接通过对象来操作。


	
 
<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="UTF-8">
 
<title>getElementsByName 使用</title>
 
<script type="text/javascript">
 
//完成全选
 
function selectAll() {
 
//1.获取到sport这一组复选框
 
var sports = document.getElementsByName("sport");
 
//sports是一个NodeList集合
 
//alert(sports);//[object NodeList]
 
//2.操作sports的dom文档对象
 
//遍历sports,然后修改
 
for (var i = 0; i < sports.length; i++) {
 
//所有的html标签都被映射成对象,而标签里的属性如name,value,checked也是对象的属性,
 
//可以直接通过对象来操作
 
sports[i].checked = true;//选中
 
}
 
}
 
 
 
//全不选
 
function selectNone() {
 
//1.获取到sport这一组复选框
 
var sports = document.getElementsByName("sport");
 
//2.操作sports的dom文档对象
 
//遍历sports,然后修改
 
for (var i = 0; i < sports.length; i++) {
 
sports[i].checked = false;//不选
 
}
 
}
 
 
 
//反选
 
function selectReverse() {
 
//1.获取到sport这一组复选框
 
var sports = document.getElementsByName("sport");
 
//2.操作sports的dom文档对象
 
//遍历sports,然后修改
 
for (var i = 0; i < sports.length; i++) {
 
// if (sports[i].checked) {
 
// sports[i].checked = false;
 
// } else {
 
// sports[i].checked = true;
 
// }
 
sports[i].checked = !sports[i].checked;
 
}
 
}
 
 
 
</script>
 
</head>
 
<body>
 
你会的运动项目:
 
<input type="checkbox" name="sport" value="zq" checked>足球
 
<input type="checkbox" name="sport" value="tq">台球
 
<input type="checkbox" name="sport" value="ppq">乒乓球<br/><br/>
 
<button onclick="selectAll()">全选</button>
 
<button onclick="selectNone()">全不选</button>
 
<button onclick="selectReverse()">反选</button>
 
</body>
 
</html>
3.案例3-getElementByTagName

getElementsByTagName() 方法可返回带有指定标签名的对象的集合

说明:

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。

传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

应用实例:完成图片切换案例

image-20221101211611207

思路:

获取input的value值,根据该值来决定切换猫还是狗

image-20221101223326519

	
 
<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="UTF-8">
 
<title>getElementByTagName使用</title>
 
<script type="text/javascript">
 
 
 
function changeImgs() {
 
//1.得到所有的img
 
//注意:该方法返回标签名的对象的 集合
 
var imgs = document.getElementsByTagName("img");//通过标签获取
 
var input = document.getElementsByTagName("input");//也可以id获取
 
if (input[0].value == "查看多少小猫,并切换成小狗") {
 
alert("猫猫的数量=" + imgs.length)
 
input[0].value = "查看多少小狗,并切换成小猫";
 
//2.修改路径src
 
for (var i = 0; i < imgs.length; i++) {
 
imgs[i].src = "imgs/" + (i + 4) + ".png";
 
}
 
} else {
 
alert("狗狗的数量=" + imgs.length)
 
input[0].value = "查看多少小猫,并切换成小狗";
 
//2.修改路径src
 
for (var i = 0; i < imgs.length; i++) {
 
imgs[i].src = "imgs/" + (i + 1) + ".png";
 
}
 
}
 
}
 
</script>
 
</head>
 
<body>
 
<img src="imgs/1.png" height="100">
 
<img src="imgs/2.png" height="100">
 
<img src="imgs/3.png" height="100">
 
<br/>
 
<input type="button" onclick="changeImgs()" value="查看多少小猫,并切换成小狗"/>
 
</body>
 
</html>
image-20221101215335715 image-20221101215408510
4.案例4-createElement

Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。

如果用户代理无法识别 tagName,则会生成一个未知 HTML 元素。

html文档被映射之后就变成了一个dom模型,可以直接在dom中进行编程,而dom模型的变化又会反过来影响展示的内容,但是html文档本身没有发生改变,在程序里的操作影响的是浏览器的内存。

总结:html文档本身是静态的,不会变化。程序影响的是dom树,dom树的改变又会反过来去改变浏览器页面的内容,它的整个变化是在内存里面的。

应用实例:

添加小猫图片案例,点击按钮,添加一张小猫图片

image-20221101220106564

	
 
<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="UTF-8">
 
<title>createElement</title>
 
<script type="text/javascript">
 
function addImg() {
 
//创建小猫图片,展示在页面上
 
//1.创建图片
 
var img = document.createElement("img");
 
//alert(img)//[object HTMLImageElement]
 
img.src = "imgs/1.png";
 
img.width = 100;
 
//2.创建对象之后要将该dom对象添加到页面上
 
document.body.appendChild(img);//追加子对象
 
}
 
</script>
 
</head>
 
<body>
 
<input type="button" onclick="addImg()" value="点击创建一只小猫~">
 
</body>
 
</html>
image-20221101222522989image-20221101222649463

出处:https://www.cnblogs.com/liyuelian/p/16849445.html

相关教程