JavaScript进阶 | DOM

caiyi 2021/8/2

文章目录

JavaScript进阶 | DOM
- 一、DOM简介
- 二、获取元素
- - 1. 根据ID获取
  - 2. 根据标签名获取
  - 3. 根据父元素+标签名获取
  - 4. 通过H5新增方法获取
  - 5. 获取body和html元素对象
- 三、事件基础
- - 1. 事件三要素
  - 2. 执行事件的步骤
- 四、操作元素
- - 1. 改变元素的内容
  - 2. 改变元素属性
  - 3. 改变样式属性
  - 4. 小总结
  - 5. 排他思想
  - 6. 自定义属性
  - 7. H5自定义属性
  - 8. 案例
- 五、节点操作
- - 1. 节点概述
  - 2. 父级节点
  - 3. 子结点
  - 4. 兄弟节点
  - 5. 创建节点
  - 6. 了解
- 六、DOM 核心（半期总结）
- - 1. 创建
  - 2. 增加
  - 3. 删除
  - 4. 修改
  - 5. 查找
  - 6. 属性操作
- 七、事件高级
- - 1. 注册事件(绑定事件)
  - 2. 删除事件(解绑事件)
  - 3. DOM事件流
  - 4. 事件对象
  - 5. 事件对象阻止默认行为
  - 6. 阻止事件冒泡
  - 7. 事件委托
  - 8. 常用的鼠标事件
  - 9. 常用的键盘事件

一、DOM简介

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

dom树：

文档：一个页面就是一个文档，DOM中使用doucument来表示

元素：页面中的所有标签都是元素，DOM中使用 element 表示

节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

DOM 把以上内容都看做是对象

二、获取元素

1. 根据ID获取

可以获取带ID的元素对象

doucument.getElementByld('id名')
// 参数id是大小写敏感的字符串，所以 time 一定要加引号
// 返回的是一个元素对象不是字符串

<div id="time">2021-8-3</div>
<script>// 因为我们文档页面从上往下加载，所以得先有标签，所以script写在标签下面var timer = document.getElementById('time');console.log(timer); //<div id="time">2021-8-3</div>console.dir(timer); // 打印元素对象的属性和方法 //dic#time
</script>

2. 根据标签名获取

根据标签名获取，返回带有指定标签名的对象的集合

doucument.getElementsByTagName('标签名');
// 返回的是获取过来元素对象的集合 以伪数组的形式存储

<ul><li>知否知否</li><li>知否知否</li><li>知否知否</li>
</ul>
<script>var lis = document.getElementsByTagName('li');console.log(lis);  //HTMLcollection(3) [li,li,li]console.log(lis[0]); //<li>知否知否</li>// 依次打印,遍历for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}// 如果页面中只有 1 个 li，返回的还是伪数组的形式// 如果页面中没有这个元素，返回的是空伪数组
</script>

3. 根据父元素+标签名获取

还可以根据标签名获取某个元素（父元素）内部所有指定标签名的子元素,获取的时候不包括父元素自己

element.getElementsByTagName('标签名')
ol.getElementsByTagName('li');

<script>//element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素var ol = document.getElementById('ol');console.log(ol[0].getElementsByTagName('li'));
</script>

注意：父元素必须是单个对象(必须指明是哪一个元素对象)，不能是伪数组，会报错

4. 通过H5新增方法获取

注意html5是ie9以上的版本才支持的

根据类名return元素对象合集伪数组

document.getElementsByClassName('类名');

根据指定选择器（.类选择器，#id选择器，标签选择器）return第一个元素对象

document.querySelector('选择器');

根据指定选择器（.类选择器，#id选择器，标签选择器）retrun所有元素对象合集，伪数组

document.querySelectorAll('选择器');

用法举例：

<div class="box"></div>
<div class="box"></div>
<div id="nav"><ul><li>首页</li><li>产品</li></ul>
</div>
<script>var boxs = document.getElementsByClassName('box'); console.log(boxs); //HTMLcollection(2) [div.box,div.box]var firstBox = document.querySelector('.box');console.log(firstBox); //<div class="box"></div>var nav = document.querySelector('#nav');console.log(nav);var li = document.querySelector('li');console.log(li); //<li>首页</li>var allBox = document.querySelectorAll('.box');console.log(allBox); //HTMLcollection(2) [div.box,div.box]var lis = document.querySelectorAll('li');console.log(lis);
</script>

5. 获取body和html元素对象

document.body; //返回body元素对象
document.documentElement; //返回html元素对象

三、事件基础

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

1. 事件三要素

事件源：事件被触发的对象

事件类型：如何触发，什么事件，比如是鼠标点击，还是鼠标经过，还是键盘按下

事件处理程序：通过一个函数赋值的方式完成

<script>var btn = document.getElementById('btn');btn.onclick = function() {alert('吃麻辣鸡');}
</script>

2. 执行事件的步骤

获取事件源
注册事件(绑定事件)
添加事件处理程序(采取函数赋值形式)

<div>1234</div>
<script>var div = document.querySelector('div');div.onclick = function() {console.log('我被选中了');}
</script>

鼠标事件类型：

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

四、操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。注意以下都是属性

1. 改变元素的内容

从起始位置到终止位置的内容，不识别html标签，去除空格和换行，非标准

element.innerText = 'str'

起始位置到终止位置的全部内容，识别HTML标签，保留空格和换行，W3C标准

element.innerHTML

这两个属性都是可读写的可以获取元素里面的内容

innerText 和 innerHTML 只能修改普通盒子，比如div标签里面的内容

<div></div>
<p>我是文字<span>123</span>
</p><script>var div = document.querySelector('div');div.innerText = '<strong>今天是：2021</strong>'; //不会加粗div.innerHTML = '<strong>今天是：2021</strong>'; //会加粗var p = document.querySelector('p');console.log(p.innerText);console.log(p.innerHTML);
</script>

2. 改变元素属性

修改img属性：

img.src = 'xxx';
img.title = 'xxx';

通过点击不同按钮切换图片举例：

<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="data:images/ldh.jpg" title="刘德华"><script>var ldh = document.getElementById('ldh');var zxy = document.getElementById('zxy');var img = document.querySelector('img');zxy.onclick = function() {img.src = 'images/zxy.jpg';}ldh.onclick = function() {img.src = 'images/ldh.jpg';}
</script>

修改表单属性：

input.value = 'xxx';
input.type = 'xxx';
input.checked = 'xxx';
input.selected = true / false;
input.disabled = true / false;  //禁用了

btn.onClick = function() {input.value = 'clicked';this.disabled = true; //this指向的是函数事件的调用者
}

3. 改变样式属性

我们可以通过 JS 修改元素的大小、颜色、位置等样式

// 行内样式操作 element.style
div.style.backgroundColor = 'pink';
div.style.width = '250px';
box.style.display = 'none';
// 类名样式操作 element.className

两种操作方法改变样式属性对比举例：

<sytle>.change {background-color: purple;color: #fff;font-size: 25px;}
</sytle><div class="first">文本</div>
<script>var test = document.querySelector('div');test.onclick = function() {// 1. 使用 element.style 获得修改元素样式，样式比较少或者功能简单的情况下this.style.backgroundColor = 'purple';this.style.color = '#fff';this.style.fontSize = '25px';// 2. 通过 element.className 更改元素的样式，适合于样式较多或者功能复杂的情况this.className = 'change';// 3. 如果想要保留原先的类名，我们可以这么做：多类名选择器，两个类名用空格隔开this.className = 'first change';}
</script>

注意：

JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor
JS 修改 style 样式操作，产生的是行内样式，CSS权重比较高
如果样式修改较多，可以采取操作类名方式更改元素样式
class 因为是个保留字，因此使用 className 来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名

4. 小总结

5. 排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法

首先先排除其他人，然后才设置自己的样式这种排除其他人的思想我们成为排他思想

实现：

<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>// 1. 获取所有按钮元素var btns = document.getElementsByTagName('button');for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {// (1) 我们先把所有的按钮背景颜色去掉for (var i = 0; i < btns.length; i++) {btns[i].style.backgroundColor = '';}// (2) 然后才让当前的元素背景颜色为pinkthis.style.backgroundColor = 'pink';}}</script>
</body>

6. 自定义属性

获取属性值

element.属性; //获取内置属性值 id className
element.getAttribute('属性'); //获取自定义的属性

设置属性值

element.属性 = '值';  //设置内置属性值 id class
element.setAttribute('属性','值'); //设置自定义的属性

移除属性
```
element.removeAttribute('属性');
```

<body><div id="demo" index="1" class="nav"></div><script>var div = document.querySelector('div');// 1. 获取元素的属性值console.log(div.id);console.log(div.getAttribute('id'));console.log(div.getAttribute('index'));// 2. 设置元素属性值div.id = 'test';div.className = 'navs';div.setAttribute('index', 2);div.setAttribute('class', 'footer'); // 这里面写的就是class 不是className// 3 移除属性 removeAttribute(属性)    div.removeAttribute('index');</script>
</body>

7. H5自定义属性

自定义属性目的：保存并保存数据，有些数据可以保存到页面中而不用保存到数据库中

有些自定义属性很容易引起歧义，不容易判断到底是内置属性还是自定义的，所以H5有了规定

设置H5自定义属性

H5规定自定义属性 data-开头作为属性名并赋值
```
<div data-index = "1"></>
div.setAttribute('data-index',1);
```

获取H5自定义属性

element.getAttribute('data-index') //兼容性获取
element.dataset.index //H5新增的,IE11才开始支持
element.dataset['index']

综合举例：

<body><div data-index="2" data-list-name="andy"></div><script>var div = document.querySelector('div');div.setAttribute('data-time', 20);console.log(div.getAttribute('data-index'));console.log(div.getAttribute('data-list-name'));// dataset 是一个集合里面存放了所有以data开头的自定义属性console.log(div.dataset);console.log(div.dataset.index);console.log(div.dataset['index']);// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法console.log(div.dataset.listName);console.log(div.dataset['listName']);</script>
</body>

8. 案例

仿京东显示隐藏密码明文案例 P17
仿淘宝关闭二维码 P20
循环精灵图 P21
显示隐藏文本框内容 P22
密码验证信息 P24
百度换肤效果 P27
表格隔行变色 P28
表单全选取消全选 P29
tab栏切换 P33

五、节点操作

获取元素通常使用两种方式：

1.利用DOM提供的方法获取元素	2.利用节点层级关系获取元素
document.getElementById()	利用父子兄节点关系获取元素
document.getElementsByTagName()	逻辑性强，但是兼容性较差
document.querySelector()
逻辑性不强，繁琐

这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单

1. 节点概述

网页中的所有内容都是节点（元素、属性、文本等），在DOM 中，节点使用 node 来表示

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，均可被修改，也可以创建或删除。

节点至少有三个基本属性：

- node.nodeType（元素为nodeType1、属性为2、文本为3）
- node.nodeName
- node.nodeValue

我们在实际开发中，节点操作主要操作的是元素节点

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

2. 父级节点

node.parentNode

返回某节点最近的一个父结点

如果指定的节点没有父结点则返回null

<div class="box"><span class="son">×</span>
</div><script>var child = document.querySelector('.son');console.log(child.parentNode);
</script>

3. 子结点

获取所有子节点

Node.childNodes //标准
Node.children   //非标准

关于 Node.childNodes 的说明：

Node.childNodes 返回包含指定节点的子节点的集合，即时更新
返回值包含了所有的子结点，包括元素节点，文本节点等
如果只想要获得里面的元素节点，则需要判断nodeType，所以一般不提倡使用 childNodes

关于 Node.children 的说明：

parentNode.children 是一个只读属性，返回所有的子元素节点
它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）
虽然 children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

var ul = document.querySelector('ul');
console.log(ul.childNodes);  // NodeList(9)
console.log(ul.children);    // HTMLCollection(4)

第一个和最后一个子节点：

Node.firstChild      //返回第一个子节点，找不到则返回null
Node.lastChild       //返回最后一个子节点，找不到则返回null
Node.firstElementChild //返回第一个 **子元素节点** ，找不到则返回null
Node.lastElementChild  //返回最后一个 **子元素节点** ，找不到则返回null
// 后两种方法有兼容性问题，IE9以上才支持

解决方案：

firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

Node.chilren[0]  //返回第一个子元素节点
Node.chilren[Node.chilren.length - 1] //返回最后一个子元素节点

案例：下拉菜单 P41

4. 兄弟节点

获取兄弟节点

node.nextSibling        //返回下一个兄弟节点
node.previousSibling    //返回上一个兄弟节点
node.nextElementSibling //返回下一个兄弟 **元素节点**
node.previousElementSibling  //返回上一个兄弟 **元素节点**
// 后两种方法有兼容性问题，IE9以上才支持

举例：

<body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div');console.log(div.nextSibling);        // #textconsole.log(div.previousSibling);   // #textconsole.log(div.nextElementSibling);    // <span>我是span</span>console.log(div.previousElementSibling);// null</script>
</body>

解决方案：自己封装一个兼容性的函数

function getNextElementSibling(element) {var el = element;while(el = el.nextSibling) {if(el.nodeType === 1){return el;}}return null;
}

5. 创建节点

var newNode = document.createElement('tagName');

添加节点

node.appendChild(newNode)  // 后面追加元素
node.insertBefore(newNode,指定元素) //指定元素前面插入

我们想要页面添加一个新的元素分两步: 1. 创建元素 2. 添加元素

<body><ul><li>123</li></ul><script>var ul = document.querySelector('ul');var li = document.createElement('li');ul.appendChild(li);var lili = document.createElement('li');ul.insertBefore(lili, ul.children[0]);</script>
</body>

删除节点

node.removeChild(child) //从 DOM 中删除一个子节点，返回删除的节点

复制节点

node.cloneNode()

node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
括号参数为空或者为 false ，是浅拷贝，只复制节点本身，不复制里面的子节点
括号参数为 true ，是深拷贝，会复制节点本身，以及里面所有的子节点

案例：简单版发布留言删除留言 P44

<textarea name="" id="">123</textarea>
<button>submit</button>
<ul></ul>
<script>//获取元素var btn = document.querySelector("button");var text = document.querySelector("textarea");var ul = document.querySelector("ul");//注册事件btn.onclick = function fun() {if (text.value == "") {alert("none");} else {// create elementvar newli = document.createElement("li");// append elementul.appendChild(newli);newli.innerHTML = text.value + "  <a href='javascript::'>delete</a>";// delete elementvar as = document.querySelectorAll("a");for (var i = 0; i < as.length; i++) {as[i].onclick = function fun() {ul.removeChild(this.parentNode);};}}};
</script>

案例：动态生成表格 P48

6. 了解

三种动态创建元素的方法：

- doucument.write()
- element.innerHTML
- document.createElement()

doucument.write 和 innerHTML 的区别：

document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘

createElement 和 innerHTML 区别：

innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
createElement() 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下， innerHTML 只要采取数组形式，效率都要比 createElement 高

经典面试题：

createElement 和 innerHTML 哪个创建元素的效率更高？