JavaScript对象之document对象
DOM对象之document对象
DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
打开网页后,首先看到的是浏览器窗口,即顶层的window对象。
其次,看到的是网页文档的内容,即document文档。
首先看一下w3c提供的document对象的定义和其他相关知识:
现在我们来详细的看一下document对象:
第一类:找元素
四种基本的找元素的方法
document.getElementById("d1");
根据id找元素,因为id是唯一的,只能找的一个元素
getElementsByClassName("c1");
根据class找元素,因为class不唯一,可以找到多个元素,返回数组
document.getElementsByTagName("div");
根据标签名找元素,因为标签名不唯一,可以找到多个元素,返回数组
document.getElementsByName("uname");
根据name找元素,主要用于表单元素,因为有单选等情况name不唯一,可以找到多个元素,返回数组
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body>
8 <div id="d1">
9 <div></div>
10 <span></span>
11 </div>
12 <div class="c1"></div>
13 <span class="c1"></span>
14 <input type="button" name="uname" />
15 </body>
16 </html>
17 <script>
18 var a = document.getElementById("d1"); //根据id找元素
19 var b = document.getElementsByClassName("c1"); //根据class找元素
20 var c = document.getElementsByTagName("div"); //根据标签名找元素
21 var d = document.getElementsByName("uname"); //根据name找元素
22 alert(a+"n"+b[1]+"n"+c[0]+"n"+d[0]);
23 </script>
id=d1的返回值a,找到div元素
class=c1的返回值数组b,b[1],数组b中的第二个元素,找到span元素
标签=div的返回值数组c,c[0],数组c第一个元素,找到div元素
name=uname的返回值数组d,d[0],数组d的第一个元素,找到input元素
如上我们可以看出除了根据id找元素,其他方法找元素都可以找到多个,返回数组
复杂的找元素
a.childNodes[0]方法找该元素的子元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body>
8 <div id="d1">
9 <div></div>
10 <span></span>
11 </div>
12 <div class="c1"></div>
13 <span class="c1"></span>
14 <input type="button" name="uname" />
15 </body>
16 </html>
17 <script>
18 var a = document.getElementById("d1"); //根据id找元素
19 alert(a.childNodes[0]+"n"+a.childNodes[1]+"n"+a.childNodes[2]+"n"+a.childNodes[3]+"n"+a.childNodes[4]+"n"+a.childNodes[5]+"n");
20 </script>
如上我们可以看出,找子元素会找到多个,返回的一定是数组,id为d1的元素内有5个子元素三个文本,一个div元素,一个span元素
注意:这个方法不仅找出了标签内的标签,还会找出文本,这里回车换行也被识别成文本写入了数组
a.parentNode 找父级元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body>
8 <div id="d1">
9 <div></div>
10 <span></span>
11 </div>
12 <div class="c1"></div>
13 <span class="c1"></span>
14 <input type="button" name="uname" />
15 </body>
16 </html>
17 <script>
18 var a = document.getElementById("d1"); //根据id找元素
19 alert(a.parentNode);
20 </script>
父级元素只能有一个,如上是id=d1的元素的父级元素body元素
找同级元素
a.previousSibling 找上一个同级元素
a.nextSibling 找下一个同级元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body><div id="d1">
8 <div></div>
9 <span></span>
10 </div><div class="c1"></div>
11 <span class="c1"></span>
12 <input type="button" name="uname" />
13 </body>
14 </html>
15 <script>
16 var a = document.getElementById("d1"); //根据id找元素
17 alert(a.previousSibling+"n"+a.nextSibling);
18 </script>
在如上代码中,我们先让id=d1的元素紧贴跟前后不留回车等文本内容,得出上一个同级元素没有,下一个同级元素为div
第二类:控制元素
remove删除元素
createElement创建元素
appendChild追加元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body>
8 <div id="d1">
9 <div></div>
10 <span></span>
11 </div>
12 <div id="d2">
13 </div>
14 </body>
15 </html>
16 <script>
17 var a = document.getElementById("d1"); //根据id找元素
18 var b = document.getElementById("d2");
19 a.remove(); //移除元素
20 var s = document.createElement("p"); //创建元素
21 b.appendChild(s); //追加元素
22 </script>
通过审查元素,我们可以看到id=d1的元素已被移除,id=d2的元素被追加了子元素<p>
第三类:操作内容
普通元素的操作
innerText获取内容文本
innerHTML获取内容代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body>
8 <div id="d1">
9 <span>这是div中的span中的内容</span>
10 </div>
11 <div id="d2">
12 <span>这是div2中的span中的内容</span>
13 </div>
14 <div id="d3">
15 <span>这是div3中的span中的内容</span>
16 </div>
17 </body>
18 </html>
19 <script>
20 var a = document.getElementById("d1"); //根据id找元素
21 var b = document.getElementById("d2");
22 var c = document.getElementById("d3");
23 alert(a.innerText+"n"+a.innerHTML);
24 b.innerText="hello"; //给元素赋值,针对文本,其他内容会被替换
25 c.innerHTML="<b>加粗</b>"
26 </script>
以上我们可以看出innerText只会获取内容文本,而innerHTML会将内容代码一起获取
这两个方法不仅可获取内容,还可以赋值写入内容,赋值写入的内容会替换原来的内容,并且通过innerHTML赋值写入的内容会和正常代码一样在网页中生效
表单元素的操作
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body>
8 <input type="text" name="uname" id="d5"/>
9 </body>
10 </html>
11 <script>
12 var a = document.getElementById("d5");
13 a.value="hello"; //给元素赋值
14 alert(a.value); //元素的取值
15 </script>
如上我们可以通过调用value来给表单元素赋值和取值。
第四类:操作属性
setAttribute(属性名,属性值)设置属性
removeAttribute(属性名)移除属性
getAttribute(属性名)获取属性
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body>
8 <div id="d1">
9 <span>这是div中的span中的内容</span>
10 </div>
11 <div id="d2">
12 <span>这是div2中的span中的内容</span>
13 </div>
14 </body>
15 </html>
16 <script>
17 var a = document.getElementById("d1");
18 var b = document.getElementById("d2");
19 a.setAttribute("bs",100); //添加属性bs=100
20 b.setAttribute("bs",100); //添加属性bs=100
21 alert(a.getAttribute("bs")); //获取属性bs的值
22 b.removeAttribute("bs"); //删除b的属性bs
23 </script>
如上我们可以看出我们添加的bs属性,和第二个div中被移除的bs属性,以及获取的bs属性。
第五类:操作样式
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body>
8 <div id="d1" style="height:100px;broder:1px">
9 这是div1中的内容
10 </div>
11 <div id="d2" style="height:100px">
12 这是div2中的内容
13 </div>
14 </body>
15 </html>
16 <script>
17 var a = document.getElementById("d1");
18 var b = document.getElementById("d2");
19 a.style.backgroundColor="red"; //设置样式,加的是内联的
20 b.style.backgroundColor="red"; //设置样式,加的是内联的
21 alert(a.style.height); //获取样式
22 b.style.backgroundColor=""; //移除样式
23 </script>
如上我们可以添加样式,也可以获取样式的值,还可以用样式的值为空的方式来移除样式。
- spark2 sql读取数据源编程学习样例1
- golang的一个分页方法
- spark2 sql读取json文件的格式要求
- 容器化RDS|调度策略
- Go语言并发编程总结
- hdu------(4302)Holedox Eating(树状数组+二分)
- spark2的SparkSession思考与总结2:SparkSession有哪些函数及作用是什么
- GO语言并发编程之互斥锁、读写锁详解
- spark2.2 SparkSession思考与总结1
- 【译】Spring 官方教程:Spring Security 架构
- hdu----(4301)Divide Chocolate(状态打表)
- hdu------(4300)Clairewd’s message(kmp)
- TensorFlow ML cookbook 第一章7、8节 实现激活功能和使用数据源
- Go语言struct类型详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 用TypeScript装饰器实现一个简单的依赖注入
- PING问题解决方法_20190305
- 前端需要掌握的设计模式
- @vue/composition-api速成课(通俗易懂版)
- 新1期视频第14课und异常中断模式的bug以及对应的解决方法
- 第一课:linux设备树的引入与体验(基于linux4.19内核版本)
- 第二课:linux设备树的规范(dts和dtb)
- 二叉树剪枝了解一下~
- 第三课:linux内核对设备树的处理
- 第四课:u-boot对设备树的支持
- 第五课. 内核中断系统中的设备树
- 第六课:在LCD驱动中使用设备树
- 拒绝接口裸奔!开放API接口签名验证!
- centos7 kvm安装使用
- 嵌入式Linux开发板_WIFI无线网卡驱动移植