DOM

DOM

1: 什么是dom对象

dom对象就是html页面，dom对象的全称叫document object model(文档对象模型)

2: dom对象的作用

dom对象就是通过一些方法和属性来操作标签
将标签元素进行添加、移动、改变或移除

3：标签 == 标记 == 元素 == 节点

4: dom节点的分类

dom节点分为3种类型 1标签节点 2文本节点 3属性节点

5: 返回节点类型值

nodeName 节点名字，和tagName方法一样
nodeValue 节点值
nodeType 节点类型 标签节点返回数字1,属性节点返回数字2，文本节点返回数字3

6: 查找子节点

childNodes[0] 返回当前元素节点的所有子节点
firstChild 获取该节点的第一个子节点
lastChild 获取该节点的最后一个子节点
parentNode 获取该节点的父节点
previousSibling 获取该节点的前一个节点
nextSibling 获取该节点的下一个节点
children[0] 获取该节点的子标签节点
firstElementChild 第一个子标签属性
lastElementChild 最后一个子标签属性
nextElementSibling 下一个兄弟元素节点
previousElementSibling 前一个兄弟元素节点
childElementCount 子元素节点个数量

7: 查找属性节点

attributes 属性

8: 操作属性节点

document.getAttribute() //获取特定元素节点属性的值/通过属性获取到对应的属性值
document.setAttribute(要设置的属性，属性值) //设置特定元素节点属性的值/通过属性设置对应的属性值
document.removeAttribute() //移除特定元素节点属性的值

9: 操作节点

createElement() 创建标签
createTextNode() 创建文本
appendChild(创建的标签名，当前的标签名) 把标签或者文本插入/添加到另一个节点里面 不加引号
insertBefore() 在当前节点前面创建一个节点
用insertBefore方法创建节点必须先找到当前节点的父节点后，在创建方法里面不加引号
replaceChild(新节点，旧节点) 把节点替换成指定的节点
cloneNode(false/true) 克隆/复制节点 true克隆的是标签+文本 如果是false 只会克隆标签
removeChild() 删除节点

10：移入移出事件

onmousemove 移入事件
onmouseout 移出事件

11: 根据选择器获取元素信息

// 任何浏览器都支持
	1- 根据id属性获取指定元素信息,返回一个元素信息 元素对象
			document.getElementById("id属性值");
	2- 根据标签名获取指定元素信息,返回一个伪数组,里面包含多个dom对象
			document.getElementsByTagName("标签名");
// -- 有浏览器限制
	3- 根据name获取指定元素信息,返回一个伪数组,里面包含多个dom对象
			document.getElementsByName("name属性值")
	4- 根据类样式获取指定元素信息,返回一个伪数组,里面包含多个dom对象
			document.getElementsByClassName("类名")
	5- 根据选择器名称获取指定元素信息,返回一个元素信息
			document.querySelector("选择器名");
	6- 根据选择器名称获取指定元素信息,返回一个伪数组,里面包含多个dom对象
			document.querySelectorAll("选择器名");

12: 自定义属性

获取自定义属性 getAttribute(“属性名”)
设置自定义属性 setAttribute(“设置的属性名”,“设置的属性值”)
移除自定义属性 removeAttribute