DOM
宿主对象:
DOM
BOM
1.DOM
概述
DOM
全称是:Document Object Model
文档对象模型
JS
中通过DOM
来对HTML
文档进行操作,只要理解了DOM
就可以随心所欲的操作WEB
页面。
文档:
- 文档表示的就是整个的
HTML
网页文档
对象:
- 对象表示将网页中的每一个部分都转换为了一个对象
模型:
- 使用模型来表示对象之间的关系,这样方便我们获取对象
2.节点
节点:Node
构成HTML
文档最基本的单元。
常用节点分为四类:
- **文档节点:**整个
HTML
文档 - 元素节点:
HTML
文档中的HTML
标签 - **属性节点:**元素的属性
- 文本节点:
HTML
标签中的文本内容
节点属性:
3.文档节点Document
- 文档节点
Document
,代表的是整个HTML
文档,网页中的所有节点都它的子节点 Document
对象作为window
对象的属性存在的,我们不用获取可以直接使用- 通过该对象我们可以在整个文档访问内查找节点对象,并可以通过该对象创建各种节点对象
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>DOM快速入门</title>
</head>
<body>
<button id="but">我是按钮</button>
<script type="text/javascript">
// 使用`JS`获取按钮
// 使用document文档对象中的`getElementById()`方法
var but = document.getElementById("but");
// 使用属性修改文本
but.innerHTML = "I'm button";
</script>
</body>
</html>
4.事件
**事件:**就是用户和浏览器之间的交互行为,比如:点击按钮,鼠标移动,关闭窗口等。
鼠标事件:
键盘事件:
表单事件:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<button id="but">我是一个按钮</button>
<script type="text/javascript">
// 使用文档对象获取`button`
var but = document.getElementById("but");
alert(but);
but.onclick = function () {
alert("为属性绑定单击事件");
};
</script>
</body>
</html>
5.文档加载顺序
浏览器在加载一个页面时,是按照自上向下顺序加载的,读取到一行就运行一行,如果将
script
标签写到页面上边,在代码执行时,页面还没有加载,页面没有加载DOM
对象也没有加载,会导致无法获取到DOM
对象
onload
事件会在整个页面加载完成后才触发,所以如果我们需要将代码写在页面上边时,可以为window
绑定一个onlaod
事件来解决该问题
/*
* onload事件会在整个页面加载完成之后才触发
* 为window绑定一个onload事件
* 该事件对应的响应函数将会在页面加载完成之后执行,
* 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
*
*/
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>文档加载顺序</title>
<script type="text/javascript">
// 文档加载顺序是自上向下加载的
/**
* 如果需要获取下面的元素时,需要为`window`对象绑定一个onload事件
* 来解决该问题
*/
window.onclick = function () {
// 获取按钮对象
var but = document.getElementById("but");
// 为按钮绑定单击事件
but.onclick = function () {
alert("点我干啥!");
}
};
</script>
</head>
<body>
<button id="but">我是一个按钮</button>
</body>
</html>
6.获取元素节点
通过document
对象调用
1.
getElementById()
- 通过
id
属性获取一个元素节点对象2.
getElementsByTagName()
- 通过标签名获取一组元素节点对象
3.
getRlementsByName()
- 通过
name
属性获取一组元素节点对象
<script type="text/javascript">
window.onload = function(){
//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//查找#bj节点
var bj = document.getElementById("bj");
//打印bj
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个,也会封装到数组中返回
var lis = document.getElementsByTagName("li");
//打印lis
//alert(lis.length);
//变量lis
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
//alert(inputs.length);
for(var i=0 ; i<inputs.length ; i++){
/*
* innerHTML用于获取元素内部的HTML代码的
* 对于自结束标签,这个属性没有意义
*/
//alert(inputs[i].innerHTML);
/*
* 如果需要读取元素节点属性,
* 直接使用 元素.属性名
* 例子:元素.id 元素.name 元素.value
* 注意:class属性不能采用这种方式,
* 读取class属性时需要使用 元素.className
*/
alert(inputs[i].className);
}
};
//查找#city下所有li节点
//返回#city的所有子节点
//返回#phone的第一个子节点
//返回#bj的父节点
//返回#android的前一个兄弟节点
//读取#username的value属性值
//设置#username的value属性值
//返回#bj的文本值
};
</script>
注意是:
innerHTML
用于是获取元素内部的HTML
代码的,例如:<input/>
自闭合标签,使用innerHTML
没有任何意义如果需要读取元素节点中的属性,直接使用
元素.属性名
例如:
元素.id
元素.value
注意是:
class
属性不能采用这种方式,如果需要读取class
属性需要使用元素.className
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: greenyellow;
/*设置文本居中*/
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 点击按钮切换图片
*/
//获取两个按钮
var prev = document.getElementById("prev");
var next = document.getElementById("next");
/*
* 要切换图片就是要修改img标签的src属性
*/
//获取img标签
var img = document.getElementsByTagName("img")[0];
//创建一个数组,用来保存图片的路径
var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];
//创建一个变量,来保存当前正在显示的图片的索引
var index = 0;
//获取id为info的p元素
var info = document.getElementById("info");
//设置提示文字
info.innerHTML = "一共 "+imgArr.length+" 张图片,当前第 "+(index+1)+" 张";
//分别为两个按钮绑定单击响应函数
prev.onclick = function(){
/*
* 切换到上一张,索引自减
*/
index--;
//判断index是否小于0
if(index < 0){
index = imgArr.length - 1;
}
img.src = imgArr[index];
//当点击按钮以后,重新设置信息
info.innerHTML = "一共 "+imgArr.length+" 张图片,当前第 "+(index+1)+" 张";
};
next.onclick = function(){
/*
* 切换到下一张是index自增
*/
index++;
if(index > imgArr.length - 1){
index = 0;
}
//切换图片就是修改img的src属性
//要修改一个元素的属性 元素.属性 = 属性值
img.src = imgArr[index];
//当点击按钮以后,重新设置信息
info.innerHTML = "一共 "+imgArr.length+" 张图片,当前第 "+(index+1)+" 张";
};
};
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="img/1.jpg" alt="冰棍" />
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>