黑马JS学习笔记——DOM
API
- API
(Application Programming Interface应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码或理解内部工作机制的细节。
简单理解：API是给程序员提供的一种工具（一个接口），以便能更轻松地实现想要完成的功能 - Web API
Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOW DOW），现阶段主要针对浏览器做交互效果；MDN详细API：Web API 接口参考 | MDN (mozilla.org)
因为Web API很多，所以我们将这个阶段称为Web APIs
Web API 一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）
结合前面学习内置对象方法的思路学习
DOM
1.1 什么是DOM
（Document Object Model,文档对象类型）是W3C组织推荐的处理可扩展标记语言（HTML/XML）的标准编程接口，通过这些DOM接口可以改变网页的内容、结构和样式
1.2 DOM树
文档：一个页面就是一个文档，DOM中用document表示
元素：页面中所以标签都是元素，DOM中石油element表示
节点：网页中所有内容都是节点（标签，属性，文本，注释等）。DOM中用node表示
DOM把以上内容都看做是对象
2.1 如何获取页面元素
DOM在实际开发中主要用来操作元素，使用以下集中方法获取页面元素
根据ID获取、标签名、HTML5新增的方法、特殊元素获取
2.2 根据ID获取
getElementById()
1.因为文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
2.参数 id 是大小写敏感的字符串
3.返回一个元素对象
4.console.dir() //打印返回的元素对象，更好地查看里面的属性和方法
2.2 根据标签名获取
getElementsByTagName()
1.返回带有指定标签名的对象的集合，以伪数组形式存储，得到的元素是动态的
2.如果指定标签名只有一个，返回的还伪数组的形式
3.如果页面中没有这个元素，返回空的伪数组
2.3 根据标签名获取
还可获取某个元素（父元素）内部所有指定标签名的子元素
element.getElementsByTagName(‘标签名’);
父元素必须是单个对象（必须指明是哪一个元素对象）。获取的时候不包括父元素自己
2.4 通过HTML5（i9及以上浏览器适用）新增方法获取
1.document.getElementsByClassName(‘类名’); //根据类名返回元素对象集合
2.document.querySelector(‘选择器’); //根据指选择器返回第一个元素对象，切记里面的选择器需要加符号，.box #nav
3.document.querySelectorAll(‘选择器’); // 根据指定选择器返回
2.5获取特殊元素
document.body //返回body元素对象
document.documentElement //返回html元素对象
1.事件基础
3.1 事件概述
JS使我们有能力创建动态页面，而事件是可以被JS侦测到的行为
简单理解：触发—响应机制
网页中每个元素都可以产生某些可以触发JS的事件：例如可以在用户电机某按钮时产生一个事件然后去执行某些操作
3.2 事件三要素：事件源 事件类型 事件处理程序
1.事件源 事件触发的对象 谁
2.事件类型 ：鼠标点击 经过 按键等
3.事件处理程序 ：函数
3.3 执行事件的步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）
1.操作元素
js的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等，注意以下都是属性：
4.操作元素
JS的DOM操作可以改变网页内容、结构和样式，可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
4.1 改变元素内容
//element.innerText
//从起始位置到终止位置的内容，但它去除html标签、空格和换行 非标准
//element.innerHTML
//起始位置到终止位置的全部内容，可识别html标签，同时保留空格和换行，W3C标准
// 这两个属性是可读写的，可以获取元素里面的内容
4.2 常用元素的属性操作
1.innerText、innerHTML改变元素内容
2.src、href
- id、alt、title
4.3表单元素的属性操作
利用DOM可以操作如下表单元素的属性：type\value\checked\selected\disabled
4.4样式属性操作
element.style //行内样式操作
element.className
/*类名样式操作，适合样式较多复杂的情况；用className来操作元素类名属性；会直接更改元素的类名，会覆盖原来的类名*/
注意：
JS里面的样式采取驼峰命名法，比如 fontSize、backgroundColor
JS修改style样式操作，产生的是行内样式，css权重比较高
操作元素总结
- 操作元素内容 （innerText非标准\innerHTML标准）
- 操作常见元素属性(src\href\title\alt)
- 操作表单元素属性(type\value\disabled)
- 操作元素样式属性（element.style\className）
4.5排他思想
4.6自定义属性的操作
-
获取属性值
element.属性 //获取内置属性（元素本身自带的属性）
element.getAttribute(‘属性’); //主要获得自定义的属性（标准）程序员自定义属性 -
设置属性值
element.属性=‘值’
element.setAttribute(‘属性’，‘值’); -
移除属性
element.removeAttribute(‘属性’)
附：Tab切换代码
<!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>
* {
margin: 0;
padding: 0;
}
.tab {
margin: 100px auto;
}
li {
list-style: none;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
background-color: grey;
}
.tab_list .current {
background-color: red;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价模块内容
</div>
<div class="item">
手机社区 模块内容
</div>
</div>
</div>
<script>
var tab_lists = document.querySelector('.tab_list').querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < tab_lists.length; i++) {
tab_lists[i].setAttribute('index', i);
tab_lists[i].onclick = function () {
//1.上面的模块选项卡
for (var i = 0; i < tab_lists.length; i++) {
tab_lists[i].className = '';
}
this.className = 'current';
//2.下面的内容显示模块
var index = this.getAttribute('index');
//排他思想，隐藏其他的
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
4.7 H5自定义属性
目的：是为了保存并使用 数据，有些数据可保存到页面中而不用保存到数据库中
- H5规定自定义属性 data- 开头做为属性名并且赋值，例如
<div data-index = "1"></div>
//或者使用JS设置
element.setAttribute('data-index',2)
- 获取H5自定义属性
1.兼容性获取 element.getAttribute(‘data-index’);
2.H5新增element.dataset.index 或者 element.dataset[‘index’] ie11才开始支持
注意：如果自定义属性里面有多个-连接的单词，获取的时候采取驼峰命名法
<div data-list-name="andy"></div>
console.log(div.dataset.listName);
console.log(div.dataset['listName']); // 控制台输出 andy
5. 节点操作
5.1 获取元素通常使用两种方式
- 利用DOM提供的方法获取元素：逻辑性不强、繁琐
- 利用节点层级关系获取元素：
利用父子兄节点关系获取元素
逻辑性强，但是兼容性稍差
5.2 节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示；可通过Javascript获取创建删除。节点一般具有三个基本属性：nodeType \ nodeName \ nodeValue
元素节点nodeType为1；属性节点nodeType为2；文本节点nodeType为3，实际开发主要操作元素节点
5.3 节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
1.父级节点
node.parentNode
~可返回某节点的父节点，注意是最近的一个父节点，若没有则返回 null
2.子节点
parentNode.childNodes //标准，返回包含指定元素的**子节点**的集合，包含了元素节点、文本节点（包括换行）等
parentNode.children //非标准，是一个只读属性，返回所有的**子元素**节点，！！重点掌握
//返回指定位置的子节点
parentNode.firstChild //获取第一个子节点
parentNode.lastChild
parentNode.firstElementChild //获取第一个子元素节点，ie9以上
parentNode.lastElementChild //ie9以上
parentNode.children[i] //***实际开发的写法，不用考虑兼容性***
parentNode.children[parentNode.children.length-1] //得到最后一个子元素节点
- 兄弟节点
node.nextSibling //下一个兄弟节点，包含元素节点或者文本节点
node.previousSibling
node.nextElementSibling //下一个兄弟节点，包含子元素节点
node.previousElementSibling //这两种ie9以上
//解决方案，自己封装一个兼容性函数
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
5.4 创建节点(1创建元素 2添加元素)
5.5 删除节点
node.removeChild(child) //从DOM树中删除一个子节点，返回删除的节点
案例：留言板（创建、删除留言）
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
btn.onclick = function () {
if (text.value == '') {
alert('未输入内容')
} else {
//添加元素
var li = document.createElement('li');
li.innerHTML = text.value + "删除";
//添加元素
ul.insertBefore(li, ul.children[0]);
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
ul.removeChild(this.parentNode);
}
}
}
}
5.6复制节点（克隆节点）
node.cloneNode(); //复制节点，还需要添加节点才能添加
//注意：如果括号参数为空或者false，则是浅拷贝，即至克隆复制节点本身，不克隆里面的子节点的
//括号参数为true,则为深度拷贝，会复制节点本身以及黎曼所有的子节点
5.8 三种动态创建元素区别
document.write()
element.innerHTML
document.creatElement()
区别：
1.document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2.element.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
~创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
3.createElement()创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML效率比creatElement高
6. DOM重点核心
1.对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口；
2.对于HTML，dom使得html形成了一棵dom树，包含文档、元素、节点
获取过来的DOM元素是一个对象(object)，所以称为文档对象类型
关于dom操作，主要针对元素的操作：创建、增、删、改、查、属性操作、事件操作
6.1 创建
- document.write
- innerHTML
- createElement
6.2 增 - appendChild
- insertBefore
6.3 删 - removeChild
6.4 改
修改dom元素属性、元素内容、表单的值等 - 修改元素属性：src\href\title等
- 修改普通元素内容：innerHTML、innerText
- 修改表单元素：value\type\disabled
- 修改元素样式：style\className
6.5 查 - DOM提供的额API方法：getElementById\getElementByTagName古老用法不推荐
- H5提供的新方法：querySelector\querySelectorAll 提倡
- 利用节点操作获取元素：父（parentNode）、子（children）、兄（previousELementSibling、nextElementSibling） 提倡
6.6 属性操作
主要针对自定义属性
1.setAttribute：设置dom属性值
2.getAttribute：得到dom的属性值
3.removeAttribute移除属性
6.7 事件操作
事件高级导读
1.注册事件（绑定事件）
注册事件两种方式：传统方式和方法监听注册方式
1.2 addEventListener事件监听方式
eventTarget.addEventListener(type,listener[,useCapture])
//eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数
该方法付接收三个参数：
- type：事件类型字符串，比如click\mouseover\注意不要带on,需要加引号
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认是false,
2.删除事件（解绑事件）
2.1 删除事件的方式
//1.传统方式删除事件：
eventTarget.onclick = null;
//2.方法监听注册方式删除事件
eventTarget.removeEventListener(type,listener[,useCapture])
//例子
divs[1].addEventListener('click',fn) //里面的fn调用不需要小括号
function fn() {
alert(22);
divs[1].removeEventListener('click',fn);
}
3.DOM事件流
事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DO事件流
3个阶段：捕获阶段、当前目标阶段、冒泡阶段
事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播带DOM最顶层节点的过程；
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程
注意：
- JS代码只能执行捕获或冒泡其中一个阶段;
- onclick attachEvent只能得到冒泡阶段；
- addEventListener(type,listener[,useCapture])第三个参数是true，表示在事件捕获阶段调用事件处理程序；如果是false（默认的），表示在冒泡阶段。。。
- 实际开发更关注事件冒泡
- 有些事件没有冒泡：obblur onfocus onmouseenter onmouseleave
4. 事件对象
4.1
eventTarget.onclick = function(event){}
eventTarget.addEventListener('click',function(event){})
//这个 event 就是事件对象，还可以写成 e evt
官方理解：event对象代表事件的状态，比如键盘按键的状态 鼠标的位置 鼠标按钮的状态。
4.4 事件对象的常见属性和方法
注意：1，e.target返回的是触发事件的对象（元素）；而this返回的是绑定事件的对象（元素）。2，可以利用return false 阻止默认行为，没有兼容性问题，特点：return后面的代码不执行了且只限于传统的注册方式
5.阻止事件冒泡
5.2阻止事件冒泡的兼容性解决方案
if (e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
6.事件委托（代理、委派）
事件委托：~也称事件代理，在jQuery里面称为事件委派
原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
作用：只操作一次DOM，提高了程序的性能。
7.常用的鼠标事件
1.contextmenu 可以禁用右键菜单
2.selectstart 禁止选中文字
7.2鼠标事件对象
MouseEvent 鼠标事件对象
KeyboardEvent 键盘事件对象
8.常用的键盘事件
onkeyup:某个键盘按键松开时触发
onkeydown:某个键盘按键按下时触发
onkeypress:某个键盘按键被按下时触发（不识别功能键，比如crtl shift 左右箭头等
- 三个事件执行顺序：keydown-keypress-keyup;
- keyup和keydown事件不区分大小写 a和A得到的都是65，keypress区分大小写