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()
—获取对应节点基于浏览器视口的位置