DOM介绍

JavaScript一共包括三部分，分别是ECMAScript也就是JavaScript基础、DOM和BOM。

今天来将一下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个元素，都是liconsole.log(lis1);//获得第一个和最后一个节点，当然了也可以通过上面获得的lis[0]来访问第一个，长度减1获得最后一个var ol = document.querySelector('ol');console.log(ol.firstChild);//这是第一个节点，但是这是text文本节点console.log(ol.lastChild);//这是最后一个节点，但是这是text文本节点console.log(ol.firstElementChild);//这是第一个元素，也就是liconsole.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->sonvar 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->documentson.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返回就是liconsole.log(this);//这里指向的绑定事件，也就是ul})
</script>
</body>
</html>

当点击ul中的li的时候，返回的结果是不一样的