JavaScript-dom节点操作

js 操作dom节点

什么是dom

• DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

过程

• HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM数–所有的东西都是节点

上图可知，在HTML当中，一切都是节点：（非常重要）

• 元素节点：HMTL标签。

• 文本节点：标签中的文字（比如标签之间的空格、换行）

• 属性节点：：标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。

节点的类型—nodeType

• 1：元素
• 2：属性
• 3：文本

	// nodeType节点类型，nodeName节点名字，nodeValue节点值
console.log(elem.nodeType, elem.nodeName, elem.nodeValue) // 元素节点的，类型为1
console.log(text.nodeType, text.nodeName, text.nodeValue) // 文本节点的，类型为3
console.log(attr.nodeType, attr.nodeName, attr.nodeValue) // 属性节点的，类型为2
console.log(fra.nodeType, fra.nodeName, fra.nodeValue) // 文档片段节点，类型为11

节点的查找

	// 通过id查找
	document.getElementById()
	// 通过标签名查找
	document.getElementsByTagName()
	// 通过name属性查找
	document.getElementsByName()
	// 通过class查找
	document.getElementsByClassName()
	// 通过css选择器
	document.querySelector()
	// 通过css选择器 ，全部类型相同的，返回一个数组
	document.querySelectorAll()
	// 内容
	document.body
	// 头部
	document.header[]
	// a标签的
	document.links[]
	// 表单
	document.formName

节点的创建

	// 创建元素节点
	document.createElement("p");
	// 创建文本节点
	document.createTextNode("文本节点");
	// 创建属性节点
	document.createAttribute("data-item");

	// 设置属性节点
	elem.setAttributeNode(创建的属性节点的返回值);

	// 创建文档片段 -- 可以在这里面添加节点，之后再渲染到body中
	// 优化了dom渲染
	var far = document.createDocumentFragment();
	far.append(elem);
	document.body.append(far); // 添加

节点关系

子节点关系

	// 子关系
	elem.childNodes // 所有的子节点
	elem.firstChild // 第一个子节点
	elem.firstElementChild // 第一个子元素节点

父节点关系

	// 父关系
	elem.parentNode // 父节点
	elem.parentElement //父元素节点
	elem.offsetParent // 定位元素父节点 或者 body

兄弟节点关系

	// 兄弟关系
	elem.nextElementSibling	// 下一个兄弟元素节点
	elem.nextSibling	// 下一个兄弟节点
	elem.previousElementSibling		// 上一个兄弟元素节点
	elem.previousSibling	// 上一个兄弟节点

节点的操作

增

• append()—追加多个子节点
• appendChiled()—追加单个子节点

删

• remove()—删除自己
• removeChiled()—删除子节点

改

• replaceChild(new,old)—新的节点替换旧的节点

复制

• cloneNode()—复制
• cloneNode(true)—也复制子节点

插入

• insertBefore(new,old)—在old参照物之前插入new

获取节点rect

• getBoundingClientRect()—获取对应节点基于浏览器视口的位置