DOM节点获取元素的偏移量等属性词

节点属性
每一个节点都有自己的特点
这个节点属性就记录着属于自己节点的特点
1. nodeType(以一个数字来表示这个节点类型)
语法: 节点.nodeType
得到: 一个数字, 代表着这个节点的类型
元素节点: 1
属性节点: 2
文本节点: 3
注释节点: 8
例子: 将来我获取到某一个节点, 我不确定他是不是元素节点
我只要判断他的 nodeType === 1 那么这个节点一定是一个元素节点
2. nodeName(节点名称)
语法: 节点.nodeName
得到: 一个名称, 属于这个节点的名称
元素节点: 大写标签名(全是大写)
属性节点: 属性名
文本节点: #text(所有文本节点的名字都叫做 #text)
注释节点: #comment(所有的注释节点名字都叫做 #comment)
例子: 将来我获取到某一个节点, 确定了他是元素节点, 但是不确定是哪一个元素
我只要判断他的 nodeName === ‘DIV’, 就能确定他是一个 div 标签
3. nodeValue(节点的值)
语法: 节点.nodeValue
得到: 一个值, 这个节点存储的值
元素节点: null, 元素节点没有值
属性节点: 属性的值
文本节点: 这个节点所代表的文本内容(包含换行和空格)
注释节点: 这个注释里面所写的文本内容(包含换行和空格)
// 0. 获取到四种节点
// 0-1. 获取元素节点 div
var div = document.querySelector(‘div’)
// console.log(div)
// 0-2. 获取一个属性节点(id=“box”)
var attr = div.attributes[0]
// console.log(attr)
// 0-3. 获取一个文本节点
var text = div.childNodes[0]
// console.log(text)
// 0-4. 获取一个注释节点
var comment = div.childNodes[1]
// console.log(comment)
// 1. nodeType
// console.log(div.nodeType) // => 元素节点的节点类型
// console.log(attr.nodeType) // => 属性节点的节点类型
// console.log(text.nodeType) // => 文本节点的节点类型
// console.log(comment.nodeType) // => 注释节点的节点类型
// 2. nodeName
// console.log(div.nodeName) // => 元素节点的节点名称
// console.log(attr.nodeName) // => 属性节点的节点名称
// console.log(text.nodeName) // => 文本节点的节点名称
// console.log(comment.nodeName) // => 注释节点的节点名称
// 3. nodeValue
console.log(div.nodeValue) // => 元素节点的值
console.log(attr.nodeValue) // => 属性节点的值
console.log(text.nodeValue) // => 文本节点的值
console.log(comment.nodeValue) // => 注释节点的值
节点操作 - 创建节点
之前我们的节点都是从页面上获取来的
创建节点 - 通过 js 代码创建一个标签
1. document.createElement() - 在文档流里面创建一个元素节点
语法: document.createElement(‘你要创建的元素节点名称小写就行’)
返回值: 就是一个创建好的元素节点
和你在页面上获取的元素节点没有任何区别
只不过创建出来的节点没有在页面上
2. document.createTextNode() - 在文档流里面创建一个文本节点
语法: document.createTextNode(‘你要创建的文本内容’)
返回值: 就是一个文本节点
和你在页面上获取来的文本节点一样, 没有区别
只不过一个在页面上, 一个是我凭空捏造
// 0. 获取页面上的 div 标签
var div = document.querySelector(‘div’)
div.innerHTML = ‘我是一段文本内容’
div.className = ‘box1 box2’
console.log(div)
// 1. 创建一个 div 标签
var creDiv = document.createElement(‘div’)
creDiv.innerHTML = ‘我是一段文本内容’
creDiv.className = ‘box3 box4’
console.log(creDiv)
// 2. 创建一个文本节点
var text = document.createTextNode(‘我是凭空捏造的一个节点’)
console.log(text.nodeType)
console.log(text.nodeName)
console.log(text.nodeValue)
节点操作 - 插入节点
就是把一个节点添加都另一个节点里面作为子节点使用
注意: 一般都是把节点添加到某一个元素节点里面
你可以添加到一个从页面中获取的节点里面
也可以添加到一个你创建的节点里面
1. appendChild()
作用: 向某一个父节点内追加一个子节点
语法: 父节点.appendChild(要追加的子节点)
结果: 子节点被添加的父节点里面了, 排在所有节点的最后一个位置
2. insertBefore()
作用: 向某一个父节点内插入一个子节点, 插入到本身的某一个子节点的前面
语法: 父节点.insertBefore(你要插入的节点, 哪一个已经存在的子节点前面)
结果: 就是把该节点插入到父节点的指定节点前面
// insertBefore
// 0. 获取页面中的 div 节点
var div = document.querySelector(‘div’)
// 0. 获取页面中的 p 节点
var p = document.querySelector(’.c’)
// 1. 创建一个 span 节点
var creSpan = document.createElement(‘span’)
creSpan.innerHTML = ‘我是创建的一个 span 标签’
// 2. 把创建的 span 插入到 div 的内部, 并且放在 p 标签的前面
// 2-1. 看一下 appendChild 的效果
// div.appendChild(creSpan)
// 2-2. 看一下 insertBefore 的效果
div.insertBefore(creSpan, p)
// appendChild
// 0. 获取页面中的 div 标签
// var div = document.querySelector(‘div’)
// 0. 创建一个 div 标签
// var creDiv = document.createElement(‘div’)
// 1. 创建一个 span 标签
// var creSpan = document.createElement(‘span’)
// creSpan.innerHTML = ‘我是创建出来的一个 span 标签’
// 2. 把我创建的 span 标签插入页面中获取的那个 div 节点里面
// div.appendChild(creSpan)
// 2. 把我创建的 span 标签插入我创建的 div 节点里面
// creDiv.appendChild(creSpan)
// 3. 把 我 创建的 div 放在 body 标签里面
// 3-1. 获取 body 标签
// var body = document.querySelector(‘body’)
// 3-2. 把创建的 div 放在 body 标签里面
// body.appendChild(creDiv)
节点操作 - 删除节点
就是把一个已经存在的节点移除
你可以从页面的某一个节点里面移除
也可以从你创建的某一个节点里面移除
1. removeChild()
作用: 从父节点里面移除某一个子节点
语法: 父节点.removeChild(你要移除的子节点)
结果: 该父节点里面不再有这个子节点了
2. remove()
作用: 把自己直接移除
语法: 要移除的节点.remove()
结果: 自己直接被移除掉
// // 0. 获取元素
// var div = document.querySelector(‘div’)
// var p = document.querySelector(‘p’) // 我这里获取到的就是 一号
// // 1. 把 p 标签从 div 里面移除
// div.removeChild§ // 移除的也是 div 里面的 一号 p 标签
// // 2. 把 div 从 页面里面 直接移除
// // p.remove()
// 伪数组问题
// 0. 获取元素
// var div = document.querySelector(‘div’)
// var p = document.querySelectorAll(‘p’) // 获取到的是一个 伪数组, 不是一个节点
// 伪数组里面的每一个才是一个一个的节点
// 1. 把 p 标签从 div 里面移除
// div.removeChild§ // 移除的也是 div 里面的 一号 p 标签
节点操作 - 替换节点
就是用某一个节点, 去替换一个已经存在的节点
1. replaceChild()
作用: 就是把父节点下的某一个子节点替换成新节点
语法: 父节点.replaceChild(新节点, 旧节点)
结果: 使用新节点, 把旧节点替换掉
// 0. 获取元素
var div = document.querySelector(‘div’)
var p = document.querySelector(‘p’)
// 1. 创建一个 span 标签
var creSpan = document.createElement(‘span’)
creSpan.innerHTML = ‘我是创建的一个 span 标签’
// 2. 用我创建的 span 标签把 div 里面本身的 p 标签替换掉
div.replaceChild(creSpan, p)
节点操作 - 克隆节点
把一个已经存在的节点(可以是页面里面获取了, 也可以是自己创建的)
复制一份一模一样的出来
1. cloneNode()
作用: 把节点复制一份一模一样的
语法: 要克隆的节点.cloneNode(参数选填)
默认值是 false, 表示不克隆后代节点
可以选填 true, 表示克隆所有后代节点
返回值: 就是一个已经被克隆好的节点
克隆出来的标签不再页面上, 是在 JS 代码里面(在内存里面)
你想让他放在哪里, 你就自己使用插入到页面的方法去插入
// 0. 获取元素
var div = document.querySelector(‘div’)
// 1. 克隆一份一模一样的 div 出来
// var res = div.cloneNode()
// console.log(res)
var res = div.cloneNode(true)
res.style.border = ‘20px solid red’
res.className += ’ box10’
console.log(res)
// 2. 把克隆的节点插入到页面里面
var body = document.querySelector(‘body’)
body.appendChild(res)
案例 - 动态创建表格
使用数据的方法, 创建 DOM 节点
把创建好的 dom 节点添加到页面里面
利用数据生成一套 html 结构
需求:
0. 先模拟一下数据
1. 通过代码生成 三个 tr 标签
2. 每个 tr 标签里面有三个 td 标签
3. 把创建好的 三个 tr 标签放到 tbody 标签里面
// 0. 模拟数据
// 数组里面有多少个成员就是多少个 tr 标签
// 每个对象里面有多少个成员就是多少个 td 标签
var userList = [
{ name: ‘Jack’, age: 18, gender: ‘男’ }, // 一个对象就是用来描述表格里面一行数据的
{ name: ‘Rose’, age: 20, gender: ‘女’ }, // 一个对象就是用来描述表格里面一行数据的
{ name: ‘Tom’, age: 22, gender: ‘男’ } // 一个对象就是用来描述表格里面一行数据的
]
var tBody = document.querySelector(‘tbody’)
userList.forEach(function (item) {
var tr = document.createElement(‘tr’)
for (var key in item) {
var td = document.createElement(‘td’)
td.innerHTML = item[key]
tr.appendChild(td)
}
tBody.appendChild(tr)
})
// // 1. 通过数组去创建 tr 标签
// // 根据数组有多少个成员创建多少个 tr 标签添加到页面的 tbody 里面
// // 1-1. 获取 tbody 标签, 因为我要向这个标签里面添加内容
// var tBody = document.querySelector(‘tbody’)
// // 1-2. 循环遍历 userList 数组, 里面有多少个成员就创建多少个 tr 标签
// // 循环可以使用 for 循环, 也可以使用 forEach
// userList.forEach(function (item) {
// // 这个函数会根据数组中有多少成员执行多少次
// // item 在每一次的时候, 分别表示数组里面的每一个成员
// // 这个函数每执行一次, 创建一个 tr, 并且把创建好的 tr 添加到 tbody 里面
// // 1-3. 创建 tr, 因为你要创建三个 tr
// var tr = document.createElement(‘tr’)
// // 将创建好的 tr 插入到 tbody 之前, 最好向里面添加好 td 标签
// // 2. 根据每一个 item 里面有多少个成员创建多少个 td 添加到 tr 标签里面
// console.log(item) // item 就是数组里面的每一个成员
// // 2-1. for … in 循环遍历对象, 因为对象中有多少个成员就执行多少回
// for (var key in item) {
// // 这个位置的代码会根据 item 里面有多少个成员执行多少回
// // 2-2. 每执行一次, 创建一个 td 标签
// var td = document.createElement(‘td’)
// // 3. 在把 td 添加到 tr 里面之前, 把 td 里面的文本内容写好了
// // 获取到本次执行的时候, item 里面的某一个成员的值, 添加到 td 里面
// // 当 key === ‘name’ 的时候, item[key] => item[‘name’] => 就是在访问 对象中 name 成员的值
// // item.key 是在访问 item 对象中名字叫做 key 的成员的值
// // item[key] 是在访问 item 对象中名字叫做 ‘name’ 的成员的值
// // 当 key === ‘age’ 的时候, item[key] => item[‘age’] => 就是在访问对象中 age 成员的值
// td.innerHTML = item[key]
// // 2-3. 每执行一次, 把创建好的 td 标签添加到 tr 标签里面
// tr.appendChild(td)
// }
// // 1-4. 把创建好的 tr 标签添加到 tbody 里面, 因为你要把三个 tr 都添加进去
// tBody.appendChild(tr)
// })
案例 - 动态创建表格
使用数据的方法, 创建 DOM 节点
把创建好的 dom 节点添加到页面里面
利用数据生成一套 html 结构
需求:
0. 先模拟一下数据
1. 通过代码生成 三个 tr 标签
2. 每个 tr 标签里面有三个 td 标签
3. 把创建好的 三个 tr 标签放到 tbody 标签里面
问题:
在循环数组的过程中, 每循环一次, 创建一个 tr
每次循环, 都向 tbody 里面添加了一个 tr
整个代码, 向 tbody 里面添加了 三次
如果我的数组里面有 100 个数据, 那么就会向 tbody 里面添加 100 次
不好: 对性能的消耗
因为 html 结构, 是已经渲染好的, 每次添加的时候
要把 DOM 树断开, 向中间添加一个内容, 再把 DOM 树合上
操作真实页面中的 DOM 一共是 3 次
解决问题:
我如果有一个 “筐”, 承载的容器
我每次把 tr 放在筐里, 先不往 页面中 添加
等到所有的 tr 都进入 “筐” 里面的时候
最后的时候, 一次性把 “筐” 里面的所有 tr 都倒入 tbody 里面
最终, 只是操作了一次真实的 页面 中的 DOM
创建一个 “筐”(学名: 文档碎片)
1. document.createDocumentFragment()
作用: 创建一个文档碎片(“筐”), 可以承载节点
语法: document.createDocumentFragment()
返回值: 就是一个文档碎片(“筐”)
这个文档碎片可以可以作为载体, 接收一些节点插入进来
当你把这个文档碎片(“筐”)插入页面的时候, 文档碎片起到一个 虚拟节点 的作用
文档随便并不进入页面, 而是文档碎片里面的所有内容进入到页面内
// 0. 模拟数据
var userList = [
{ name: ‘Jack’, age: 18, gender: ‘男’ }, // 一个对象就是用来描述表格里面一行数据的
{ name: ‘Rose’, age: 20, gender: ‘女’ }, // 一个对象就是用来描述表格里面一行数据的
{ name: ‘Tom’, age: 22, gender: ‘男’ } // 一个对象就是用来描述表格里面一行数据的
]
var tBody = document.querySelector(‘tbody’)
// 1. 准备一个文档碎片(“筐”), 用来承载所有的 tr
var frg = document.createDocumentFragment()
// 在这里向框里面添加内容就好了
// 循环数组, 创建 tr
for (var i = 0; i < userList.length; i++) {
// 创建 tr
var tr = document.createElement(‘tr’)
// 循环 userList 里面的每一个对象, 创建 td
for (var key in userList[i]) {
// 创建 td
var td = document.createElement(‘td’)
// 向 td 中添加文本内容
td.innerHTML = userList[i][key]
// 把 td 添加到 tr 里面
tr.appendChild(td)
}
// 把 tr 放在文档碎片(“筐”)里
frg.appendChild(tr)
}
// 2. 等到循环结束, 文档碎片(“筐”)里面装满了 tr 以后, 再一次性加到 tbody 里面
tBody.appendChild(frg)
for … in 循环
因为对象里面的每一个成员名称没有规律
所以我们不好使用 for 循环来遍历
使用 for in 循环来遍历
语法: for (var key in 对象) { 重复执行的代码 }
var obj = { name: ‘Jack’, age: 18, gender: ‘男’, score: 99 }
for (var key in obj) {
// 会根据 obj 里面有多少个成员执行多少回
// 再每一次的时候, key 分别是对象中每一个成员的名称
console.log(‘执行了’, key)
// 就可以利用对象的操作语法, 来获取到对象中每一个成员的值
// 当 key === ‘name’ 的时候, obj[key] => obj[‘name’]
// 当 key === ‘age’ 的时候, obj[key] => obj[‘age’]
// 当 key === ‘gender’ 的时候, obj[key] => obj[‘gender’]
// 当 key === ‘score’ 的时候, obj[key] => obj[‘score’]
console.log(obj[key])
}
获取元素的非行内样式
之前我们学过 元素.style.xxx 方式, 可以获取和设置行内样式
获取: 只能获取行内样式, 获取不到非行内样式
JS 设置, 只能设置行内样式
不管你是怎么获取的, 设置就是 元素.style.xxx = yyy
今天我们学习一个可以获取非行内样式的方法
1. getComputedStyle() 方法
标准浏览器使用(高版本浏览器)
作用: 获取元素的样式(包含行内样式和非行内样式)
语法: window.getComputedStyle(你要获取样式的元素)
返回值: 是一个对象, 里面包含所有元素目前的样式
只读的对象, 只能获取元素的样式
你需要哪一个样式的时候, 直接在对象里面获取某一个样式的值
2. currentStyle 属性
IE 低版本使用(IE 6 7 8)
语法: 要获取样式的元素.currentStyle(包含行内样式和非行内样式)
得到: 就是一个对象, 里面包含元素多有的目前的样式
只读的对象, 只能获取元素的样式
你需要哪一个样式的时候, 直接在对象里面获取某一个样式的值
兼容:
不能用 || 来兼容
需要用 if else 来判断
// 2. 获取非行内样式的兼容写法
// 获取元素
var div = document.getElementsByTagName(‘div’)[0]
// 元素.currentStyle 在 高版本浏览器里面拿到的是一个 undefined
// 元素.currentStyle 在 IE 低版本浏览器里面拿到的是一个 对象
if (div.currentStyle === undefined) {
// 表示高版本浏览器
// 我们要使用 getComputedStyle
var style = window.getComputedStyle(div)
} else {
// 表示 IE 低版本
// 就是用 currentStyle
var style = div.currentStyle
}
// 打印所有样式的 对象
console.log(style)
// 1. 使用 style 的形式获取一下
// var div = document.querySelector(‘div’)
// console.log(div.style.width)
// console.log(div.style.height)
// 1. getComputedStyle
// var div = document.getElementsByTagName(‘div’)[0]
// // 看一下 style 拿到的内容
// console.log(div.style.width)
// console.log(div.style.height)
// // 看一下 getComputedStyle 拿到的内容 - 标准浏览器
// console.log(window.getComputedStyle(div).width)
// console.log(window.getComputedStyle(div).height)
// // 看一下 currentStyle 拿到的内容 - IE 低版本
// console.log(div.currentStyle.width)
// console.log(div.currentStyle.height)
获取元素偏移量的参考系是谁 ?
假设你要给一个元素设置绝对定位的时候, 他根据谁来定位
当你获取这个元素的偏移量的时候, 他的参考父元素就是谁
一个元素的偏移量参考元素就是这个元素的 定位父级
1. offsetParent 属性
作用: 获取元素的偏移量参考父元素
语法: 元素.offsetParent
得到: 就是你这个元素获取偏移量的时候是根据谁来的
// 1. 获取元素
var span = document.querySelector(‘span’)
// 打印看一下 span 这个元素的偏移量参考父元素
console.log(span.offsetParent)
获取元素的偏移量
1. offsetLeft
语法: 元素.offsetLeft
得到: 元素相对于参考元素左侧的距离
2. offsetTop
语法: 元素.offsetTop
得到: 元素相对于参考元素上边的距离
// 0. 获取元素
var span = document.querySelector(‘span’)
// 1. 打印看一下元素的偏移量参考元素
console.log('参考元素 : ', span.offsetParent)
// 2. 打印看一下左边的距离
console.log('左边的距离 : ', span.offsetLeft)
// 3. 打印看一下上边的距离
console.log('上边的距离 : ', span.offsetTop)
获取元素尺寸
获取元素在 页面 上的 “占地面积”
display: none; 那么获取不到(消失不占位)
visibility: hidden; 那么可以获取到(消失占位)
opacity: 0; 那么可以获取到(不显示, 但是占位)
注意: 获取到的是没有单位的数字, 可以直接参与运算
1. offsetWidth 和 offsetHeight
获取到的是元素的 边框 + 内边距 + 内容 区域的尺寸
offsetWidth 是宽度
offsetHeight 是高度
不管盒子模型是什么状态, 拿到的都是 边框 + 内边距 + 内容 区域的尺寸
2. clientWidth 和 clientHeight
获取到的是元素的 内边距 + 内容 区域的尺寸
clientWidth 是宽度
clientHeight 是高度
不管盒子模型是什么状态, 拿到的都是 内边距 + 内容 区域的尺寸
// 0. 获取元素
var div = document.querySelector(‘div’)
// 1. offsetWidth 和 offsetHeight
console.log('元素的 offsetWidth 是 : ', div.offsetWidth)
console.log(‘元素的 offsetHeight 是 : ‘, div.offsetHeight)
console.log(’=’)
// 2. clientWidth 和 clientHeight
console.log('元素的 clientWidth 是 : ', div.clientWidth)
console.log('元素的 clientHeight 是 : ', div.clientHeight)
获取浏览器可视窗口大小
之前我们学过一组属性, innerWidth 和 innerHeight
它们获取到的是包含滚动条的尺寸
今天我们再学习一下获取窗口尺寸的另外的办法
获取到的是不包含滚动条的尺寸
其实你要是获取不包含滚动条的尺寸
就是在获取页面的 占地面积
1. document.documentElement.clientWidth
=> 页面的宽度(不包含滚动条)
2. document.documentElement.clientHeight
=> 页面的高度(不包含滚动条)
// 1. innerWidth 和 innerHeight
console.log('浏览器的 innerWidth 是 : ', window.innerWidth)
console.log('浏览器的 innerHeight 是 : ‘, window.innerHeight)
console.log(’=’)
// 2. clientWidth 和 clientHeight
console.log('浏览器不包含滚动条宽是 : ', document.documentElement.clientWidth)
console.log('浏览器不包含滚动条高是 : ', document.documentElement.clientHeight)