那年杏花微雨，你说你是DOM

皇上今天想翻谁的牌子？

一、==什么是DOM==
- 1.1 ==何为DOM==
- 1.2 ==何为Web API==
- 1.3 ==为什么要学习DOM==
二、==走进DOM==
- 2.1 ==获取元素==
- 2.1.1 ==根据ID获取页面元素==
- 2.1.2 ==根据标签名获取页面元素==
- 2.1.3 ==根据HTML5新增获取页面元素==
- 2.1.4 ==获取特殊元素==
- 2.2 ==事件==
- - 2.2.1 ==什么是事件==
  - 2.2.2 ==执行事件的步骤==
  - 2.2.3 ==常见事件==
  - 2.2.4 ==注册事件==
  - 2.2.5 ==删除（解绑）事件==
  - 2.2.6 ==事件流==
  - 2.2.7 ==事件对象==
- 2.3 ==操作元素==
- - 2.3.1 ==改变元素内容==
  - 2.3.2 ==修改元素属性==
  - 2.3.3 ==表单元素属性的操作==
  - 2.3.4 ==样式属性操作==
  - 2.3.5 ==自定义属性操作==
- 2.4 ==节点操作==
- - 2.4.1 ==节点概述==
  - 2.4.2 ==父子节点==
  - 2.4.3 ==兄弟节点==
  - 2.4.4 ==创建和添加节点==
  - 2.4.5 ==删除节点==
  - 2.4.6 ==复制节点==
  - 2.4.7 ==动态创建元素==
总结

一、什么是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，不要加on
listener 事件处理函数，事件发生时，会调用该监听函数
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 返回当前元素的下一个兄弟节点，找不到返回null
node.previousSibling 返回当前元素的上一个兄弟节点，找不到返回null
node.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() 创建多个元素效率稍低，但结构更清晰。

总结

那年杏花微雨，你说你是DOM相关推荐

那年杏花微雨，你说你是BOM
那年杏花微雨,你说你是BOM 皇上,敬事房的人来了,该翻牌子了一.==什么是BOM== 1.1 ==BOM概述== 1.2 ==DOM与BOM的区别== 二.==window对象的常用事件== 2. ...
灵飞经4·西城八部第十九章片山微雨（三）
"放肆! "少女厉声喝道,"朱微两个字也是你叫的么?" 乐之扬没好气道:"不叫朱微叫什么? " "当然是叫殿下.叫公主." ...
灵飞经4·西城八部第十九章片山微雨（二）
老太监当先引路,左一拐,右一折,白影萧索,恍若鬼魅,走了数百步,到了一处回廊.冷玄左右看看,但见无人,陡然脚步一顿,向后掠出.乐之扬眼前一花,便觉疾风袭来.他欲要躲闪,却快不过冷玄鬼魅幻形似的身手,只 ...
微任务，宏任务，DOM渲染的执行顺序
event loop过程同步代码,一行一行放在Call Stack执行遇到异步先记录下来,等待时机(定时,网络请求) 时机一到立马推入Callback Queue中如Call Stack为空(同 ...
JavaScript基础：浅聊事件循环(Event LooP)以及微任务，宏任务，DOM渲染
一直说JavaScript是单线程的执行的(当然也可以通过其它其它的方式异步,本篇暂时不聊). 内核的组成首先聊一下浏览器的内核组成部分,当然下面也不是全部,而只是说一些常见的. 主线线程 js引擎 ...
多重比较和多重比较陷阱
方差分析中的多重比较 1.当拒绝原假设时,表明μi(i=1,2,-,k)之间的差异是显著的,但μ1与μ2.μ1与μ3.-.μ1与μk.-.μk-1与μk之间究竟是哪两个均值不同呢? 这就需要做进一步的 ...
c语言从入门到脱发,知乎|脱发是一种怎样的体验？
原标题:知乎|脱发是一种怎样的体验? 听说脱发已经成为比脱单更困扰当代大学生的问题,心系学子的小编们立刻打开手机开始天罗地网式搜寻,终于找到了拯救脱发的秘籍! 今日财大知乎,带你走进脱发的世界... ...
不要让等待成为一种伤害
情感语录:不要让爱成为一种遗憾 1.男人是否变心和女人是否美丽,之间没有必然联系.当男人厌倦了女人,任何一个新的女人都会比她更有吸引力.所以,女人保持美丽提升智慧并不单纯是为了留住老公,而是,即便某天 ...
熹贵妃竟是这种隐藏属性，从MBTI来看甄嬛“三姐妹”的爱恨情仇?
就在不久前的5月17日,农历四月十七,是熹贵妃的农历生日,这一天为了给嬛嬛庆生,朋友圈微博等各大平台,可热闹了起来,这盛况堪比那年果郡王为嬛嬛庆生- 如今,距<甄嬛传>首播已经有11年之久 ...