那年杏花微雨，你说你是DOM
皇上今天想翻谁的牌子？
一、什么是DOM
1.1 何为DOM
HTML DOM（文档对象模型）
DOM是W3C组织推荐的处理可拓展标记语言的标准编程接口。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
HTML DOM 模型被结构化为对象树：（图为对象的 HTML DOM 树）
- 文档：一个页面就是一个文档，DOM中用document表示
- 元素：页面中的所有标签都是元素，DOM中用element表示
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中用node表示
DOM把以上内容都看作是对象
1.2 何为Web API
API（Application Programming Interface）应用程序编程接口，是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码或理解内部工作机制的细节。简单理解 API是给程序员提供的一种工具，以便能更轻松地实现想要完成的功能。比如手机充电的接口，我们要实现充电这个功能，我们不关心手机内部变压器内部怎么储存电，我们不关心这个充电线怎么制作的，我们只知道我们拿着充电线插进充电接口就可以充电。
Web API是浏览器提供的一套操作浏览器功能和页面元素的API（分别对应BOM和DOM）。因为Web API很多，所以我们将这个阶段称为Web APIs。Web API很多都是方法（函数）。
1.3 为什么要学习DOM
在JS基础阶段，我们学习的是ECMA Script标准规定的基本语法，要求同学们掌握JS基础语法，只学习基本语法，做不了常用的网页交互效果。如轮播、倒计时等。Web APIS阶段是W3C组织的标准，我们主要学习DOM和BOM。Web APIS是我们JS所独有的部分，主要学习页面交互功能，需要使用JS基础的课程内容做基础。
二、走进DOM
2.1 获取元素
获取页面元素的几种方式
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
2.1.1 根据ID获取页面元素
通过getElementById()方法可以获取带有ID的元素对象，返回一个匹配特定ID的元素，（若没有找到返回null）由于元素的ID在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。
<body>
<div id="time">2022-6-22</div>
<script>
var time = document.getElementById('time');
</script>
</body>
</html>
2.1.2 根据标签名获取页面元素
通过getElementsByTagName()方法可以返回带有指定标签名的对象的集合
<ul>
<li>粉红娇嫩</li>
<li>你如今几岁了</li>
<li>这几年的情爱与时光</li>
<li>终究是错付了</li>
</ul>
<script>
var wanwan = document.getElementsByTagName('li');
console.log(wanwan);
</script>
返回的是获取过来元素对象的集合，以伪数组的形式存储（如果页面中没有这个元素，返回一个空的伪数组）。且得到的元素对象是动态的。
还可以获取某个元素（父元素）内部所有指定标签名的子元素。
父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。
<body>
<ul>
<li>粉红娇嫩</li>
<li>你如今几岁了</li>
<li>这几年的情爱与时光</li>
<li>终究是错付了</li>
</ul>
<ul>
<li>那年杏花微雨</li>
<li>你说你是果郡王</li>
<li>逆风如解意</li>
<li>容易莫摧残</li>
</ul>
<script>
var wanwan = document.getElementsByTagName('ul');
console.log(wanwan[0].getElementsByTagName('li'));
console.log(wanwan[1].getElementsByTagName('li'));
</script>
</body>
2.1.3 根据HTML5新增获取页面元素
getElementByClassName()根据类名获得某些元素集合
var huanhuan = document.getElementByClassName('silang');
querySelector()返回指定选择器的第一个元素对象
var huanhuan = document.querySelector('.silang');//选定silang这个类的第一个元素
var wuanwuan = document.querySelector('#silang');//选定id=“silang”的这个元素
var huaner = document.querySelector('li');//选定body中第一个li
querySelectorAll()返回指定选择器的所有元素对象集合
var huanhuan = document.querySelectorAll('.silang');//选定silang这个类的所有元素
var wuanwuan = document.querySelector('li');//选定body中所有的li
2.1.4 获取特殊元素
特殊元素指①body标签②html标签
var zhenhuan = document.body;
var anlingrong = document.documentElement;
2.2 事件
2.2.1 什么是事件
Javascript使我们有能力创建动态页面，而事件是可以被Javascript侦测到的行为。
简单理解：触发响应机制
事件三要素
- 事件源–事件被触发的对象，如按钮
- 事件类型–如何触发，如鼠标悬停、键盘按下
- 事件处理程序–通过一个函数赋值的方式完成
<body>
<button id="zhenhuan">甄嬛</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
alert('臣妾要告发熹贵妃私通');
}
</script>
</body>
上述例子中btn是事件源，onclick是事件类型，=后面是事件处理程序
2.2.2 执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采取函数赋值形式）
2.2.3 常见事件
常见鼠标事件
常用键盘事件
2.2.4 注册事件
给元素添加事件，称为注册事件或者绑定事件，注册事件的方式有两种，①传统方式和②方法监听注册方式
这里主要介绍后一种方式–方法监听注册方式
addEventListener(event, function, useCapture) 将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
event事件类型字符串,比如click，mouseover，不要加onlistener事件处理函数，事件发生时，会调用该监听函数useCapture可选参数，是一个布尔值，默认是false
<body>
<button>果郡王</button>
<button>十七爷</button>
<script>
var btns = document.querySelectorAll('button');
//1.传统方式注册事件
btns[0].onclick = function(){
alert('允礼');
}
//2.事件监听注册事件
//(1)事件类型是字符串，必须加引号，而且不加on
//(2)同一个元素、同一个事件可以添加多个监听器
btns[1].addEventListener('click',function(){
alert('果子狸');
})
btns[1].addEventListener('click',function(){
alert('小王');
})
</script>
</body>
2.2.5 删除（解绑）事件
- 传统注册方式
eventTarget.onclick = null - 移除监听方式
removeEventListener
<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;
}
//2、removeEventListener删除事件
divs[1].addEventListener('click',fn);//里面的fn不需要调用加小括号
function fn(){
alert('终究是错付了');
divs[1].removeEventListener('click',fn);
}
</script>
</body>
2.2.6 事件流
2.2.7 事件对象
Event对象代表事件的状态，比如键盘按键的状态，鼠标的位置，鼠标按钮的状态。
简单理解–事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，他有很多属性和方法。比如谁绑定了这个事件，鼠标或者键盘的位置等。
这个event是个形参系统，帮我们设定为事件对象，不需要传递实参过去。我们注册事件时，Event对象就会被系统自动创建，并依次传递给事件监听器。
需要注意的是，事件对象本身的获取存在兼容问题。标准浏览器中是浏览器给方法传递的参数，只需要定义形参一就可以获取到。在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。
e.target 返回触发事件的对象，点击了哪个元素从而触发了这个事件，就返回哪个元素
this 哪个元素绑定了这个点击事件，就返回谁
2.3 操作元素
Javascript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素的内容属性等。
2.3.1 改变元素内容
element.innerText
去除空格和换行，不识别html标签，可读写，非标准
<body>
<button>甄嬛</button>
<div>那年杏花微雨</div>
<script>
//获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//注册事件
btn.onclick = function(){
div.innerText = '你说你是果郡王';
}
</script>
</body>
element.innerHTML
保留空格和换行，识别html标签，可读写，W3C标准
2.3.2 修改元素属性
<body>
<button id="zhenhuan">甄嬛</button>
<button id="shenmeizhuang">沈眉庄</button>
<img src="zhenhuan.jpg">
<script>
//1.获取元素
var zhenhuan = document.getElementById('zhenhuan');
var shenmeizhuang = document.getElementById('shenmeizhuang');
var img = document.querySelector('img');
//2/注册事件 处理程序
zhenhuan.onclick = function(){
img.src='zhenhuan.jpg';
}
shenmeizhuang.onclick = function(){
img.src='shenmeizhuang.jpg';
}
</script>
</body>
2.3.3 表单元素属性的操作
改变文本框内容
<body>
<button>甄嬛</button>
<input type="text" value="输入内容">
<script>
//1.获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
//2.注册事件 处理程序
btn.onclick = function(){
input.value = '臣妾要告发熹贵妃私通';
//如果想要某个表单被禁，用不能再点击，用disabled将这个按钮禁用
this.disabled = true;
//this指向的是事件函数的调用者
}
</script>
</body>
表单验证
可用到this.value.length
显示和隐藏文本框内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<<device-width>>, initial-scale=1.0">
<title>Document</title>
<style>
input{
color: #999;
}
</style>
</head>
<body>
<input type="text" value="嬛嬛">
<script>
//1.获取元素
var text = document.querySelector('input');
//2.注册事件 处理程序
text.onfocus = function(){
if (this.value == '嬛嬛'){
this.value = '';
}
this.style.color = '#333';
}
text.onblur = function(){
if(this.value == ''){
this.value = '嬛嬛';
}
this.style.color = '#999';
}
</script>
</body>
</html>
2.3.4 样式属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<<device-width>>, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
//1.获取元素
var div = document.querySelector('div');
//2.注册事件 处理程序
div.onclick = function(){
div.style.backgroundColor = 'red';
}
</script>
</body>
</html>
通过js修改的样式默认写入行内作为行内式而存在，因而优先级高
通过className更改元素样式–适合修改样式较多的情况（直接覆盖掉原先的类）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<<device-width>>, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 200px;
width: 200px;
background-color:maroon;
color:white;
}
.change{
color: maroon;
background: pink;
}
</style>
</head>
<body>
<div>莞莞类卿</div>
<script>
var test = document.querySelector('div');
test.onclick = function(){
this.className = 'change';
}
</script>
</body>
</html>
若要保留原先的类中的效果
this.className = '原类名+空格+新类名';
2.3.5 自定义属性操作
获取属性值
element.属性–获取内置属性值（元素本身自带）element.getAttribute('属性')–获取程序员自定义的属性值
设置属性值
element.属性 = '值'–设置内置属性值element.getAttribute('属性','值')–设置程序员自定义的属性值
移除属性值
element.removeAttribute('属性')
为了方便区分属性值是自己定义的还是元素自带的，HTML5规定自定义属性以data开头作为属性名并赋值
<div data-index="1"></div>
HTML5新增的dataset获取自定义属性
<body>
<div data-index="1" data-list-item="huanhuan">莞莞类卿</div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
//HTML5新增的dataset可以获取所有data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
//如果自定义属性里有多个-连接的单词，我们获取的时候采取驼峰命名法
console.log(div.dataset.listName);
</script>
</body>
2.4 节点操作
利用DOM提供的方法获取元素逻辑性不强，比较繁琐，于是我们接下来学习利用节点层级关系（父子级）获取元素
页面中所有内容都是节点，标签是元素节点，内容是文本节点，属性是属性节点。
2.4.1 节点概述
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）
2.4.2 父子节点
- 父节点
parentNode得到的是离元素最近的父级节点 - （嫡出）子节点
childNodes得到所有的子节点，包含元素节点、文本节点等
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
console.log(ul.childNodes);
</script>
</body>
- （庶出）子节点
children获取所有的子元素节点
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
console.log(ul.children);
</script>
</body>
- 第一个子节点
firstChild不管是文本节点还是元素节点 - 第一个元素节点
firstElementChild（有兼容性问题） - 最后一个子节点
lastChild不管是文本节点还是元素节点 - 最后一个元素节点
lastElementChild（有兼容性问题）
实际开发过程中
console.log(ol.children[0]);//返回第一个元素节点
console.log(ol.children[ol.childdren.length-1]);//返回最后一个元素节点
2.4.3 兄弟节点
node.nextSibling返回当前元素的下一个兄弟节点，找不到返回nullnode.previousSibling返回当前元素的上一个兄弟节点，找不到返回nullnode.nextElementSibling返回当前元素的下一个兄弟元素节点 （有兼容性问题）node.previousElementSibling返回当前元素的下一个兄弟元素节点 （有兼容性问题）
2.4.4 创建和添加节点
-
document.creatElement('tagName')创建由 tagName 指定的 HTML 元素，也称为动态创建元素节点。 -
node.appendChild(child)方法将一个节点添加到指定父节点的子节点列表的末尾 -
node.insertBefore(child,指定元素)将一个节点添加到父节点的指定子节点前面
<body>
<ul>
<li>我是第一个</li>
</ul>
<script>
var li = document.createElement('li');
var ul = document.querySelector('ul');
ul.appendChild(li);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
</script>
</body>
2.4.5 删除节点
node.removeChild(child) 从DOM中删除一个子节点，返回删除的节点
<body>
<ul>
<li>甄嬛</li>
<li>沈眉庄</li>
<li>温实初</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.removeChild(ul.children[2]);
</script>
</body>
2.4.6 复制节点
node.cloneNode() 返回调用该方法的节点的一个副本
注意： 如果括号参数为空或false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的内容；如果括号参数为true，则是深拷贝，即克隆复制节点本身及里面内容。
<body>
<ul>
<li>甄嬛</li>
<li>沈眉庄</li>
<li>温实初</li>
</ul>
<script>
var ul = document.querySelector('ul');
var huanhuan = ul.children[0].cloneNode(true);
ul.appendChild(huanhuan);
</script>
</body>
2.4.7 动态创建元素
document.write()直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘innerHTML将内容写入某个DOM节点，不会导致页面全部重绘，创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂document.createElement()创建多个元素效率稍低，但结构更清晰。
700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
