网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
感激相遇 你好 我是阿ken
作者：请叫我阿ken
链接：请叫我阿ken主页链接
来源：CSDN
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
🌊🌈关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触 JS以及好久不看想要复习的小伙伴。
🌊🌈关于内容：
JavaScript DOM下
文章目录
- 🌊🌈关于前言：
- 🌊🌈关于内容：
- 7.1_排他思想简介
- 7.2_属性操作
- 7.3_自定义属性
- 7.4_节点基础
- 仔细了解一下什么是节点
- 不是很理解下述案例
- 7.5_节点操作
- 运行结果
- 7.6_事件进阶
- 7.7_事件对象
- 没看明白
- 7.8_鼠标事件
- 7.9_键盘事件
- 🌊🌈往期回顾：
- 🌊🌈关于后记：
7.1_排他思想简介
7.1.1_排他思想简介
排他思想，简单理解就是排除掉其他的(包括自己)，然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素。
例如，在开发中，如果有同一组元素，我们想要某一个元素实现某种样式， 这就需要用到循环的排他思想算法来实现。
案例：演示排他操作，
(1) 编写 HTML 结构代码，示例代码如下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
</html>
(2) 编写 JavaScript 代码，实现单击按钮，改变当前按钮背景色效果，示例代码如下，
<script>
// 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns 得到的是类数组对象，使用btns[i]访问数组里的每一个元素
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)然后设置当前的元素背景颜色
this.style.backgroundColor = 'pink';
}
}
</script>
当你点击一个按钮时
上述代码中，获取所有按钮元素，存储在 btns 伪数组中。
使用 for 循环遍历伪数组中的每一个元素 btns[i] 。
给每一个元素添加单击事件。
利用 for 循环首先把所有的按钮背景颜色去掉，然后给当前的元素设置背景颜色为 pink 。
7.1.2_[ 案例 ] 鼠标指针经过时背景变色
当表格中的单元格比较多时，可以在用户鼠标指针经过时把当前行添加背景色，使表格内容显得清晰和一目了然，容易阅读。
(1) 编写 HTML 页面，示例代码如下。
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>0035**</td>
<td>3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
... (此处省略多个tr)
</tbody>
</table>
</body>
(2) 实现鼠标指针经过时背景变色的效果，具体代码如下。
<script>
// 1.获取元素
var trs document.querySelector('tbody').querySelectorAll('tr');
// 2.利用循环绑定注册事件
for(var i = 0; i < trs.length; i++) {
// 3.鼠标指针经过事件 onmouseover
trs[i].onmouseover = function() {
this.className = 'bg';
};
// 4.鼠标指针离开事件onmouseout
trs[1].onmouseout = function() {
this.className = '';
};
}
</script>
上述代码中，第 3 行代码把获取到的 tbody 里面所有的行保存在变量 trs 中。第 5 行代码利用 for 循环来为 trs 中的每一个元素绑定事件。 第 7 ~ 9 行代码为 trs 中的每个元素绑定 onmouseover 鼠标指针经过事件，当鼠标指针进人的时候给当前 tr 项的类名设置为 bg 。第 11 ~ 13 行代码给 trs[i] 绑定 onmouseout 鼠标指针离开事件，当鼠标指针离开时给当前 tr 项的类名设置为空，去掉当前的背景颜色。
7.2_属性操作
在 HTML 中，元素有一些自带的属性，如 div 元素的属性有 id、class、title、style 。开发者也可以为元素添加自定义属性。在实际开发中，自定义属性有很广泛的应用，例如：保存一些需要在 JavaScript 中用到的数据。
7.2.1_获取属性值 element.属性
在 DOM 对象中可以使用 " element.属性 " 的方式来来获取内置的属性值，但是 DOM 对象并不能直接使用点语法获取到自定义属性的值，那么如何获取收自定义属性值呢?在 DOM 中，可以使用 getAttribute(‘属性’)方法来返回指定元素的属性值。
案例：演示如何获取属性值，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
console.log(div.id); // 结果为:demo
console.log(div.getAttribute('id')); // 结果为:demo
console.log(div.getAttribute('index')); // 结果为:1
</script>
</body>
</html>
上述代码中，分别使用 element.属性 和 element.getAttribute 两种方式获取 div 元素的内置属性 id ,输出结果为 demo 。虽然以上两种方式都可以获取内置属性值，但是在实际运用中推荐使用 ” element. 属性 “ 这种较为简洁的方式。
使用 getAttribute(‘index’) 方式来获取开发者自定义的 index 属性，输出结果为 1 。
7.2.2_设置属性值 element.setAttribute(‘属性’,’ 值’)
在 DOM 对象中可以使用 " element.属性 = ‘值’ " 的方式设置内置的属性值，并且针对于自定义属性，提供了 " element.setAttribute(‘属性’,’ 值’) " 的方式进行设置。
值得一提的是，设置了自定义属性的标签，在浏览器中的 HTML 结构中可以看到该属性。
案例：演示如何设置属性值，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.id = 'test';
div.className = 'navs';
div.setAttribute('index', 2);
</script>
</body>
</html>
上述代码中，使用 " element.属性 = ‘值’ " 的方式设置 div 元素内置属性，设置 id 值为 test , class 类名为 navs 。
使用 setAttribute() 方法，设置属性名为 index ，值为2。
另外，如果想要使用 setAttribute() 方式设置元素的类名，则可以添加以下代码。
div.setAttribute ('class', 'footer');
因为 class 比较特殊，在这里使用的属性值为 class , 值为 footer。
7.2.3_移除属性 element.removeAttribute( 属性)
掌握了元素属性的获取和设置之后，还有一个要学习的操作，就是元素属性的移除。
在DOM中使用 " element.removeAttribute( 属性) " 的方式来移除元素属性。
案例：演示如何移除属性值，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="test" class="footer" index="2"></div>
<script>
var div = document.querySelector('div');
div.removeAttribute('id');
div.removeAttribute('class');
div.removeAttribute('index');
</script>
</body>
</html>
上述代码中，使用 removeAttribute() 方法移除 div 元素的id、class、index 属性。
7.2.4_[ 案例 ] Tab栏切换
标签栏在网站中的使用非常普遍，它的优势在于可以在有限的空间内展示多块的内容，用户可以通过标签在多个内容块之间进行切换。
接下来我们使用自定义属性相关知识实现 Tab 栏切换效果。
(1) 编写 HTML 页面，示例代码如下，
<div class="tab">
<div class="tab\_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</u1>
</div>
<div class="tab\_con">
<div class="item" style=" display: block; ">商品介绍模块内容</div>
<div class="item">规格与包装模块内容</div>
<div class="item">售后保障模块内容</div>
<div class="item">商品评价(50000)模块内容</div>
<div class="item">手机社区模块内容</div>
</div>
</div>
上述代码中，class 为 tab 的元素用于实现标签栏的外边框。第 2 ~ 10 行和第 11 ~ 17 行代码分别实现标签栏的标签部分和内容部分。其中，标签部分第 1 个 li 添加了 current 样式，用于实现当前标签的选中效果。同样的，将该标签下对应的内容块 div 也添加了 display: block 样式，用于显示当前标签下的内容，隐藏其他标签下的内容。
(2) 实现标签栏切换，具体代码如下。
<script>
// 获取标签部分的所有元素对象
var tab_list = document.querySelector (' .tab\_llst ');
var lis = tab_list.guerySelectorAll('li');
// 获取内容部分的所有内容对象
var items = document.querySelectorAll ('.item');
for (var i = 0;i < lis.length; i++) { // for循环绑定点击事件
lis[i].setAttribute ('index',i);
lis[i].className = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
// 下面的显示内容模块
var index = this.getAttribute('index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
};
}
</script>
上述代码中，第 3、4 行通过 querySeletorAIl() 方法获取元素。第 7 ~ 21 行代码用于遍历标签部分的每个元素对象 lis[i] ，并绑定单击事件。在事件处理函数中， 第 10 ~ 12 行代码利用排他思想实现单击当前项，清除所有 li 的 class 类，并且在第 13 行给自己设置 current 类。同时当事件发生时执行第 15 ~ 19 行代码，显示当前鼠标单击的标签及其对应的内容，隐藏其他标签的显示。
7.3_自定义属性
**一般的自定义属性可以通过 getAttribute (‘属性’) 方法来获取，但是有些自定义属性很容引起歧义，不容易判断是元素的自带属性还是自定义属性。**因此，HTML5 新增了自定义属性的规范。在 HTML5 中规定通过 " data-属性名 " 的方式设置自定义属性。
接下来我们将对自定义属性的操作进行详细讲解。
7.3.1_设置属性值
*元素的 " data- " 自定义属性有两种设置方式，**
1. 在 HTML 中设置自定义属性 data-index
_
在 div 元素上设置 data-index 属性，示例代码如下。
<div data-index="2"></div>
上述代码中，data-index 就是一种自定义属性，" data- " 是自定义属性的前缀，index 是开发者自定义的属性名。
2. 在 JavaScript 中设置自定义属性 (setAttribute、元素对象.dataset.属性名)
_
在 JavaScript 代码中，可以通过 setAttribute(‘属性’，值) 或者 " 元素对象.dataset.属性名 = ‘值’ " 两种方式设置自定义属性。需要注意的是，通过后者的方式只能设置以 " data-" 开头的自定义属性。
示例代码如下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.dataset.index = '2';
div.setAttribute('data-name', 'andy');
</script>
</body>
</html>
上述代码中，通过 " 元素对象.dataset.属性名 " 的方式为 div 元素添加属性。
通过 setAttribute (‘属性’, ‘值’) 的方式添加 data-name = ‘andy’。
执行上述代码，在浏览器中查看 div 元素，结果如下所示。
<div data-index="2" data-name="andy"></div>
7.3.2_获取属性值
在 DOM 操作中，提供了两种获取属性值的方式，
1. 通过 getAttribute()
该方式可以获取内置属性或者自定义属性；
2. 使用 HTML5 新增的 " element.dataset.属性 " 或者 " element.dataset [’ 属性 '] " 。
_
推建使用第 1 种，因为第 2 种有兼容性问题，从 IE11 才开始支持。
案例：演示如何获取属性值，示例代码如下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('data-index')); // 结果为:2
console.log(div.getAttribute('data-list-name')); // 结果为:andy
// H5新增的获取自定义属性的方法，只能获取 data- 开头的属性
console.log(div.dataset); // DOMStringMap {index: "2", listName: "andy"}
console.log(div.dataset.index); // 结果为:2
console.log(div.dataset['index']); // 结果为:2
console.log(div.dataset.listName); // 结果为:andy
console.log(div.dataset['listName']); //结果为:andy
</script>
</body>
</html>
上述代码中，代码中的 dataset 是一个集合， 里面存放了所有以 data 开头的自定义属性。如果自定义属性里面包含有多个连字符(-)时，获取的时候采取驼峰命名法，例如，上述行中的listName。
7.4_节点基础
仔细了解一下什么是节点
HTML 文档可以看作是一个节点树， 网页中的所有内容都是节点(包括元素、属性、文本、注释等)。
7.4.1_什么是节点
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，因此，可以利用操作节点的方式操作 HTML 中的元素。
一般来说，节点至少拥有 nodeType 节点类型)、nodeName ( 节点名称 ) 和 nodeValue ( 节点值 ) 这 3 个基本属性。
- 元素节点，nodeType 为 1。
- 属性节点，nodeType 为 2。
- 文本节点，nodeType 为 3。文本节点包含文字、空格、换行等。
在实际开发中，节点操作主要操作的是元素节点，开发者可以根据 nodeType 的值来判断是否为元素节点。
7.4.2_节点层级
DOM 中将 HTML 文档视为树结构，一个 HTML 文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。
具体示例如下。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<a href="#">链接</a>
<p>段落...</p>
</body>
</html>
在上述代码中，DOM 根据 HTML 中各节点的不同作用，可将其分别划分为标签节点、文本节点和属性节点。其中，标签节点也被称为元素节点。HTML 文档中的注释则单独叫作注释节点。
节点之间的层级关系，最常见的是父子兄弟层级关系。下面我们以 < head> 、< body> 与 < html> 节点为例进行介绍，具体如下。
- 根节点: < html> 标签是整个文档的根节点，有且仅有一个。
- 父节点: 指的是某一个节点的上级节点，例如，< html> 元素则是 < head> 和 < body> 的父节点。
- 子节点: 指的是某一个节点的下级节点，例如，< head> 和 < body> 节点是 < html> 节点的子节点。
- 兄弟节点: 两个节点同属于一个父节点，例如，< head> 和 < body> 互为兄弟节点。
在讲解了各种节点的层次关系后，接下来我们针对各层级节点的获取进行详细讲解。
1. 获取父级节点 obj.parentNode
_
在 JavaScript 中，可以使用 parentNode 属性来获得离当前元素的最近的一个父节点，如果找不到父节点就返回为 null,语法格式为: obj.parentNode。其中， obj 是一个 DOM 对象是通过获取元素的方法来获取的元素，如 getElementById() 方法等。
案例：演示如何获取当前元素的父节点，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div class="demo">
<div class="box">
<span class="child">span元素</span>
</div>
</div>
<script>
var child = document.querySelector('.child');
console.log(child.parentNode);
</script>
</body>
</html>
上述代码中，通过 querySelector() 获取类名为 child 的 span 元素，存储到 child 对象中。
在控制台输出离 child 元素最近的父级节点 ( box )。
2. 获取子级节点
不是很理解下述案例
_
在 JavaScript 中，可以使用 childNodes 属性或者 children 属性两种方式来获得当前元素的所有子节点的集合。
( 1 ) childNodes 属性
childNodes 属性获得的是当前元素的所有子节点的集合，该集合为即时更新的集合。
案例：演示如何获取当前元素子节点，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
// DOM 提供的方法(API)获取
var ul = document.querySelector('ul');
var lis = ul.querySelector('li');
console.log(lis);
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
</script>
</body>
</html>
上述代码中，定义了一个无序列表 ul 。
测试 DOM 提供的 API 方法是否能够获取全部 li 元素。
使用节点的方式获取 ul 下的所有的子节点 ( 包括文本节点和元素节点 )。
根据 nodeType 属性来获取文本节点和元素节点的节点类型。
运行后发现 childNodes 属性返回的是 NodeList 对象的集合。返回值里面包含了元素节点、文本节点等其他类型的节点。
如果想要获取childNodes 里面的元素节点，需要做专门的处理。在上述代码中编写如下代码获取元素节点。
for(var i = 0; i < ul.childNodes.length; i++) {
if(ul.childNodes[i].nodeType === 1) {
console.log(ul.childNodes[i]);
}
}
上述代码中，ul.childNodes[i] 是元素节点。
需要注意的是，childNodes 属性在 IE 6 ~ IE 8中不会获取文本节点，在 IE 9 及以上版本和主流浏览器中则可以获取文本节点。所以在实际开发中一般不提倡使用 childNodes。
( 2 ) children 属性
children 是一个可读的属性， 返回所有子元素节点。children 只返回子元素节点，其余节点不返回。目前各大浏览器都支持该属性，在实际开发中推荐使用 children。
案例：演示如何获取当前元素子节点，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ol>
<script>
var ul = document.querySelector('ol');
var lis = ul.querySelectorAll('li');
console.log(ul.children);
</script>
</body>
</html>
上述代码中，通过 ul.children 属性获取 ul 元素的子元素，在控制台中的输出结果为 HTMLCollection(4) [li, li, li, li] 。
- 小提示:
_
childNodes 属性与 children 属性虽然都可以以获取某元素的子元素，但是两者之间有一定的区别。前者用于节点操作，返回值是 NodeList 对象集合；后者用于元素操作，返回的是 HTMLCollection 对象集合。
( 3 ) 获取子节点 firstChild 属性和 lastChild 属性
firstChild 属性和 lastChild 属性，前者返回第一个子节点，后者返回的是最后一个子节点，如果找不到则返回 null。需要注意的是，它们的返回值包括文本节点和元素节点等。
( 4 ) 获取子元素节点 firstElementChild 属性和 lastElementChild 属性
firstElementChild 属性和 lastElementChild 属性，前者返回第一个子元素节点，后者返回最后一个子元素节点，如果找不到则返回 null。
需要注意的是，这两个属性有兼容性问题，IE9 以上才支持。
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便；而 firstElementChild 和 lastElementChild 又有兼容性问题，那么如何获取第一个子元素节点或最后一个子元素节点呢?
为了解决兼容性问题，在实际开发中通常使用 “ obj.children [ 索引 ] ” 的方式来获取子元素节点。示例代码如下。
obj.children[0];// 获取第一个子元素节点
obj.children[obj.children.length - 1] // 获取最后一个子元素节点
3. 获取兄弟节点 nextSibling、previousSibling、nextElementSibling、previousElementSibling 属性
在 JavaScript 中，可以使用 nextSibling 属性来获得下一个兄弟节点，使用previousSibling 属性来获得上一个兄弟节点。它们的返回值包含元素节点或者文本节点等。如果找不到，就返回 null。
如果想要获得兄弟元素节点，则可以使用 nextElementSibling 返回当前元素的下一个兄弟元素节点，使用 previousElementSibling 属性返回当前元素的上一个兄弟元素节点。如果找不到则返回 null。
要注意的是，这两个属性有兼容性问题，IE9 以上才支持。
实际开发中，nextSibling 和 previousSibling 属性返回值都包含其他节点，操作不方便，而 nextElementSibing 和 previousElementSibling 又有兼容性问题。为了解决兼容性问题，在实际开发中通常使用封装函数来处理兼容性。
示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<script>
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if(el.nodeType === 1) {
return el;
}
}
return null;
}
</script>
</body>
</html>
上述代码中，定义了 getNextElementSibling() 函数，参数为 element。在 while 循环中，通过 if 条件语句进行判断，如果 nodeType 属性值等于 1，那么获取到的节点类型为元素节点。
7.4.3_[ 案例 ] 下拉菜单
下拉菜单在阿站中的应用非常广泛，例如，鼠标指针经过下拉菜单时，显示当前下拉框中的内容，并隐藏其他下拉菜单内容。具体实现步骤如下。
(1) 编写 HTML 代码完成页面布局。
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li><a href=""> 私信</a></li>
<li><a href=""> 评论</a></li>
<li><a href="">@ 我</a></li>
</u1>
</li>
...(此处省略3个li)
</u1>
</body>
上述代码采用 ul、li 的结构布局，ul 下有多个下拉菜单 li，每个 Ii 中有一个 a 和 ul 列表，a 为标签名，ul 为下拉内容。当鼠标指针经过 li 时，li 中的 ul 显示；当鼠标指针离开 li 时，li 中的 ul 隐藏。
(2) 鼠标指针经过时展示当前下拉列表内容，示例代码如下。
<script>
// 1.获取元素
var nav = document.querySelector('.nav');
var lis = nav.children;
// 2.注册鼠标指针经过和鼠标指针离开事件
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block'; // ul为li的第2个子元素
};
lis[i].onmouseout = function ()
this.children[1].style.display = 'none';
};
}
</script>
上述代码中，第 3、4 行代码获取类名为 nav 下的4个 li 。第 6 ~ 13 行代码使用 for 循环注册事件，其中第 7 ~ 9 行代码表示当鼠标指针经过时，设置当前 li 的第 2 个子元素 ul 显示;当鼠标指针离开时，则隐藏当前 li 的第 2 个子元素 ul 内容。
7.5_节点操作
7.5.1_创建节点
在获取元素的节点后，还可以利用 DOM 提供的方法实现节点的添加，如创建一个 li 元素节点，为 li 元素节点创建一个文本节点等。
在 DOM 中，使用 documentcreateElement(‘tagName’)方法创建由 tagName 指定的 HTML 元素。因为这些元素在原先是不存在的，是根据实际开发需求动态生成的，所以也称为动态创建元素节点。
动态创建元素节点有 3 种常见方式，具体如下。
( 1 ) document.write()
document.write() 创建元素，如果页面文档流加载完毕，再调用会导致页面重绘。
( 2 ) element.innerHTML
element.innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘。
( 3 ) document.createElement()
document.createElement() 创建多个元素时效率稍微低一点， 但是结构更加清晰。
7.5.2_添加和删除节点
在 DOM 中，提供了 node.appendChild() 和 node.insertBefore() 方法用于添加节点，node.removeChild(child) 用于删除节点。
接下来我们进行上述三种方法的使用讲解。
1. appendChild()
appendChild() 方法，将一个节点添加到指定父节点的子节点列表末尾，类似于 CSS 中的 after 伪元素。
2. insertBefore()
insertBefore (child,指定元素) 方法，将一个节点添加到父节点的指定子节点前面，类似于 CSS 中的 before 伪元素。
3. removeChild(child)
removeChild (child) 用于删除节点，该方法从 DOM 中删除一个子节点，返回删除的节点。
7.5.3_[ 案例 ] 简易留言板
案例：将利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击 “ 发布 ” 按钮动态创建一个 li， 添加到 ul 里面。具体实现步骤如下。
(1) 编写 HTML 页面。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</u1>
</body>
</html>
上述代码中，定义了一个 textarea 多行文本输人框。供用户输入留言。
button 按钮用于单击发布留言。
ul 用于展示留言模块。
(2) 单击 “ 发布 ” 按钮，实现添加留言功能。
<script>
// 1.获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2.注册事件
btn.onclick = function() {
if (text.value = "") {
alert('您没有输人内容');
return false;
} else {
// (1) 创建元素
var li = document.createElement('li');
li.innerHTML = text.value;
// (2) 添加元素
ul.insertBefore(li, ul.children[0]);
}
};
</script>
上述代码中，第 7 行代码给 button 按钮添加单击事件，用于添加留言。第 8 ~ 11 行代码使用 if 条件语句进行判断，如果用户输入为空，提醒用户进行输人，否则执行 else 代码块。第 13、14 行代码创建元素 li 并给创建好的元素 li 进行赋值。第 16 行代码把创建好的 li 放到第一个元素的前面。
(3) 修改上述代码，实现删除留言功能。
一、网安学习成长路线图
网安所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。
二、网安视频合集
观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。
三、精品网安学习书籍
当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。
四、网络安全源码合集+工具包
光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。
五、网络安全面试题
最后就是大家最关心的网络安全面试题板块
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
扫一扫
1275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
