一、Web APIs介绍
- 1、API
- 2、Web API
二、DOM
- 1、DOM树
- 2、获取元素
- 3、事件基础
- 4、操作元素属性
- 5、节点（node）操作
三、DOM操作总结（创建、增删改查、属性操作、事件操作API）
- 1、创建
- 2、增
- 3、删
- 4、改
- 5、查
- 6、属性操作
- 7、事件操作
四、小案例

一、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>