dom基础学习

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

功能：操作HTML元素。

document是页面视口的区域。

节点(Node)

​ nodename nodeValue nodeType
元素节点 标签名 null
文本节点 #text 标签中文本内容
属性节点 属性名 属性值
注释节点 comments 注释内容

注：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新增

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

faEle.nextSibling	// 获取下一个兄弟节点
faEle.nextElementSibling	// 获取下一个兄弟元素节点
faEle.previousSibling	// 获取上一个兄弟节点
faEle.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)

事件流
true捕获型,从外往里触发事件
false冒泡型,从里往外触发事件
注：HTML结构