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) ...
随机推荐
- GA算法｜遗传算法｜SYSU期末课程设计｜Python+Matlab实现｜超完备代码实现
前言 那么这里博主先安利一下一些干货满满的专栏啦! Linux专栏https://blog.csdn.net/yu_cblog/category_11786077.html?spm=1001.2014 ...
- git~issue在github/gitlab中的使用
本文档适用于github和gitlab issue介绍 GitHub 中的 issue 功能是一种用于跟踪项目中任务.缺陷.功能请求和讨论的工具.通过 issue,项目成员可以提出问题.报告 bug. ...
- TActionManager Delphi 超级方便的快捷键 草草
delphi 中用快捷键 草 实在是 太简单了 . 自己摸索出来的 方法 --------------------------------------------------------------- ...
- ABC 326
E 题意: 给定一个 \(n\) 面骰,长度 \(n\) 的数组 \(a\) 和一个初始为 \(0\) 的变量 \(x\). 每次投掷骰子,等概率获得 \(1 \sim n\) 中的一个数 \(p\) ...
- P5943 [POI2002] 最大的园地 题解
题目传送门 前置知识 单调栈 简化题意 在一个 \(n \times n\) 的正方形内找到最大的由 \(0\) 组成的子矩形的面积. 解法 令 \(f_{i,j}(1 \le i,j \le n)\ ...
- JS axios cancelToken 是如何实现取消请求？稍有啰嗦但超有耐心的 axios 源码分析
壹 ❀ 引 axios,一个基于promise且对ajax进行了二次封装的http库,在提供了与promise类似的API便捷写法同时,它还有一大特点,便是支持取消http请求.当然取消请求并不是ax ...
- MongoDB Security
1. Security MongoDB提供了一系列的保护措施,以保护它自身安全: 启用访问控制并实行身份验证 MongoDB支持多种身份认证机制,默认的认证机制是SCRAM 配置基于角色的访问控制 ...
- 【Unity3D】拖尾TrailRenderer
1 TrailRenderer 简介 TrailRenderer 组件用于实现拖尾效果,可以调整拖尾颜色.时长.宽度等属性,其属性面板如下: Materials:拖尾材质,最好设置为 Defaul ...
- sentry-native 在 windows 平台上搭建
官方文档:https://github.com/getsentry/sentry-native 虽说官方文档有搭建步骤,奈何我用 git bash 试了 n 遍,最终都会报一大堆错误,白白浪费了我快一 ...
- Jenkins共享库使用
简单使用 共享库(Shared libraries)是一种可以用来封装函数.变量甚至整个 Pipeline 的机制.通过共享库,可以将常用的功能和流程逻辑定义在单独的 Groovy 脚本中,然后在多个 ...