目录
DOM介绍
JavaScript一共包括三部分，分别是ECMAScript也就是JavaScript基础、DOM和BOM，前面的文章已经讲过ECMAScrit了、这里是ECMAScript的链接：blog.csdn.net/HeZhiYing_/…
今天来将一下DOM，先说说什么是DOM，DOM(Document Object Model)文档对象模型，所谓文档，也就是对网页中的内容、结构和样式进行操作，对象也就是在操作过程中返回值为对象类型，我们学习DOM主要就是对元素进行创建、增、删、改、查、属性操作、时间操作，来看下DOM树吧，最顶层就是Document
获取元素
获取元素有很多方法，可以通过id获取，可以通过类获取，其中querySelector既可以通过id也能通过类，详细内容都在注释里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素</title>
</head>
<body>
<div id="time">2019.10.12</div>
<div class="box">盒子</div>
<div class="box">盒子</div>
<ul id="ul">
<li>我是丽丽</li>
<li>我是丽丽</li>
<li>我是丽丽</li>
<li>我是丽丽</li>
<li>我是丽丽</li>
</ul>
<script>
//js是从上往下执行的，所以js要写到div下面
//通过id获得元素
var time = document.getElementById('time');
console.log(time);//这里就获得了<div id="time">2019.10.12</div>元素
console.log(typeof time);//返回的time是一个object对象
//获取多个元素
var lis = document.getElementsByTagName('li');//这里返回的是个集合，伪数组的形式
console.log(lis);//这里可以通过下标访问，第一个元素是lis[0]
//如果这里有很多的li而你只想获得ul中的li可以如下指定获取方法
var ul = document.getElementById('ul');
var lis1 = ul.getElementsByTagName('li');
console.log(lis1);
//通过class获得元素
var boxs = document.getElementsByClassName('box');
console.log(boxs);
//querySelector() 返回指定选择器的第一个元素，类要加. id要加#，这个比较常用
var box = document.querySelector('.box');//这是类选择器
console.log(box);
var ul1 = document.querySelector('#ul');//这是id选择器
console.log(ul1);
var li = document.querySelector('li');//标签选择器
console.log(li);
//querySelectorAll() 返回一个集合，是个伪数组的形式
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis2 = document.querySelectorAll('li');
console.log(lis2);
</script>
</body>
</html>
运行结果
操作元素
操作元素是个重头戏了，可以通过元素内容、元素属性、表单属性、样式属性进行操作，具体操作都有注释，由于运行是交互式的结果，这里就进行演示了，只能截一张表面上的图了，感兴趣的可以复制代码自己尝试下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作元素</title>
<style>
.d {
width: 200px;
height: 200px;
background-color: green;
}
.change {
width: 500px;
height: 500px;
background-color: pink;
}
</style>
</head>
<body>
<button id="btn">点击我</button>
<div>点击按钮，我会发生变化</div>
<button id="btn1">盒子1</button>
<button id="btn2">盒子2</button><br>
<img src="btn1.jpg" alt="我是盒子1"><br>
<button id="btn3">按钮</button>
<input type="text" value="输入内容">
<div class="d"></div>
<div id="dd" data-index="2"></div>
<script>
//元素内容操作
var btn = document.querySelector('#btn');
var div = document.querySelector('div');
//这里用到了onclick点击事件，后面会着重讲解事件
btn.onclick = function () {
//div.innerText = '<strong>我变化了</strong>';
//innerText是不能识别HTML标签的，而innerTHML可以识别HTML标签，后者比较常用
div.innerHTML = '<strong>我变化了</strong>';
}
//元素属性操作
var btn1 = document.querySelector('#btn1');
var btn2 = document.querySelector('#btn2');
var img = document.querySelector('img');
btn1.onclick = function () {
img.src = 'btn1.jpg';
img.alt = '我是盒子1';
}
btn2.onclick = function () {
img.src = 'btn2.jpg';
img.alt = '我是盒子2';
}
//表单属性操作
var btn3 = document.querySelector('#btn3');
var input = document.querySelector('input');
btn3.onclick = function () {
input.value = '我被点击了';
//当点击之后可以通过disabled禁用点击按钮
btn3.disabled = true;//也可以用this.disabled = true;
}
//样式属性操作
var di = document.querySelector('.d');
di.onclick = function () {
//单个改变样式
// this.style.backgroundColor = 'blue';
// this.style.width = '300px';
//通过类的方式修改多个样式
this.className = 'change';
}
//自定义属性操作
var dd = document.querySelector('#dd');
console.log(dd.id);//元素直接点属性，这里的属性是内置的属性
console.log(dd.getAttribute('data-index'));//这里通过getAttribute()获得自定义属性，一般是data-开头
dd.setAttribute('data-time',10);//这是设置属性
</script>
</body>
</html>
运行结果：
节点操作
在DOM中所有的节点组成了一棵树，树中的各个节点有父子关系和兄弟关系，这里演示了获得父节点、获得子节点、获得第一个和最后一个节点、获得兄弟节点、动态创建节点、删除节点还有辅助节点，在这里我都写到了一个文件中，方便读者复制了，自己运行，好好思考其中的意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点操作</title>
</head>
<body>
<div class="box">
<span class="x">x</span>
</div>
<ul>
<li>hello</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<div class="box1">我是div</div>
<span class="sp">我是span</span>
<script>
//获得父节点
var x = document.querySelector('.x');//这是拿到了span元素
console.log(x);
var div = x.parentNode;//用节点操作，可以直接拿到离它最近的父节点，节点也就是上面展示的DOM树
console.log(div);
//获得子节点
var ul = document.querySelector('ul');
var lis = ul.childNodes;//这里会得到7个元素，其中有3个元素节点li，4个文本节点这里是换行
console.log(lis);
var lis1 = ul.children;//这里得到的是4个元素，都是li
console.log(lis1);
//获得第一个和最后一个节点，当然了也可以通过上面获得的lis[0]来访问第一个，长度减1获得最后一个
var ol = document.querySelector('ol');
console.log(ol.firstChild);//这是第一个节点，但是这是text文本节点
console.log(ol.lastChild);//这是最后一个节点，但是这是text文本节点
console.log(ol.firstElementChild);//这是第一个元素，也就是li
console.log(ol.lastElementChild);//这是最后一个元素，也就是li
//获得兄弟节点
var div1 = document.querySelector('.box1');
console.log(div1.nextSibling);//这里获得的是下一个节点，这里是text文本节点
console.log(div1.previousSibling);//这里获得的是上一个节点，这里是text文本节点
console.log(div1.nextElementSibling);//这里获得的是span也就是下一个元素节点
console.log(div1.previousElementSibling);//这里返回的是ol也就是上一个元素节点
//动态创建节点
var li = document.createElement('li');
var ul1 = document.querySelector('ul');
ul1.appendChild(li);//将li节点追加到ul后面
var li1 = document.createElement('li');
ul1.insertBefore(li1,ul.children[0]);//在某个元素前插入元素
//删除节点
var ul2 = document.querySelector('ul');
ul2.removeChild(ul.children[0]);//删除父元素中的子节点
//复制节点
var ul3 = document.querySelector('ul');
var li3 = ul3.children[0].cloneNode();//这里的复制是只复制标签，不复制内容
ul3.appendChild(li3);
var li4 = ul3.children[0].cloneNode(true);//这里父子的有内容
ul3.appendChild(li4);
</script>
</body>
</html>
运行结果：
事件操作
事件注册操作
事件注册操作中，有两种常用的方法，一种是传统的方式，另一种是比较常用的方式，在这里一一列出，这里需要自己运行点击才能看到结果，所以这个就不截图了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件注册操作</title>
</head>
<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
//在下面的测试中，屏幕只会弹出一个world框框，该传统方式会把第一个框框覆盖掉
var btns = document.querySelectorAll('button');
btns[0].onclick = function () {
alert('hello');
}
btns[0].onclick = function () {
alert('world');
}
//这个是用事件监听注册事件，解决了传统的覆盖问题，比较常用
btns[1].addEventListener('click',function () {
alert('欢迎');
});
btns[1].addEventListener('click',function () {
alert('光临');
});
</script>
</body>
</html>
删除事件
有些事件你只想执行有限次，所以你需要用到删除事件，就像注册账号时，发送过一个验证码之后，需要等一定的事件才能再次发送一样，这里也是展示两种方式的删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除事件</title>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
//传统方式删除事件
divs[0].onclick = function () {
alert('1');
divs[0].onclick = null;
}
divs[1].addEventListener('click',fn);
function fn() {
alert('2');
divs[1].removeEventListener('click',fn);
}
</script>
</body>
</html>
DOM事件流
关于这个DOM事件流的描述，我都写到了注释里了，简单来说就是事件执行是有一定顺序的，可以理解为从父到子，从子到父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM事件流</title>
<style>
.father {
width: 200px;
height: 200px;;
background-color: green;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<!--DOM事件流分为三个阶段，一个是捕获阶段，一个是目标阶段，最后一个是冒泡阶段
如果我们给div注册了点击事件，那么首先是document接收到点击事件，没有执行程序，然后html接收到点击事件
没有执行程序，然后再是body接受到点击事件，也没有执行程序，这是捕获阶段。然后找到div，有执行程序，
找到div就是目标阶段了。 然后再回到body，收到点击事件，没有执行程序，再到html，也没有执行程序，最后到
document，也没有执行程序，这就是冒泡阶段-->
<div class="father">
<div class="son">son</div>
</div>
<script>
//捕获阶段，addEventListener 第三个参数为true
// document->html->body->father->son
var son = document.querySelector('.son');
/*son.addEventListener('click',function () {
alert('son');
},true);
var father = document.querySelector('.father');
father.addEventListener('click',function () {
alert('father');
},true);*/
//冒泡阶段, addEventListener 第三个参数为false，或者是省略
// son->father->body->html->document
son.addEventListener('click',function () {
alert('son');
},false);
var father = document.querySelector('.father');
father.addEventListener('click',function () {
alert('father');
},false);
</script>
</body>
</html>
事件对象
事件对象，也就相当于一个形参，是系统自动设置的，里面有很多的参数，这里截图展示下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象</title>
</head>
<body>
<div>点击试试</div>
<script>
//传统方式
var div = document.querySelector('div');
// div.onclick = function (event) {
// //这里的event就是一个事件对象，是系统自动创建的，里面是事件的相关数据的集合
// //这里的event也可以写成e，反正只是个形参
// console.log(event);
// }
//添加监听方式
div.addEventListener('click',function (e) {
console.log(e);
});
</script>
</body>
</html>
上面有一个是target，返回的是div，在这里很容易与this产生混淆，这里举例单独说下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
var div = document.querySelector('div');
div.addEventListener('click',function (e) {
console.log(e.target);//返回的是触发事件的对象
console.log(this);//返回的是绑定事件的对象
})
var ul = document.querySelector('ul');
ul.addEventListener('click',function (e) {
console.log(e.target);//这里指向我们点击的对象，点击li返回就是li
console.log(this);//这里指向的绑定事件，也就是ul
})
</script>
</body>
</html>
当点击ul中的li的时候，返回的结果是不一样的