JS学习第3天——Web APIs之DOM（什么是DOM，相关API【创建、增删改查、属性操作、事件操作API】）

一、Web APIs介绍

JS的组成：ECMAScript（基础语法）、DOM（页面文档模型）和BOM（浏览器文档模型）
基础语法为后面做铺垫，Web API是JS的应用，大量使用JS基础语法做交互效果

1、API

API（应用程序编程接口Application Programming Interface）：是预先定义的函数：API是给程序员提供的一种工具，帮助我们实现想要完成的功能，会用即可，不必纠结内部如何实现

2、Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果

Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）

二、DOM

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

1、DOM树

文档：一个页面就是一个文档，DOM中使用document来表示
元素：页面中的所有标签都是元素，DOM中使用element来表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容都看做是对象，DOM在实际开发中主要用来操作元素

2、获取元素

《1》根据ID获取

document.getElementById('id');

使用console.dir()可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

《2》根据标签名获取
getElementByTagName()方法可以返回带有指定标签名的对象的集合

document.getElementByTagName('标签名');

注意：
得到的是一个对象集合，想要操作里面的元素就需要遍历
得到元素对象是动态的
如果获取不到元素，则返回空的伪数组（因为获取不到对象）

还可以获取某个元素的所有指定标签名的子元素

element.getElementByTagName('标签名');

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取时不包括父元素自己

<div><p>1111</p><p>222</p><p>333</p>
</div><script>var div = document.getElementsByTagName("div");var a = div[0].getElementsByTagName("p");console.log(a);console.dir(a);
</script>

《3》HTML5新增

document.getElementByClassName('类名');   // 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素
document.querySelectorAll('选择器'); // 根据指定选择器返回

注意：querySelector和querySelectorAll里面的选择器需要加符号

《4》特殊元素获取
获取body元素和获取html元素

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

3、事件基础

JS使我们有能力创造动态页面，而事件是可以被JS侦测到的行为。（触发–响应机制）
常见的鼠标事件

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

4、操作元素属性

DOM操作可以改变页面内容、结构和样式

《1》改变元素内容

element.innerText; // 去掉html标签、空格和换行
element.innerHTML  // 包括html，同时保留空格和换行

《2》常用元素的属性操作

innerText、innerHTML、src、href、id、alt、title

《3》表单元素的属性操作

type、value、checked、selected、disabled

《4》样式属性操作
可以通过 JS 修改元素的大小、颜色、位置等样式
JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

element.style   // 行内样式操作
element.className  // 类名样式操作

注意：
如果样式修改较多，可以采取操作类名方式更改元素样式
className 会直接更改元素的类名，会覆盖原先的类名

《5》自定义属性的操作

① 获取属性

element.属性  // 获取内置属性
element.getAttribute('属性')  // 获得自定义的属性

② 操作属性值

element.属性 = '值'
element.setAttribute('属性','值')  // 设置自定义属性值

③ 移除属性

element.removeAttribute('属性')

《6》H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
H5规定自定义属性data-开头做为属性名并且赋值。
① 兼容性获取 element.getAttribute(‘data-index’);
② H5新增 element.dataset.index 或者 element.dataset[‘index’] IE11才开始支持

5、节点（node）操作

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个
基本属性。
元素节点 nodeType 为 1，属性节点 nodeType 为 2，文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）

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

DOM 树把节点划分为不同的层级关系，常见的是父子兄层级关系。
《1》父级节点

node.parentNode   

注意：返回某节点的父节点，是最近的一个父节点，如果指定的节点没有父节点则返回null

《2》子节点
① 第一种：

parentNode.childNodes(标准)  // 返回包含指定节点的子节点的集合，该集合为即时更新的集合parentNode.firstChild  // 返回第一个子节点，找不到返回null，包含所有的节点
parentNode.lastChild  // 返回最后一个子节点，找不到返回null，包含所有的节点

注意：返回值里面包含了所有的子节点，包含元素节点，文本节点等
如果只想要获得里面的元素节点，则需要专门处理。所以一般不提倡使用childNodes

var ul = document. querySelector('ul');
for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i].nodeType == 1) {// ul.childNodes[i] 是元素节点console.log(ul.childNodes[i]);
}
}

② 第二种：

// 各个浏览器支持
parentNode.children(非标准)   // 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回 // 以下两方法IE9以上才支持
parentNode.firstElementChild  // 返回第一个子元素节点，找不到返回null
parentNode.lastElementChild // 返回最后一个子元素节点，找不到返回null

想要得到第一个或最后一个子元素节点，实际开发中解决方案：
1. 如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
如果想要最后一个子元素节点，可以使用parentNode.chilren[parentNode.chilren.length - 1]

《3》兄弟节点

node.nextSibling  //  返回当前元素的下一个兄弟元素节点，找不到返回null，包含所有的节点
node.previousSibling // 返回当前元素的上一个兄弟元素节点，找不到返回null，包含所有的节点// IE9以上支持
node.nextElementSibling // 返回当前元素下一个兄弟元素节点
node.previousElementSibling // 返回当前元素上一个兄弟节点

兼容性问题解决方案

// 封装一个兼容性的函数
function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;}}return null;
} 

《4》创建节点（动态创建元素节点）

document.createElement('tagName');

《5》添加节点

node.appendChild(child)  // 将一个节点添加到指定父节点的子节点列表的末尾（类似于css里面的after伪元素）
node。insertBefore(child,指定元素) // 添加到父节点的指定子节点前面（类似于的before伪元素）

《6》删除节点

node.removeChild(child)  // 返回删除的节点

《7》复制节点

node.cloneNode()  // 法返回调用该方法的节点的一个副本

注意：
① 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
② 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子

《8》三种动态创建元素的区别

方法	特点
document.write()	直接将内容写入页面的内容流，但是文档执行完毕，则会导致页面全部重绘
element.innerHTML()	将内容写入某某个DOM节点，页面不重绘，创建多个元素效率更高(不要拼接字符串，采用数组形式拼接)，结构稍微复杂
document.createElement()	创建多个元素效率低一些，但是结构更清晰

三、DOM操作总结（创建、增删改查、属性操作、事件操作API）

为了能够使JS操作HTML，JS有一套自己的DOM编程接口；对于HTML来说，DOM使html形成了一颗DOM树

关于DOM操作，主要是针对元素的操作，主要有创建、增、删、改、查、属性操作、事件操作

1、创建

document.write
innerHTML
createElement

2、增

appendChild
insertBefore

3、删

removeChild

4、改

src、href、title等  // 修改元素属性
innerHTML、innerText  //  修改普通元素内容
value、type、disable等  // 修改表单元素
style、className // 修改元素样式

5、查

getElementById、getElementsByTagName // DOM提供的API方法，不推荐
querySelector、querySelectorAll // H5新增，提倡
parentNode（父）、children（子）、previousElementSibling、nextElementSibling（兄）// 利用节点获取元素，提倡

6、属性操作

setAttribute	// 设置dom的属性值
getAttribute	// 得到dom的属性值
removeAttribute  // 移出属性

7、事件操作

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

四、小案例

（添加/删除留言）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}li a {float: right;}</style>
</head><body><textarea name="" id=""></textarea><button>发布</button><ul></ul><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 {// console.log(text.value);// (1) 创建元素var li = document.createElement('li');// 先有li 才能赋值li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";// (2) 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);// (3) 删除元素 删除的是当前链接的li  它的父亲var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {// node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode;ul.removeChild(this.parentNode);}}}}</script>
</body></html>