day06-JavaScript03
JavaScript03
11.DOM
DOM全称是Document Object Model，文档对象模型。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
DOM就是一个编程接口，是针对HTML文档、XML等文档的一套API。类似于JDBC是针对数据库的一套API
就是把文档中的标签，属性，文本 转换为对象来管理
dom的分类有许多种，通常所说的dom是html dom
11.1HTML DOM-文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。（映射）
这样做的好处是：对象可以有许多属性和方法，通过这些属性，方法/函数，对对象进行操作，从而反过来影响对象映射的标签的展示效果
HTML DOM树：
html文档被映射之后就变成了一个dom模型，可以直接在dom中进行编程，而dom模型的变化又会反过来影响展示的内容，但是html文档本身没有发生改变，在程序里的操作影响的是浏览器的内存。
总结：html文档本身是静态的，不会变化。程序影响的是dom树，dom树的改变又会反过来去改变浏览器页面的内容，它的整个变化是在内存里面的。
11.2Document对象
11.2.1document说明
- document 管理了所有的html文档内容
- document 它是一种树结构的文档
- 有层级关系，在dom中把所有的标签都对象化
- 通过 document 可以访问所有的标签对象
11.2.2document方法
https://www.w3school.com.cn/js/js_htmldom_document.asp
文档对象代表网页。如果希望访问 HTML 页面中的任何元素，总是从访问 document 对象开始，下面是一些使用 document 对象来访问和操作 HTML 的实例
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>
2.案例2-getElementsByName
getElementsByName() 方法可返回带有指定名称的对象的集合。
应用实例：完成多选框案例
思路：所有的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() 方法的字符串可以不区分大小写。
应用实例：完成图片切换案例
思路：
获取input的value值，根据该值来决定切换猫还是狗
<!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>
4.案例4-createElement
Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。
如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素。
html文档被映射之后就变成了一个dom模型，可以直接在dom中进行编程，而dom模型的变化又会反过来影响展示的内容，但是html文档本身没有发生改变，在程序里的操作影响的是浏览器的内存。
总结：html文档本身是静态的，不会变化。程序影响的是dom树，dom树的改变又会反过来去改变浏览器页面的内容，它的整个变化是在内存里面的。
应用实例：
添加小猫图片案例，点击按钮，添加一张小猫图片
<!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>
day06-JavaScript03的更多相关文章
- day06 Request Response
rw 读写模板的设置 day05 Request Response 1. HttpServletResponse 简介 1.1 Response 的 OutputStream 输出中文的问题 1.2 ...
- python day06笔记总结
2019.4.3 S21 day06笔记总结 一.昨日内容补充 1.列表独有功能: 1.revers 反转 例:v1 = [1,2,4,88,2] v1.revers() print(v1) 2.so ...
- Python基础(正则、序列化、常用模块和面向对象)-day06
写在前面 上课第六天,打卡: 天地不仁,以万物为刍狗: 一.正则 - 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法: - 在线正则工具:http://tool ...
- Day06 DOM4J&schema介绍&xPath
day06总结 今日内容 XML解析之JAXP( SAX ) DOM4J Schema 三.XML解析器介绍 操作XML文档概述 1 如何操作XML文档 XML文档也是数据的一种,对数据的 ...
- python开发学习-day06(模块拾忆、面向对象)
s12-20160130-day06 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
- 2017-2018-1 JAVA实验站 冲刺 day06
2017-2018-1 JAVA实验站 冲刺 day06 各个成员今日完成的任务 小组成员 今日工作 完成进度 张韵琪 进行工作总结.博客.小组成员头像 100% 齐力锋 找背按钮声音 100% 张浩 ...
- C++Primer笔记-----day06
================================================================day06=============================== ...
- day06 - Python - 面向对象
本节内容: 引子 面向对象 v.s. 面向过程 面向对象编程介绍 面向对象的特性: 封装 继承 多态 类.方法 1.引子 假设你现在是一家游戏公司的开发人员,现 ...
- 记录我的 python 学习历程-Day06 is id == / 代码块 / 集合 / 深浅拷贝
一.is == id 用法 在Python中,id是内存地址, 你只要创建一个数据(对象)那么就会在内存中开辟一个空间,将这个数据临时加载到内存中,这个空间有一个唯一标识,就好比是身份证号,标识这个空 ...
- day06——小数据池、深浅拷贝、集合
day06 小数据池 小数据池--缓存机制(驻留机制),只是一种规格,不会实际的开辟一个空间 == 判断两边内容是否相等 ***** # a = 10 # b = 10 # print(a == b) ...
随机推荐
- P9247 [集训队互测 2018] 完美的队列题解
题目链接:[集训队互测 2018] 完美的队列 神仙数据结构题,看了很多题解才搞懂.在做此题之前,最好对分块很熟悉,对各类标记非常熟练.考虑题意说的种类是相对于全局的.我们可以考虑局部影响对全局影响. ...
- Delphi 安装ICS
下载完成后解压到你的指写目录! 1.在library里加入ICS->Delphi->Vc32目录. 2.从File->Open中打开ICS->Delphi->Vc32-& ...
- html知识概念(不含标签)
CS架构与BS架构 C/S架构 Client(客户端) / Server(服务器) 需要安装客户端使用,哔哩哔哩客户端.腾讯视频客户端等 需求安装.需要更新.不跨平台 B/S架构 Browser(浏览 ...
- 解锁Mysql中的JSON数据类型，怎一个爽字了得
引言 在实际业务开发中,随着业务的变化,数据的复杂性和多样性不断增加.传统的关系型数据库模型在这种情况下会显得受限,因为它们需要预先定义严格的数据模式,并且通常只能存储具有相同结构的数据.而面对非结构 ...
- 从零开始手写 redis（三）内存数据重启后如何不丢失？
前言 我们在 从零手写 cache 框架(一)实现固定大小的缓存 中已经初步实现了我们的 cache. 我们在 从零手写 cache 框架(一)实现过期特性 中实现了 key 的过期特性. 本节,让我 ...
- STM32F407VET6烧录出现flash download failed target dll has been cancelled
今天在通过stlink烧录一个长时间未用的STM32F407VET6 Black Board的时候, 出现错误 Internal command error Flash download failed ...
- tensorflow中交叉熵损失函数详解
1 前言 tensorflow中定义了3个交叉熵损失函数: softmax_cross_entropy_with_logits(logits, labels) softmax_cross_entrop ...
- paste命令
paste命令 paste命令会把每个文件以列对列的方式,一列列地加以合并. 语法 paste [OPTION]... [FILE]... 参数 -d, --delimiters=[LIST]: 用指 ...
- Oracle 中UNDO与REDO的区别详解
一 为了更清楚的看出2者区别,请看下表: UNDO REDO Rec ...
- Go语言并发编程(1)：对多进程、多线程、协程和并发、并行的理解
一.进程和线程 对操作系统进程和线程以及协程的了解,可以看看我前面的文章: 对进程.线程和协程的理解以及它们的区别:https://www.cnblogs.com/jiujuan/p/16193142 ...