DOM
一.关于DOM的事件操作
1.事件
JS是以事件驱动为核心的一门语言
2.事件的三要素
事件的三要素 : 事件源 , 事件 , 事件驱动程序.
事件源 : 引发后续事件的html标签.
事件 : js已经定义好了
事件驱动程序 : 对样式和html的操作.也就是DOM.
代码书写步骤 :
(1) 获取事件源 : document.getElementById("boy");
(2) 绑定事件 : 事件源boy.事件onclick = function(){ 事件驱动程序 };
(3) 书写事件驱动程序 : 关于DOM的操作
<body>
<div id="box1"></div>
<script type="text/javascript">
//1.获取事件源
var div = document.getElementById("box1");
//2.绑定事件
div.onclick = function(){
//3.书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
常见的事件:
| 事件名 | 说明 |
| onclick | 鼠标单击 |
| ondblclick | 鼠标双击 |
| onkeyup | 按下并释放键盘的一个键时触发 |
| onchange | 文本内容或下拉菜单中的选项发生改变 |
| infocus | 获取焦点,表示文本框等获得鼠标光标 |
| onblur | 失去焦点,表示文本框等失去鼠标光标 |
| onmouseover | 鼠标悬停,即鼠标停留在图片等的上方 |
| onmouseout | 鼠标移出,即离开图片等所在的区域 |
| onload | 网页文档加载事件 |
| onunload | 关闭网页时 |
| onsubmit | 表单提交事件 |
| onreset | 重置表单时 |
3.获取事件源的方式(DOM节点的获取)
获取事件源的常见方式:
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签 var arr1 = document.getElementsByTagName("div1"); //方式二：通过 标签名 获得 标签数组，所以有s var arr2 = document.getElementsByClassName("haha"); //方式三：通过 类名 获得 标签数组，所以有s
4.绑定事件的方式
方式一 : 直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>
方式二 : 先单独定义函数,在绑定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
方式三 : 行内绑定
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
5.事件驱动程序
<style> #box { width: 100px; height: 100px; background-color: pink; cursor: pointer; } </style> </head> <body> <div id="box" ></div> <script type="text/javascript"> var oDiv = document.getElementById("box"); //点击鼠标时，原本粉色的div变大了，背景变红了 oDiv.onclick = function () { oDiv.style.width = "200px"; //属性值要写引号 oDiv.style.height = "200px"; oDiv.style.backgroundColor = "red"; //属性名是backgroundColor，不是background-Color } </script>
1.在js里写属性值时 , 要用引号
2.在js里写属性名时 , 是backgroundColor , 不是CSS里面的background-Color .记得所有的像css属性的text-*，line-*、backgroun-*等在js中都写成驼峰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<!-- <div id="box2" class="box"></div> -->
<script>
//需求： 默认盒子是200*200 红色 点击盒子让盒子颜色变成绿色
//1.获取事件源（标签）2.事件 3.事件驱动程序
// 获取DOM的三种方式
//获取事件源
var oDiv = document.getElementById('box');
console.log(oDiv);
var oDiv2 = document.getElementsByClassName('box')[0];
console.log(oDiv2);
// 获取出来是伪数组
var oDiv3 = document.getElementsByTagName('div')[0];
console.log(oDiv3);
// var oDiv4 = document.querySelector('.box');
// console.log(oDiv4);
var isRed = true;
//2.事件
oDiv.onclick = function() {
if (isRed) {
//3.驱动程序
console.log(oDiv.style);
oDiv.style.backgroundColor = 'green';
isRed = false;
}else{
//3.驱动程序
console.log(oDiv.style);
oDiv.style.backgroundColor = 'red';
isRed = true;
}
}
</script>
</body>
</html>
6.onload事件
当页面加载(文本和图片)完毕的时候 , 触发onload事件
<script type="text/javascript"> window.onload = function () { console.log("小马哥"); //等页面加载完毕时，打印字符串 } </script>
js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
//入口函数
// 窗口加载 先是文档加载，图片是后加载
console.log(window.onload);
// 1.必须等待图片资源加载完成之后才执行js脚本代码 异步的（不等待） 同步
window.onload = function() {
console.log(document);
console.log(document.documentElement);
console.log(document.body);
};
console.log(1111);
// 2.有事件覆盖
// window.onload = function() {
// // console.log(111);
// }
</script>
</head>
<body>
<div id="box"></div>
<!-- 1. -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
.active{
display: none;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div id="box" class="app"></div>
<img src="" alt="" id="myImg">
<a href=""></a>
<input type="text">
<script>
//1.样式属性 element.style.样式名 = 'xxx'
//2.标签属性 id class title img中的src alt a标签中href input标签type name
// 1.获取事件源
// 2.事件 onclick onmouseover onmouseout
// var oBtn = document.getElementById('btn');
// var oDiv = document.getElementById('box');
function $(id) {
return document.getElementById(id);
}
/*
var isShow = true;
$('btn').onclick = function() {
if (isShow) {
$('box').style.display = 'none';
isShow = false;
console.log(this);
this.innerText = '显示';
}else{
$('box').style.display = 'block';
isShow = true;
console.log(this);
this.innerText = '隐藏';
}
};
*/
$('btn').onmouseover = function () {
// 点语法 set方法和get方法
// console.log($('box').className);
// $('box').className += ' active';
// $('box').title = '我的alex';
$('myImg').src = './fd039245.jpg';
$('myImg').title = '一个美女';
$('myImg').alt = '大美女';
$('myImg').className = 'active2';
this.style.backgroundColor = 'red';
}
$('btn').onmouseout = function () {
// 点语法 set方法和get方法
// console.log($('box').className);
// $('box').className += ' active';
// $('box').title = '我的alex';
// $('myImg').src = './fd039245.jpg';
// $('myImg').title = '一个美女';
// $('myImg').alt = '大美女';
// $('myImg').className = 'active2';
this.style.backgroundColor = 'green';
}
</script>
</body>
</html>
京东顶部广告栏关闭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.top-banner{
/*position: relative;*/
background-color: rgb(230, 15, 82);
}
.top-banner .w{
width: 1190px;
position: relative;
margin: 0 auto;
}
.top-banner .banner{
display: block;
width: 100%;
height: 80px;
background: url('./close.jpg') no-repeat center 0;
}
.top-banner .close{
position: absolute;
right: 0;
top:0;
text-decoration: none;
color: white;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="top-banner" id="topBanner">
<div class="w">
<a href="#" class="banner"></a>
<a href="#" class="close" id="closeBanner">x</a>
</div>
</div>
<script type="text/javascript">
// /需求：点击案例，隐藏盒子。
//思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
window.onload = function(){
// /1.获取事件源和相关元素
var closeBanner = document.getElementById('closeBanner');
var topBanner = document.getElementById('topBanner');
//2.绑定事件
closeBanner.onclick = function(){
//3.书写事件驱动程序
//类控制
//topBanner.className += ' hide';//保留原类名，添加新类名
//topBanner.className = 'hide';
//替换旧类名
topBanner.style.display = 'none';
}
}
</script>
</body>
</html>
当鼠标悬停在img上时 , 更换为另外一张图片 ; 鼠标离开时 , 还原为本来的图片
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload页面加载完毕以后再执行此代码
window.onload = function () {
//需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseover = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseout = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd1.png";
}
}
</script>
</head>
<body>
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>
二.DOM介绍
1.DOM
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的.
2.解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
3.DOM树(一切都是节点)
DOM的数据结构:
在HTML当中 , 一切都是节点
元素节点 : HTML标签
文本节点 : 标签中的文字(比如标签之间的空格 , 换行 )
属性节点 : 标签的属性
整个html文档就是一个文档节点 . 所有的节点都是Object
4.DOM可以做的:
找对象(元素节点)
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应 : 事件源 , 事件 , 事件的驱动程序
5.DOM节点的获取
DOM节点的获取方式其实就是获取事件源的方式
操作元素节点,必须首先找到该节点.
三种方式可以获取DOM节点:
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div1"); //方式二：通过 标签名 获得 标签数组，所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
特殊情况：数组中的值只有1个。即便如此，这一个值也是包在数组里的。这个值的获取方式如下：
document.getElementsByTagName("div1")[0]; //取数组中的第一个元素
document.getElementsByClassName("hehe")[0]; //取数组中的第一个元素
6.DOM 访问关系的获取
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。
节点的访问关系 , 是以属性的方式存在的
js中的父子兄访问关系:
父节点 : parentNode
兄弟节点 : nextSibling , nextElementSibling , previousSibling , previousElementSibling
子节点 : firstChild , firstElementChild , lastChild , lastElementChild
所有子节点 : childNodes , children
7.获取父节点
调用者就是节点。一个节点只有一个父节点，调用方式就是 节点.parentNode
(1) nextSibling : 指的是下一个节点（包括标签、空文档和换行节点）
(2) nextElementSibling : 火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）。
总结：为了获取下一个元素节点，我们可以这样做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样写：
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="father">
<div id="laoda"></div>
<div id="laoer"></div>
</div>
<script>
var oLaoda = document.getElementById('laoda');
// console.log(oLaoda.nextSibling);
// console.log(oLaoda.nextElementSibling);
// 兼容性
// var a = oLaoda.nextElementSibling || oLaoda.nextSibling;
// console.log(a);
console.log(document.getElementById('father').children);
console.log(oLaoda.parentNode);
</script>
</body>
</html>
8.获取单个的子节点
a.第一个子节点 | 第一个子元素节点：
（1）firstChild：
（2）firstElementChild：都指的是第一个子元素节点（标签）。
总结：为了获取第一个子元素节点，我们可以这样做：在IE678中用firstChild，在火狐谷歌IE9+以后用firstElementChild，于是，综合这两个属性，可以这样写：
第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
b、最后一个子节点 | 最后一个子元素节点：
（1）lastChild：
（2）lastElementChild：都指的是最后一个子元素节点（标签）。
总结：为了获取最后一个子元素节点，我们可以这样做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，综合这两个属性，可以这样写：
最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild
9.获取所有的子节点
（1）childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）。
用法:
子节点数组 = 父节点.childNodes; //获取所有节点。
（2）children：非标准属性。返回的是指定元素的子元素节点的集合。
它只返回HTML节点 , 甚至不返回文本节点.
用法:
子节点数组 = 父节点.children; //获取所有节点。用的最多。
三.DOM节点操作
节点的操作都是函数(方法)
1.创建节点
新的标签(元素节点) = document.createElement("标签名");
如果我们想创建一个li标签，或者是创建一个不存在的adbc标签，可以这样做：
<script type= "text/javascript">
var a1 = document.createElement("li"); //创建一个li标签
var a2 = document.createElement("adbc"); //创建一个不存在的标签
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
</script>
结果:
2.插入节点
方式1:
父节点.appendChild(新的子节点);
解释：父节点的最后插入一个新的子节点。
方式2:
父节点.insertBefore(新的子节点,作为参考的子节点);
解释：
- 在参考节点前插入一个新的节点。
- 如果参考节点为null，那么他将在父节点最后插入一个子节点。
3.删除节点
格式:
父节点.removeChild(子节点);
解释：用父节点删除子节点。必须要指定是删除哪个子节点。
如果我想删除自己这个节点，可以这么做：
node1.parentNode.removeChild(node1);
4.复制节点
格式:
要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。 要复制的节点.cloneNode(true);
括号里带不带参数，效果是不同的。解释如下：
-
不带参数/带参数false：只复制节点本身，不复制子节点。
-
带参数true：既复制节点本身，也复制其所有的子节点。
四.设置节点的属性
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
1.获取节点的属性值
方式1 :
元素节点.属性;
元素节点[属性];
<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
<script type="text/javascript">
var myNode = document.getElementsByTagName("img")[0];
console.log(myNode.src);
console.log(myNode.className); //注意，是className，不是class
console.log(myNode.title);
console.log("------------");
console.log(myNode["src"]);
console.log(myNode["className"]); //注意，是className，不是class
console.log(myNode["title"]);
</script>
</body>
方式2 ：
素节点.getAttribute("属性名称");
console.log(myNode.getAttribute("src"));
console.log(myNode.getAttribute("class")); //注意是class，不是className
console.log(myNode.getAttribute("title"));
2.设置节点的属性值
方式1 :
myNode.src = "images/2.jpg" //修改src的属性值 myNode.className = "image2-box"; //修改class的name
方式2 :
元素节点.setAttribute(属性名, 新的属性值);
myNode.setAttribute("src","images/3.jpg");
myNode.setAttribute("class","image3-box");
myNode.setAttribute("id","你好");
3.删除节点的属性
格式:
元素节点.removeAttribute(属性名);
myNode.removeAttribute("class");
myNode.removeAttribute("id");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 200px;
background-color:red;
}
</style>
</head>
<body>
<div class="box" id="wrap" style=""></div>
<p>alex</p>
<script>
//1,获取事件源
var oDiv = document.getElementById('wrap');
//2.事件
oDiv.onclick = function() {
//3.事件驱动 业务
console.log(oDiv.style);
// oDiv.style.backgroundColor = 'green';
oDiv.style.width = '400px';
oDiv.style.float = 'left';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 42px;
height: 70px;
background: url(./images/icon-slides.png) no-repeat -84px 0;
/*background-position: -82px 0;*/
}
</style>
</head>
<body>
<div class="box"></div>
<img src="./images/购物车.png" width="100" alt="" id="shop">
<script>
/*
var oDiv = document.getElementsByClassName('box')[0];
oDiv.onmouseover = function() {
this.style.backgroundPosition = '0 0';
}
oDiv.onmouseout = function() {
this.style.backgroundPosition = '-84px 0';
}
*/
var isHover = true;
document.getElementById('shop').onclick = function() {
if (isHover) {
this.src = './images/购物车-hover.png';
this.className = 'app';
this.alt = '哈哈哈';
this.title = '哈哈哈';
this.id = 'app';
isHover = false;
}else{
this.src = './images/购物车.png';
isHover = true;
}
// this.setAttribute(name: DOMString, value: DOMString)
// console.log(this.getAttribute('src'));
// console.log(this.src);
// this.setAttribute('src', './images/购物车-hover.png');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.child{
width: 200px;
height: 200px;
background-color: green;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div class="box">
<div class="child" id="child"></div>
</div>
<!-- 1.样式属性 display:none|block
2.通过控制标签属性className 对类型添加 移除
3.DOM创建 销毁 创建销毁
-->
<script>
var oChild = document.getElementById('child');
//
document.getElementById('btn').onclick = function() {
// oChild.style.display = 'none';
// oChild.className +=' hidden';
oChild.className = oChild.className + ' hidden';
console.log(oChild.className);
}
</script>
</body>
</html>
浙公网安备 33010602011771号