Dom
一: Dom 的概念 Dom 的简介: 全称为 document object model 文档对象模型, 是操作文档的一整套方法 - 文档 - html,document 时一个对象, 是 dom 的顶级对象, 属于 Windows 的一个对象, 并且可以说是最出色的.
Dom 节点: 组成整个 HTML 流程的所有步骤, 相当于是所有标签, 文本, 属性, 注释构成了整个网页 - 将构成网页的每一个部分内容都看作是一个节点, 整个网页是由很多节点组成的. 节点主要是:(标签, 文本, 属性, 注释) / 元素节点(标签) , 因为在实际的操作过程中, 元素节点是比较重要的, 所以在获取或者创建节点的时候, 一般都是在操作元素节点, 像注释节点, 文本节点相对来说就用的比较少.
Dom 树: 简单来说, Dom 树就是由许多的节点构成的, 在以根节点 HTML 的基础上, 其余节点为子节点, 组成一个树的数据结构就是为 Dom 树.
dom 树的表示.
二: Dom 节点操作
那么我们为什么要获取节点呢? 节点能做什么?
1, 找到元素
2, 设置元素属性值
3, 设置元素的样式
4, 创建 / 删除元素
5, 事件的触发
等等等等....
所以节点的作用是非常给力的. 涉及的知识较多, 我就简单总结下节点的所有的基本操作.
1: 获取元素的方法
- console.log(document) // document
- console.log(document.documentElement) // 获取 HTML 标签
- console.log(document.body) // 获取 body 标签
- console.log(document.head) // 获取 head 标签
- console.log(document.title) // 获取 title 标签
- // 获取有 id 的标签的 dom 方法时, 必须使用 document 调用 getElementById
- console.log(document.getElementById('id')) // 通过 id
- //getElementsByTagName 这个方法除了可以使用 document 以外, 还可以使用元素调用
- console.log(document.getElementsByTagName('div')) // 通过标签名
- console.log(document.getElementsByClassName('.box')) // 通过 class 名获取
- console.log(document.getElementsByName('name')) // 通过 name 名来获取
- console.log(document.querySelector('.box')) // 通过 CSS 选择器来获取
- console.log(document.querySelectorAll('div')) // 通过 CSS 选择器来获取 所有的标签
- // 总结 : 通过 id 和 name 获取标签只能使用 document 调用, 通过标签名, class 名, CSS 选择器都可以通过父元素来调用方法, 获取子元素的标签
2: 节点的类型 nodeType & 节点名 nodeName & 节点值 nodeValue
要想获取节点的类型, 名称, 值需要先获取对应的节点. 以下是我书写的 HTML 标签.
节点主要有 文本节点, 注释节点, 元素节点
- <div id="ids">
- <!-- dom 是 文档对象模型 -->
- <div class="box">文本</div>
- <p > 文本</p>
- <div class="box" name="1"></div>
文本 属性
- </div>
- var ids = document.getElementById('ids')
- var nodes = ids.childNodes // 获取 ids 下的所有子节点
- console.log(nodes) // nodes 是 ids 下所有子节点的集合列表
- console.log(nodes[0].nodeType) // 文本节点类型 3
- console.log(nodes[0].nodeName) // 文本节点名 #text
- console.log(nodes[0].nodeValue) // 文本节点值 就是文本内容, 空格也是文本节点
- console.log(nodes[1].nodeType) // 注释节点类型 8
- console.log(nodes[1].nodeName) // 注释节点名 #comment
- console.log(nodes[1].nodeValue) // 注释节点值 就是注释内容
- console.log(nodes[3].nodeType) // 元素节点类型 1
- console.log(nodes[3].nodeName) // 元素节点名 大写的标签名
- console.log(nodes[3].nodeValue) // 元素节点值 null
3: 节点的操作
还是一样, 配合我书写的 div 标签为 ID 名为 ids 的来演示节点的操作方法
- var ids = document.querySelector('#ids') // 获取父元素
- console.log(ids.childNodes) // 获取 ids 下的所有子节点
- console.log(ids.children) // 获取 ids 下的所有子元素节点
- console.log(ids.firstChild) // 获取 ids 下的第一个子节点
- console.log(ids.firstElementChild) // 获取 ids 下的第一个子元素节点
- console.log(ids.lastChild) // 获取 ids 下的最后一个子节点
- console.log(ids.lastElementChild) // 获取 ids 下的最后一个子元素节点
- console.log(ids.nextSibling) // 下一个兄弟节点
- console.log(ids.nextElementSibling) // 下一个兄弟元素节点
- console.log(ids.previousSibling) // 获取上一个兄弟节点
- console.log(ids.previousElementSibling) // 获取上一个兄弟元素节点 // 不只是相同的标签, 不同的也可以
- console.log(ids.parentNode) // 获取父节点
- console.log(ids.parentElement) // 获取父元素节点
4: 节点的增删改查操作(重要)
节点操作 - 增
1: 创建元素节点: document.createElement(字符串的标签名)
2: 创建文本节点: document.createTextNode("文本") 相当于创建了一个文件节点对象, 直接可以将这个文本节点对象插入在任何需要的位置
3: 追加: 父容器. appendChild(子元素); 将子元素插入在父容器的尾部
4: 给标签添加文本: 父容器. textContent = '你要添加的内容'
- var div = document.createElement('div') // 创建 标签
- document.body.appendChild(div) // 将 div 元素放在 body 标签的尾部
- // 追加: 父容器. appendChild(子元素); 将子元素插入在父容器的尾部
- var span = document.createElement('span')
- div1.appendChild(span) // 将 span 标签放在 div 标签中
- span.textContent = '你好'
- // 插入标签 在 div 中, 插入一个 b 标签到 span 便签前
- var b = document.createElement('b')
- // 插入书写方式一:
- div.insertBefore(b,span)
- // 插入书写方式二:
- div.insertBefore(b,div.lastElementChild)
- // 创建文本节点: document.createTextNode("文本")
- // 放在 div 的 b 标签中
- var text = document.createTextNode('我是创建好的文本节点')
- // 将创建好的文本节点插入在 div 中 第一个元素节点前
- div.insertBefore(text,div.firstElementChild)
- console.log(div)
- // 复制元素 元素. cloneNode(深度布尔值)
- var b1 = b.cloneNode(false) // 浅复制
- var b2 = b.cloneNode(true) // 深复制
- console.log(b1,b2)
- // 1: 元素. remove(); 元素自身删除
- // 2: 页面标签. remove(); // 指从 DOM 树上删除
- // 3: 父容器. removeChild(子元素); 父容器删除子元素
- // 4: 快速清除所有子元素: 元素. innerHTML = " "
- var b = document.createElement('b')
- document.body.appendChild(b)
- // 复制元素
- var b1 = b.cloneNode(false)
- var b2 = b.cloneNode(false)
- b1.remove() // 删除 b1 元素
- var dl = document.createElement('dl')
- document.body.appendChild(dl)
- dl.appendChild(b2)
- dl.removeChild(b2) // 删除再 dl 中 的 b2 元素
- // 注意这样是 无法删除干净 需要 b2 = null
- document.body.appendChild(b2) // 这行代码证明 b2 没有删除干净, 缓存还在
- b2 = null // 当 b2 被赋值为 null 时 b2 就是完全删除干净, 无法再调用
- // document.body.appendChild(b2) // 在这里 b2 无法被调用 , 并且报错
- var input = document.createElement('input') // 创建 input 标签
- var div = document.createElement('div') // 创建 div 标签
- document.body.appendChild(div) // 将 div 元素插入在 body 的尾部
- document.body.replaceChild(input,div) // 替换元素
- var div0 = document.createElement('div')
- document.body.appendChild(div0)
- div0.setAttribute('渣渣辉','一刀 999') // 给元素添加属性
- div0.setAttribute('class','999') // 属性 2
- // 2: 元素的属性 - 删 - 元素. removeAttribute(属性名)
- div0.removeAttribute('渣渣辉') // 删除属性 渣渣辉
- // 3: 元素的属性 - 改 - 改其实就是增加属性的操作, 当属性不存在, 就是增, 当属性存在, 再就是再原基础上修改他
- div0.setAttribute('class','666666')
- // 4: 元素的属性 - 获取 (查看) 属性值 - 元素. getAttribute(属性名)
- console.log(div0.getAttribute('class'))
- // 扩充知识 1 :DOM 元素都是对象模型, 对象属性并不会显示在标签上(如: a 标签的 href 属性, img 的 src 属性)
- // 扩 1 案例 :1: img.src = '你要放入的图片地址' 2: a.href = '你要放入的图片地址' 3: div.a = 10 - 给 div 添加属性, 名为 a 值为 10
- // 扩 2:DOM 元素都是 object, 所以设置属性都是按照对象属性来设置, 当遇到标签属性值和对象属性值冲突时, 以对象属性值为准
- // 扩 2 案例:
- var ck=document.querySelector("input")
- ck.setAttribute("checked","") // input 添加属性 checked ,input 设置 checked 时, 就是为 true == 选中
- ck.checked=false // 当标签属性值和对象属性值冲突时, 以对象属性值为准, 此时 checked 就是为 false == 不选中
- // 1: 标签样式 - 增
- // 方法 1: 通过增加属性的方法增加 行内 (注意行内)样式 元素. setAttribute(属性名, 属性值)
- var div0 = document.createElement('div')
- document.body.appendChild(div0)
- div0.setAttribute("style","width:50px;height:50px;background-color:red")
- // 方法 2: - 元素. style. 你要添加的样式名 = '样式值'
- div0.style.margin = '5px'
- // 2: 标签样式获取
- console.log(div0.style.width) // 只能获取到 行内样式 , 无法获取到内部和外部的样式
- // 万能获取法: getComputedStyle(元素) 不管是 行内, 内部, 外部的样式都能获取
- console.log( getComputedStyle(div0).width)
- // 3 : 获取元素的矩形边界限范围 (IE8 以后才有的方法)
- // 语法: 元素..getBoundingClientRect()
- // IE 兼容方法: 元素. currentStyle. 样式属性
- var res = div0.getBoundingClientRect()
- console.log(res)
- // 此方法也是对象模型, 属性共有 八个, 分别为以下属性
- /*{
- width, // offsetWidth
- height, // offsetHeight
- left, // 最左边到可视窗口的距离
- top, // 最顶部到可视窗口的距离
- right, // left+width 最右边到可视窗口的距离
- bottom, // top+height 最下面到可视窗口的距离
- x, // left 坐标 X 轴
- y // top 坐标 Y 轴
- }
- */
来源: https://www.cnblogs.com/MnongY/p/12747802.html