本文详细介绍了DOM（文档对象模型）的基础概念、节点分类、文档加载机制、DOM查询方法、元素增删改、CSS操作、事件处理和定时器的使用。通过实例展示了如何在JavaScript中运用这些技术实现页面动态效果。
DOM
1.简介
全称：Document Object Model 文档对象模型
JS通过DOM来对HTML文档进行操作
文档：文档表示的是整个的HTML网页文档
对象：对象表示将网页中的每一个部分都转换为了一个对象
模型：使用模型来表示对象之间的关系，这样方便获取对象
2.节点
1）分类
文档节点：整个HTML文档
浏览器已经提供文档节点对象 这个对象是window属性
可以在页面中直接使用，文档节点代表整个网页
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">我是一个按钮</button>
<script>
var btn=document.getElementById("btn");
btn.innerHTML="I am a button";
</script>
</body>
</html>
2)节点属性
3.文档加载
浏览器在加载页面时自上而下，读取一行就运行一行
如果将script标签写到页面的上边，
在代码执行时，页面还没有加载
因此 将js代码写到页面下部就是为了可以在页面加载完毕后再执行js代码
1）onload
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload 事件
该事件对应的响应函数将会在页面加载完成之后执行
这样可以确保代码执行时所有的DOM对象已经加载完毕了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick= function(){alert("hello");};
};
</script>
</head>
<body>
<button id="btn">
我是按钮
</button>
</body>
</html>
4.DOM 查询
1）获取元素节点
通过document对象调用
● getElementById（）
通过id属性获取一个元素节点对象
● getElementsByTagName（）
通过标签名获取一组元素节点对象
● getElementsByName（）
通过name属性获取一组元素节点对象
2)获取元素节点的子节点
通过具体的元素节点调用
● getElementsByTagName()
----方法，返回当前节点的指定标签名的后代节点
● childNodes（返回数组）
—属性，表示当前节点的所有子节点
● firstChild
----属性，表示当前节点的第一个子节点（包括空白文本节点）
● lastChild
—属性，表示当前节点的最后一个子节点
● children（数组）
—属性 ，表示当前元素的所有子元素（子节点会将空格算上）
3）获取父节点和兄弟节点
通过具体的节点调用（三者都会获取空白文本）
● parentNode
—属性，表示当前节点的父节点
● previousSibling
—属性，表示当前节点的前一个兄弟节点
● nextSibing
—属性，表示当前节点的后一个兄弟节点
4)剩余方法
（1）获取body标签
（2）获取html根标签
var html=document.documentElement;
(3）getElementsByClassName()
根据元素的class属性值查询一组元素节点对象
（4）querySelector()
需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，只会返回第一个
eg
document.querySelector(".box div");
（5）querySelectorAll()
该方法和querySelector()类似，不同的是它会将符合条件的元素封装到一个数组中
5.DOM增删改
可以用于创建一个元素节点对象
它需要一个标签名作为参数
并将创建好的对象作为返回值返回
注意：使用innerHTML也可以完成DOM的增删改的相关操作
一般两种方式结合使用
1）添加
(1)createElement()
可以用于创建一个元素节点对象
它需要一个标签名作为参数
并将创建好的对象作为返回值返回
注意：使用innerHTML也可以完成DOM的增删改的相关操作
一般两种方式结合使用
（2）createTextNode（）
可以用来创建一个文本节点对象
需要一个文本内容作为参数，将会根据内容创建文本节点，并将新节点返回
（3）appendChild（）
向一个父节点添加新子节点
语法：父.appendChild(子)
（4）insertBefore
语法： 父.insertBefore(新，旧)；
2）替换
（1）replaceChild（）
语法： 父.replaceChild(新，旧)
3)删除
（1）removeChild（）
语法：父.removeChild(子)；
6.使用DOM操作CSS
1)修改样式
语法：元素.style.样式=样式值
2）读取样式
语法 ：元素.style.样式
注意：通过style属性设置和读取的都是内联样式
无法读取样式表中的样式
3）获取元素的样式
语法：getComputedStyle（元素，伪元素）. 样式
该方法会获得该元素样式数组
定义一个函数，用来获取元素的当前的样式
参数： obj 要获取样式的元素
name 要获取的样式名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1
{
width:200px;
height: 200px;
background-color: red;
}
</style>
<script type="text/javascript">
//点击按钮改变大小
window.onload=function()
{
var box1=document.getElementById("box1");
var btn01=document.getElementById("btn01");
btn01.onclick=function()
{
//修改宽度
box1.style.width="100px";
box1.style.height="100px";
box1.style.backgroundColor="blue";
};
//定义一个函数，用来获取元素的当前的样式
//参数： obj 要获取样式的元素
//name 要获取的样式名
function getStyle(obj,name)
{
if(getComputedStyle)
{ //正常浏览器的方式
return getComputedStyle(obj,null)[name];
}else
{ //IE8的方式，没有getComputedStyle（）方法
return obj.currentStyle.[name];
}
}
}
</script>
</head>
<body>
<button id="btn01"> 点我一下</button>
<div id="box1"></div>
</body>
</html>
6.其他样式相关的属性
1）可见
事件
1.简介
浏览器和用户的交互行为
如：点击按钮 鼠标移动 关闭窗口
在事件对应的属性中设置js代码
这样在事件被触发时，这些代码将会执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">我是按钮</button>
<script>
//获取按钮对象
var btn=document.getElementById("btn");
//可以为按钮的对应事件绑定处理函数的形式来响应事件
//绑定一个单击事件
//这样当事件触发时，其对应的函数将会被调用
//像这种为单击事件绑定的函数，称为单击响应函数
btn.onclick=function(){alert("你还点");};
</script>
</body>
</html>
2.事件对象
onmousemove
该事件将会在鼠标在元素移动时被触发
1）.概述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#areaDiv
{
width:200px;
height: 50px;
border: 1px solid black;
margin-bottom:10px ;
}
#showMsg
{
width: 200px;
height: 20px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.onload=function()
{
//当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
//获取两个div
var areaDiv=document.getElementById("areaDiv");
var showMsg=document.getElementById("showMsg");
areaDiv.onmousemove=function(event)
{
//在showMsg中显示坐标
var x=event.clientX;
var y=event.clientY;
showMsg.innerHTML="x="+x+",y="+y;
}
}
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
所谓冒泡，指的是事件向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
取消冒泡： event.cancelBubble=true
4.事件的委派
将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
事件委派利用了冒泡原理，通过委派，减少事件绑定的次数
定时器
1.定时调用
1）setInterval（）
可以将一个函数每隔一段时间执行一次
语法：setInterval( 回调函数)
参数
1.回调函数，函数每隔一段时间被调用一次
2.每次调用间隔的时间 单位是ms
返回值：返回一个Number类型的数据
这个数字用来作为定时器的唯一标识
2）clearInterval（）
可以用来关闭一个定时器
语法：clearInterval（定时器标识）
方法中需要一个定时器的标识作为参数，这样将关闭对应标识的定时器
注意：clearInterval（）可以接受任意参数，有效则停止对应定时器，无效则什么也不做
2.延时调用
延时调用一个函数不马上执行，而是隔一段时间以后再执行，而且只会执行一次
延时和定时的区别，定时调用会执行多次，而延时调用只会执行一次
延时调用和定时调用实际上可以互相代替的，在开发中可以根据自己需要去选择
1）setTimeout
2）clearTimeout（）来关闭
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function()
{
//使图片自动切换
var i=0;
var btn01=document.getElementById("btn01");
var img1=document.getElementById("img1");
var imgArr=["img/01.png","img/02.jpg","img/03.jpg","img/04.jpg"];
var timer;
btn01.onclick=function(){
//每点一次按钮，就会开启一个定时器
//点击多次就会开启多个定时器，这就导致图片的切换速度过快
//并且我们只能关闭最后一次开启的定时器
//在开启定时器前 应将前一个定时器关闭
clearInterval(timer);
timer=setInterval(function(){
img1.src=imgArr[i];
i++;
i=i%imgArr.length;
},500);
}
var btn02=document.getElementById("btn02");
btn02.onclick=function()
{
clearInterval(timer);
}
}
</script>
</head>
<body>
<img src="img/01.png" id="img1" height="100px" width="100px"/>
<button id="btn01">开始</button>
<button id="btn02">暂停</button>
</body>
</html>
本周总结
这一周学习了定时器，事件等知识，为做轮播图打下了基础，但是轮播图的实现方式有多种，通过opacity，移动等来实现，还需要多加练习
扫一扫
1721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
