2021/01/12 JS初级 WebApis（一）

文档对象模型 DOM
文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些接口，我们可以改变页面的内容、结构和样式。

（一）获取元素

①getElementById(id); 参数id是大小写敏感的字符串
获取带有指定ID的元素对象。

var IdName = document.getElementById('IdValue');

②getElementsByTagName()
获取带有指定标签名的对象的集合。以伪数组的形式来存储

var TagNames = document.getElementsByTagName('TagName');

③getElementsByClassName()
获取带有指定类名的元素对象集合。

var cName = document.getElementsByClassName('className');

④querySelector()
获取指定选择器的第一个元素对象

var firstChoose = document.querySelector('选择器类型 + 名字');

querySelectorAll()
获取指定选择器的所有元素对象集合

var allChoose = document.querySelectorAll('选择器类型 + 名字');

⑤getElementsByName()
用于获取表单元素，表单元素都有一个一般元素没有的name属性，一般只用于单选按钮和复选框，返回一个表单元素对象的集合。

var ipt = document.getElementsByName("name名");

⑥document.title 获取title标签
一个页面只有一个title元素、一个body元素和一个HTML根元素，所以它们的获取方式比较特殊。
document.body 获取body元素

document.documentElement 获取HTML元素

---

（二）事件基础
①事件三要素：事件源、事件类型和事件处理程序
事件源就是事件被触发的对象，而事件处理程序通过一个函数赋值的方式来完成。

var btn = document.querySelector('button');
btn.onclick = function() {
	// 事件处理程序
}

常见鼠标事件：

补充：鼠标双击事件：ondblclick(); || dblclick();

element.ondblclick = function() {};
element.addEventListener("dblclick", function() {});

注意一点，因为鼠标双击行为会默认选中当前文本，所以执行鼠标双击事件需要添加一段禁止选中文字的代码

// window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();//防止双击选中文字

element.addEventListener("dblclick", function () {
	window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();//防止双击选中文字
})

（三）元素操作
①改变元素内容：element.innerHTML
起始位置到终止位置的全部内容，包括HTML标签，保留空格和换行。
innerHTML属性是可读写的，不仅可以改变元素内容，还可以用来获取元素内容。

直接添加字符串格式的元素方法：
element.insertAdjacentHTML(“位置”, 字符串);
位置：
1 .beforebegin 元素自身的前面
2 .afterbegin 插入元素内部的第一个子节点之前
3 .beforeend 插入元素内部的最后一个子节点之后
4 .afterend 元素自身的后面

var li = '<li class="borderBottom"><span class="im">新选项卡</span> <span class="close"></span> </li>';
var section = '<section class="block">新测试项</section>'
ul.insertAdjacentHTML('beforeend', li);
div.insertAdjacentHTML('afterbegin', section);

②修改元素属性：
修改元素属性用 元素.属性 = 值 的方式直接修改

常见元素属性操作：src、href、id、alt、title等

常见表单元素的属性操作：type、value、placeholder、checked(默认选中)、selected(预选择)、disabled(表单禁用)

③元素样式属性：
行内样式：element.style.属性 = ‘值’;
类名样式：element.className = ‘值’；

排他算法：
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法
①先所有元素清除样式
②再给当前元素设定指定的样式，先后顺序不可颠倒

<div class="btn">
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
</div>

<script>
        var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';
            }
        }
</script>

④自定义属性

自定义属性的目的：是为了保存并使用数据，有些数据可以保存在页面中，而不必保存到数据库中。
自定义属性的命名规范：
H5规定了自定义属性的命名规范为以 data- 开头作为自定义属性并赋值。
自定义属性实际常应用于tab栏切换效果。

获取属性的值：
element.属性；—只能获得元素的内置属性
element.getAttribute(‘属性’)；—还可以获得元素的自定义属性

设置属性的值：
element.属性 = 值；—只能设置元素的内置属性值
elemen.setAttribute(‘属性’, ‘值’)；—还可以设置元素的自定义属性值

移除属性：
element.removeAtrribute(‘属性’)；

H5新增的获取自定义属性的方式(只能获取以data- 开头的自定义属性)：
data-index = ‘值’；
element.dataset.index; 或者 element.dataset[‘index’];

data-list-name = ‘值’；
element.dataset.listName; 或者 element.dataset[‘listName’];

⑤节点操作
节点操作就是利用节点的层次关系来更方便的获取元素。
在网页中，所有的内容（标签、属性、文本、注释等），都是节点，在DOM中，节点用node来表示。
DOM树中的所有节点均可通过JS进行访问，所有HTML元素节点均可被修改，也可以创建或删除。
1 .父级节点
node.parentNode 返回指定节点的父节点，注意是最近的父节点，如果指定的元素没有父节点返回null

2 .子级节点
parentNode.children 返回指定元素的子元素节点的集合
parentNode.firstElementChild 返回指定元素的第一个子元素节点
parentNode.lastElementChild 返回指定元素的最后一个子元素节点

3 .相邻节点
node.nextElementSibling 返回指定元素的下一个相邻节点
node.previousElmentSibling 返回指定元素的上一个相邻节点

⑥创建元素节点
1 .新建
document.createElement(‘节点名’);
2 .添加
node.appendChild(child); 需要添加的父级.appendChild(创建好的子节点);
node.insertBefore(child, 指定元素); 添加到指定父元素中指定元素的前面
3 .删除
node.removeChild(child);

（四）事件高级
①注册：方法监听注册方式
element.addEventListener(‘type’, listener,[useCapture]);
其中，type事件类型是字符型的，并且不加on的，如click、mouseover、mouseout

②解绑：
传统绑定事件解绑：element.type = null;
监听事件绑定解绑： element.removeEventListener(‘type’, callback);注册事件时需要单独声明命名函数。

（五） DOM事件流
事件流描述的是从页面中接收事件的顺序，事件发生时，会在元素节点之间，按照特定的顺序传播，这个传播过程就是DOM事件流。

图示

在JS中，同时只能执行事件的捕获和冒泡的其中一个阶段。
传统的事件注册方式，element.ontype = callback,只能得到事件的冒泡阶段，而事件监听方式注册则可以通过回调函数的第三个参数userCapture选择得到其中任何一个阶段，userCapture的值默认为false，表示在事件的冒泡阶段调用事件处理程序，如果指定值为true，则表示在事件的捕获阶段执行函数代码。在实际开发中，更关注冒泡。

（六）事件对象
element.addEventListener(‘type’, function(event) { callback code });
回调函数里的event，就是事件对象，可以当作形参来看，事件对象只有有了事件才会存在，它是系统来创建的，不需要传递参数。它包含了一系列和此事件相关的数据集合。

①事件对象常见的属性和方法；
e.target 返回触发事件的对象 （this返回的是绑定事件的对象）
e.type 返回事件的类型
e.preventDefault() 该方法可以阻止事件的默认行为，比如让链接不跳转
e.stopPropagation() 该方法可以阻止事件冒泡 ，阻止冒泡的兼容性写法：e.cancelBubble = true;

②事件委托：
事件冒泡本身的特性，会带来坏处，也会带来好处，如利用事件冒泡来实现事件委托。
事件委托的原理就是：不要给每一个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点。

③鼠标事件对象：
1 . 返回相对于页面可视区的坐标：
e.clientX 和 e.clientY
2 . 返回相对于整个文档页面的鼠标坐标：
e.pageX 和 e.pageY

④键盘事件对象
常用键盘事件：
1 .keyup
按键弹起的时候触发
2 .keydown
按键按下的时候触发，keyup和keydown返回按键ascii时，不区分大小写。
3 . keypress
按键按下的时候触发，但是不识别功能键
e.keyCode 返回相应键的ascii码值