DOM

DOM：Document Object Model，文档对象模型。

功能：操作HTML元素。

document是页面视口的区域。

节点(Node)

         nodename    nodeValue    		nodeType
元素节点    标签名        null				1
文本节点    #text        标签中文本内容		3
属性节点    属性名		属性值				2
注释节点    comments		注释内容				8
文档document									9

注：nodename为大写，localname为小写。

let navEle = getElementsByTagName("nav");	// 通过标签名获取元素
document.getElementsByName("x");	// 通过属性name值来获取元素,注：不止input可以添加name属性
document.getElementsByClassName();	// 通过Class获取元素
document.getElementById();		// id是唯一的

document.querySelector(css表达式);		// 返回第一个满足条件的元素节点
document.querySelectorAll("header>nav"); 	// 返回所有满足条件的元素节点
注：不实时更新数据,即一直保留获取那一刻的节点。后面的操作(增删查改等)对其无效。
Es6新增

faEle.firstChild;	// 获取第一个子节点
faEle.lastChild;	// 获取最后一个子节点
faEle.firstElementChild;	// 获取元素节点第一个节点
faEle.lastElementChild;		// 获取元素节点最后一个节点
faEle.childNodes;	// 获取所有子节点,包含其他节点
faEle.children;		// 获取所有子元素节点

ele.parentNode;		// 获取父节点 子节点.parentNode;
ele.parentElement;	// 获取父元素节点
ele.nextSibling	// 获取下一个兄弟节点
ele.nextElementSibling	// 获取下一个兄弟元素节点
ele.previousSibling	// 获取上一个兄弟节点
ele.previousElementSibling	// 获取上一个兄弟元素节点

节点.innerHTML = str;		// 覆盖,会将标签转化为html代码
节点.innetText = str;		// 覆盖,不会将标签转化为html代码

添加元素节点

步骤:
1.创建新节点
-创建元素节点
-创建文本节点
-把文本节点添加到元素节点中
2.添加节点
-获取被添加的元素A
-把创建的节点,添加给A(即为A的子节点)

document.createElement("标签名");	// 创建元素节点
document.createTextNode("lovo");	// 创建文本节点
父元素节点.appendChild(子节点);	// 添加创建的子节点,如果存在该节点,相当于移动(即剪切)。放在父节点的最后

属性节点

元素节点.getAttribute('属性名');	// 获取属性值	ele.getAttribute('class');
元素节点.属性名;	// 快速获取属性值 ele.className;
注：class是关键字,使用className;name不能用
元素节点.hasAttribute('属性名');	// 	查找属性名,返回boolean;
元素节点.setAttribute('属性名', '属性值'); 	// 添加/修改属性,自定义属性名必须以data-开头。属性值会转字符串
元素节点.属性名 = 属性值;		// 添加/修改属性	注：同上
元素节点.removeAttribute('属性名');	// 删除属性

自定义属性

ele.dataset.index;	// 获取ele元素的自定义属性data-index的属性值

ClassList

ele.classList 	// 获取class的值(0到多个)	ele.classList 类数组
ele.classList.add('类名')		// 添加类名,不会覆盖,有去重功能。
ele.classList.contains('类名')	// 是否包含查找的类名
ele.classList.toggle('类名')	// 有类名则删除false,反之则增加true,返回boolean
ele.classList.remove('类名');	// 删除类名

注释节点

document.createComment('我是一个注释');	// 创建注释节点

插入节点

步骤:
获取元素节点
1.父元素节点
2.插入节点
3.插入到哪个元素之前

父元素节点.insertBefore(A, B);
注：A是插入节点,B是插入到哪个节点之前。即A插入到B之前。
如果A标签是存在的标签,则从原来的位置移动到B之前。

替换节点

步骤:
获取元素节点
1.父元素节点
2.替换节点
3.替换那个节点(被替换的节点)

父元素节点.replaceChild(A, B);
注：A是替换节点,B是被替换节点。如果A存在,替换B后会消失。

删除节点

节点名.remove();
如果删除的是父节点，会把自己和后代节点一同删除

克隆节点

标识符 = 节点名称.cloneNode(boolean); 	// 返回一个克隆节点
// 深克隆:参数为true,表示会吧子节点和后代节点一同克隆
// 浅克隆:参数为false,只克隆当前节点,不包含其子节点和后代节点

节点样式

ele.style.css属性 = 赋值
ele.style.css属性;	// 只能获取行内样式,可读可改。

添加css样式

window.getComputedStyle(元素节点, null).css属性;	// 获取元素属性值 不.css属性获取的是元素节点对象
window.getComputedStyle(元素节点, ':before或:after').css属性;	// 获取元素节点伪元素的属性值
注：获取的是最终样式,只读。

事件

事件的三要素：
事件源：绑定事件的节点
事件处理函数：事件触发时，调用的函数
事件类型：触发类型

// DOM2 添加事件监听器
事件源.addEventListener(参1,参2,参3);
参1：事件类型 不加on
参2：事件处理函数
参3：事件流(boolean,默认为false)
// 删除事件监听器
事件源.removeEventListener(参1,参2); // 同上
// event.preventDefault(); 阻止默认事件
// event.stopPropagation(); 阻止冒泡
// event.stopImmediatePropagation(); 阻止捕获

事件流
true捕获型,从外往里触发事件
false冒泡型,从里往外触发事件
注：HTML结构
IE 提出事件流为冒泡型事件流，Netscape 提出事件流为捕获型事件流。

事件委托/事件代理(优化性能)

​ 给父元素添加事件，监听子元素。

function(e){
	// e事件对象
	let event = e || window.Event; // 兼容性
	event.target // 触发事件的节点
}

事件类型

鼠标类型

click 鼠标单击
dblclick 鼠标双击
mouseenter 鼠标移入 mouseleave 鼠标移除 注:这两个不考虑子元素,所以不能用事件委托
mouseovet 鼠标移入 mouseout 鼠标移出 注:这两个会考虑子元素;鼠标移入后代节点,也会触发祖先节点的事件。
mousedown 鼠标按下
mouseup 鼠标抬起
mousemove 鼠标移动
// 鼠标离浏览器视口的水平距离:${event.clientX},鼠标离浏览器视口的垂直距离:${event.clientY}`
// 鼠标离浏览器页面的水平距离:${event.pageX},鼠标离浏览器页面的垂直距离:${event.pageY}`
// 鼠标离事件源的水平距离:${event.offsetX},鼠标离事件源的垂直距离:${event.offsetY}`
// ele.offsetLeft,如果祖先元素没有定位,则为节点元素外边框到左边视口的距离,body.offsetLeft=0;如果祖先元素有定位,则为节点元素外边框到祖先元素内边框的距离
ele.offsetWidth // 节点的宽度,边框盒
ele.clientWidth // 节点的宽度,内容盒
event.button // 左键 中 右 0 1 2

页面类型

scroll 滚动条
// window.scrollTo(0, 0);x,y
// window.scrollBy(x,y);x,y给正值,往下滚动。给负值,往上滚动。
load 页面加载完执行
resize 浏览器尺寸发生变化 window

表单事件

焦点
focus // 输入框被点击时触发
blur // 焦点失去时触发
input // 文本框输入时触发
change // 在失去焦点时判断是否发生改变,改变就触发 select.value 下拉列表选中子元素的value值

键盘事件

// event.keyCode 识别输入的键,返回ASC码 event.key 返回输入的键
/**
 * A:65、a:97
 * 空格:32、回车:13
 * control:17、alt:18、shift:16 全称	// event.altKey && event.key == "a" alt键+a组合键
 */
keydown // 键盘按下
keyup // 键盘抬起
keypress // 键盘按下,并识别可以识别的字符键(数字、字母、标点符号、回车)

拖拽

// 给元素添加draggable="true" 源对象(被拖拽的节点)	目标对象(把节点拖拽到的区域)
// 源对象
dragstart // 源对象开始拖拽
drag // 源对象拖拽中
dragend // 源对象结束拖拽
// 目标对象
dragenter // 源对象进入
dragleave // 源对象移出
dragover // 源对象在目标对象移动
drop // 源对象在目标对象释放鼠标 // 为了触发drop事件需要在dragover中阻止默认事件