WebAPI 之 DOM

DOM：由W3C定义的一系列接口，可以改变网页内容、结构和样式。

API（Application Programming Interface）：应用程序编程，提供函数库。
Web API：是浏览器提供的一套浏览器功能（BOM）和页面元素（DOM）的API。

1,document属性

1.1ID取对象

document.getElementById("time");    //<div id="time">2020-05-04</div>

1.2标签名

document.getElementsByTagName("li");

1.3类名获取对象集合（H5）

document.getElementsByClassName("divclass"); 

1.4指定选择器第一个元素（H5）

document.querySelector('选择器'); 

1）document.querySelector('.id');
       2）document.querySelector('#class');
       3）document.querySelector('li');

1.5指定选择器所有元素（H5）

document.querySelectorAll('选择器'); 

1.6body元素对象

document.body;

1.7html对象

document.documentElement;

1.8创建元素

document.write('<div>123<div>')

注意：直接将内容写入页面的内容流，但文档流执行完毕，则会导致页面全部重绘。

2，元素操作

2.1文件

element.innerText = '123'; //只操作文字，不识别HTML

2.2HTML

element.innerHTML = ‘<span>123<span>’; //文字，HTML都可操作

2.3修改属性（内置属性）

・element.src = 'xxx.jpg';

・element.value = '被点击了'; //<input ...>

・element.disable = true; //button禁用

・element.type = 'text'; //password -> text 应用场景：密码可见

・element.style.backgroundColor = 'pink'; //CSS属性修改，行内样式

・element.ClassName = 'change'; //change为CSS样式名

2.4修改属性（内置或自定义属性）

・element.getAttribute('属性')； //H5规范，自定义属性以【data-】开头

・element.setAttribute('属性','值'); //主要针对自定义属性

・element.removeAttribute('属性'); //移除属性

3，事件

例：

<button id='btn'>唐伯虎</button> //事件源
var btn = document.getElementById('btn'); //获取事件源
btn.onclick = function(){ alert('点秋香');} //点击事件，方法体

3.1常用事件

3.1.1点击事件

element.onclick = function(){} 

3.1.2获取焦点

element.onfocus = function(){}

3.1.3失去焦点

element.onblur = function(){}

3.2事件监听

若对同一对象注册多个相同事件，则事件会出现覆盖现象，推荐使用监听注册方式，从而可以避免事件覆盖现象发生。

例子：

btn.addEventListener('click',function(){ })

3.3删除事件（解绑）

1）div.onclick = null ; //传统解绑方式

2）eventTarget.removeEventListener(type,Listener[,useCapture]);

3）eventTarget.detachEvent(eventNameWithOn,callback);

3.4DOM事件流

1）捕获阶段 //网景公司提出

2）当前目标阶段

3）冒泡阶段 //IE提出

注意：
      JS只可执行1）3）中的一个；
      onclick,attachEvent只能得到冒泡阶段；
      onblur,onfocus,onmouseenter,onmouseleave没有冒泡阶段。

语法：

addEventListener(type,function(){},flag); //flag:true:捕获阶段,false:冒泡阶段

3.5事件对象

IE6，7，8：window.event
IE9+         :  event或e
e = e || window.evet; //兼容性处理

1）e.targer //触发事件对象（谁出发的） IE6，7，8：e.srcElement

2）e.type //事件类型，点击还是鼠标经过等等，注意不带on

3）e.preventDefault(); //阻止默认行为，IE6，7，8：e.returnValue

4）e.stopPropagation(); //阻止冒泡，IE6，7，8：cancelBubble

3.6事件委托

用处：不必给每个子节点添加时间监听，而是在父节点上添加，提高性能。常与e.target搭配使用。

3.7补充技巧

3.7.1阻止右键菜单

document.addEventListener('contextmenu',function(e){ e.preventDefault();})

3.7.2阻止选中

document.addEventListener('selectstart',function(e){ e.preventDefault(); })

4,节点Node

4.1节点类型（nodeType）

1）nodeType=1；//元素节点

2）nodeType=2； //属性节点

3）nodeType=3； //文本节点（文字，空格，换行等）

4.2查找

3.2.1父节点

element.parentNode;

3.2.2子节点

parentNode.childNodes; //集合（含元素和文本）

parentNode.childNodes[i].nodeType == 1; //元素节点

parentNode.children; //只取子节点的元素节点

parentNode.firstElementChild; //第一个元素子节点（IE9+）

parentNode.lastElementChild; //最后一个元素子节点（IE9+）

parentNode.children[0]; //第一个元素子节点

parentNode.children[ol.children,lenth - 1]; // 最后一个元素子节点

3.2.3兄弟节点

node.nextSibling; //下一个兄弟节点，无则返回null，包含所有节点

node.previousSibling; //上一个兄弟节点

node.nextElementSiling; //下一个兄弟元素节点（IE9+）

node.previousElementSibling; //上一个兄弟元素节点（IE9+）

4.3创建节点

1）document.createElement('tagName'); //动态创建

2）node.appendChild(child); //追加节点（最后）

3）node.insertBefore(child,指定元素); //插到指定子元素前面

4.3删除节点

node.removeChild(child);

4.4复制节点

node.cloneNode(); //只复制节点本身，不复制子节点，浅拷贝

node.cloneNode(true); //深拷贝，复制本身及内容

5，重要事件

5.1鼠标事件

5.1.1鼠标在可视区的XY坐标

e.clientX,e.clientY

5.1.2鼠标在浏览器窗口的XY坐标

e.pageX,e.pageY

5.1.3鼠标在电脑屏幕的XY坐标

e.screenX,e.screenY

5.1.4鼠标移动事件

mousemove

案例（天使移动）：//pic为绝对定位

document.addEventListener('mousemove',function(e){

pic.style.left =  e.pageX + 'px';

pic.style.top=  e.pageY + 'px';

})

5.2键盘事件

5.2.1键盘弹起时触发：onKeyUp

5.2.2键盘按下时触发：onKeyDown

5.2.3键盘按下时触发，不识别功能键：onKeyPress（功能键：ctrl,shift,alt,方向键）

5.2.4按键的ASCII值：keyCode（区分大小写）