DOM对象,节点,获取元素的非行间样式,元素的偏移量等属性词

获取页面中的元素的方法
作用: 通过各种方式获取页面中的元素
以前我们说过, id 可以直接使用
这个方法只能通过 id 获取
今天学的就是使用各种方式
比如: id, 类名, 标签名, 选择器 的方式来获取元素
伪数组:
长得和数组差不多, 也是按照索引排列
也是有 length 属性, 也可以使用 for 循环来遍历
但是就是不能使用数组常用方法
1. 通过 id 获取元素的方法
语法: document.getElementById(‘你要获取的元素的 id’)
返回值: 是 dom 元素, 也叫做 dom 对象
如果页面上有对应 id 的元素, 那么就是这个元素
如果页面上没有对应 id 的元素, 那么就是 null
2. 通过类名获取元素的方法
语法: document.getElementsByClassName(‘你要获取的元素的类名’)
返回值: 是一个 伪数组, 伪数组里面包含着所有能获取到的元素
页面上有多少类名符合的, 那么这个伪数组里面就有多少个元素
页面上没有类名符合的, 那么就是一个空的伪数组
3. 通过标签名获取元素的方法
语法: document.getElementsByTagName(‘你要获取的元素的标签名’)
返回值: 是一个 伪数组, 伪数组里面包含着所有能获取到的元素
页面上有标签名符合的元素, 那么有多少, 这个伪数组里面就有多少
页面上没有标签名符合的元素, 那么就是一个空的伪数组
4. 通过选择器获取一个元素的方法
语法: document.querySelector(‘你要获取的元素的选择器’)
选择器 => 你 css 怎么捕获这个元素, 那么这里就怎么写
返回值: 满足选择器的第一个元素
如果页面上有满足选择器的元素, 那么返回第一个满足条件的元素
如果页面上没有满足选择器的元素, 那么就是 null
5. 通过选择器获取一组元素的方法
语法: document.querySelectorAll(‘你要获取的元素的选择器’)
返回值: 一个伪数组
如果页面上有满足选择器的元素, 有多少伪数组里面就有多少个
如果页面上没有满足选择器的元素, 那么就是空伪数组
// 1. 通过 id 获取元素
// var box = document.getElementById(‘box’)
// console.log(box)
// 2. 通过 类名 获取元素
// 获取页面中所有类名为 box 的元素
// var boxs = document.getElementsByClassName(‘box’)
// console.log(boxs)
// console.log(boxs[0])
// console.log(boxs[1])
// console.log(boxs[2])
// console.log(boxs[3])
// 3. 通过 标签名 获取元素
// 通过 div 这个标签名获取页面上的元素
// var divs = document.getElementsByTagName(‘div’)
// console.log(divs)
// 4. 通过 选择器 获取一个元素
// var div = document.querySelector(’.box:last-child’)
// console.log(div)
// 5. 通过 选择器 获取一组元素
// 获取页面上所有类名为 box 的元素
// var divs = document.querySelectorAll(’.box’)
// console.log(divs)
操作元素的属性
我们获取到的 dom 元素, 本身也是一个对象
其实就是操作这个 dom 元素的某一个成员内容
三个操作文本属性的方式
1. innerHTML
是一个读写的属性
读: 获取一个元素的所有后代元素内容, 包含 html 结构
你得到的内容是一个字符串, 不是 dom 元素了
语法: 元素.innerHTML
写: 设置这个元素的内容部分, 会完全覆盖式的写入
语法: 元素.innerHTML = ‘你要写的内容’
特点: 你写入的时候, 如果写入一个 html 格式的字符串, 他能解析出来
2. innerText
是一个读写的属性
读: 获取一个元素内所有的文本内容, 包含后代元素的文本内容
不包含 html 结构, 是一个字符串
语法: 元素.innerText
写: 设置这个元素的内容部分, 完全覆盖式的写入
语法: 元素.innerText = ‘你要写入的内容’
特点: 你写入的时候, 如果写入一个 html 格式的字符串, 他不会解析
3. value
是一个独写的属性, 专门用来和 表单元素 合作的
读: 获取一个标签元素的 value 属性的值
语法: 表单元素.value
写: 给一个表单元素设置 value 属性的值, 完全覆盖式的写入
语法: 表单元素.value = ‘你要写入的内容’
// 0. 获取元素
// 你获取到的是一个 包含 p 标签和 span 标签的 div
var div = document.querySelector(’#box’)
var inp = document.querySelector(‘input’)
// 1. innerHTML
// console.log(div.innerHTML) // 获取这个 div 标签里面的所有内容, 以字符串的形式
// 使用 innerHTML 属性来写入内容
// 不是把内容写在页面上
// 是把内容写在了 div 这个元素里面
// 因为 div 这个元素在 页面上, 所以这些内容就在页面上了
// div.innerHTML = ‘我要写入一些内容’
// 2. innerText
// console.log(div.innerText) // 获取这个 div 标签里面的所有文本, 以字符串的形式
// 使用 innerText 属性来写入内容
// div.innerText = ‘我是新写入的内容’
// 3. value
console.log(inp.value)
// 使用 value 属性来给表单元素写入一些内容
inp.value = ‘我是新写入的内容’
console.log(inp.value)
在页面上出现一个倒计时
1. 获取两个时间节点之间的时间差
1-1. 准备两个时间节点
1-2. 使用 timeDiff 方法获取两个时间节点之间的时间差
2. 写一个定时器, 每间隔一秒钟执行一次
2-1. 书写一个间隔定时器 setInterval()
2-2. 哪些代码写在定时器里面
每间隔一秒钟获取一次当前时间
每间隔一秒钟计算一次时间差
每间隔一秒钟写入页面一次
3. 把得到的时间差写入页面里面
3-1. 组装一个 html 格式的字符串
1天1小时1分钟1秒钟
3-2. 获取页面中现在存在的 p 标签
3-3. 把我组装好的字符串使用 innerHTML 属性写入到 p 标签内
// 1-1. 准备两个时间节点
var time1 = new Date(‘2020-5-23 12:50:33’)
// var time2 = new Date()
// 1-2. 获取时间差
// var res = timeDiff(time1, time2)
// console.log(res)
// 3-2. 获取 p 标签
var p = document.querySelector(‘div p’)
// 2-1. 书写一个定时器
setInterval(function () {
// 这里的代码才会每间隔一秒执行一次
// 2-2. 获取时间差
var time2 = new Date()
var res = timeDiff(time1, time2)
// 3. 写入页面里面
// 3-1. 每间隔一秒都要组装一次最新的字符串
var str = ‘’ + res.day + ‘天’ + res.hours + ‘小时’ + res.minutes + ‘分钟’ + res.seconds + ‘秒钟’
// 3-2. 获取 p 元素, 因为不需要每间隔一秒都获取一次
// 所以这段代码写在定时器外面
// 3-3. 因为每间隔一秒都要覆盖式的写入一次
// 要在这里把我们准备好的 str 写入 p 标签内容
p.innerHTML = str
}, 1000)
操作元素属性 - 原生属性
原生属性: 元素自己本身就带有的属性
每个元素都有的 id
img 标签有的 src 属性
input 标签有的 type 属性
table 标签有的 border 属性
特别说明: class 属性不行
原生属性直接操作就可以了
读: 元素.你要读取的属性名
写: 元素.你要写入的属性名 = ‘你要写入的值’
// 操作原生属性 id 属性
// 获取元素
// var div = document.querySelector(‘div’)
// // 设置 id 属性的值
// console.log(div.id) // 先获取一下看看
// div.id = ‘box’ // 把 div 元素的 id 名称设置为 box
// 操作原生属性 src 属性
// 获取元素
// var img = document.querySelector(‘img’)
// // 设置 src 属性
// console.log(img.src) // 先获取一下看看
// // 给 img 标签的 src 属性换一个地址
// img.src = ‘=1906469856,4113625838&fm=26&gp=0.jpg’
// 操作原生属性 type 属性
// 获取元素
// inp 这个变量代表着 input 这个元素
var inp = document.querySelector(‘input’)
// 设置 type 属性
console.log(inp.type) // 先打印看一下
inp.type = ‘password’ // 把这个 input 元素的 type 属性设置为 password
操作元素属性 - 自定义属性
自定义属性: 元素本身不带有的属性
是我们自己定义的属性
我们想在元素身上写上这些属性
1. setAttribute()
作用: 给元素设置一个自定义属性
语法: 元素.setAttribue(你要设置的属性名, 你要设置的属性值)
设置的时候, 不管你写的是什么数据类型, 到了元素身上的时候
都会被自动转换为 string 类型
2. getAttribute()
作用: 获取元素的属性(可以获取原生属性, 也可以获取自定义属性)
语法: 元素.getAttribute(你要获取的属性名)
返回值: 这个属性的值
获取到的所有数据都是 string 数据类型
3. removeAttribute()
作用: 删除元素的属性
语法: 元素.removeAttribute(你要删除的属性名)
// 0. 获取元素
var div = document.querySelector(‘div’)
// 1. 给元素设置自定义属性
// 给 div 这个元素身上设置了一个叫做 hello 的属性
// 值就是 world
div.setAttribute(‘hello’, ‘world’)
div.setAttribute(‘num’, 10) // 设置的时候是赋值了一个 number 数据类型
// 2. 获取元素的属性
var res = div.getAttribute(‘hello’)
console.log(res)
var res2 = div.getAttribute(‘num’) // 获取元素身上叫做 num 的属性的值
console.log(res2)
// 3. 删除元素属性
div.removeAttribute(‘num’) // 删除元素身上的 num 这个属性
div.removeAttribute(‘hello’) // 删除元素身上的 hello 这个属性
div.removeAttribute(‘class’) // 删除元素身上的 class 这个属性
操作元素属性 - 类名
专门用来操作元素类名的一个属性
因为 class 在 JS 里面有特殊含义
所以我们操作类名使用 className 这个属性
1. className
是一个读写的属性
读: 获取元素的类名
有多少类名获取多少个类名, 以字符串的形式
语法: 元素.className
写: 设置元素的类名
完全覆盖式的写入
语法: 元素.className = ‘你要设置的类名’
我想追加一个类名
就是在原有的基础上添加一个类名
可以使用 += 符号操作, 并且在前面多添加一个 空格, 和之前的类名隔开
// 0. 获取元素
var div = document.querySelector(‘div’)
// 1. 获取元素的类名
var cn = div.className
console.log(cn) // 以字符串的形式获取到了元素 class 属性的所有值
// 2. 设置元素的类名
// div.className = ‘box1 box2’ // 给元素设置两个类名, 分别是 box1 和 box2
// 3. 追加一个类名
// 等价于 div.className = div.className + ‘box1’
div.className += ’ box1’ // 是不是追加了一个类名 ?
// 你原先的类名是 ‘a b c’ + ‘box1’ === ‘a b cbox1’
// 使用的时候要多加一个空格, 把他们隔开
操作元素属性 - 样式
操作元素的 css 样式
1. style 属性
作用: 获取到元素所有的可设置样式, 值是一个对象
语法: 元素.style
内容: 是一个对象, 里面有所有的元素可设置样式
但是有值只有 行内样式
你想读取元素的样式
直接从对象里面获取就可以了
你获取到的样式值, 是带有单位的
能拿到值的只有行内样式, 非行内样式设置的值 style 拿不到
你想设置元素的样式
直接给对象里面的某个成员修改值就可以了
JS 设置样式只能设置行内样式
不能设置非行内样式
注意: 当你要操作一个带有 中划线(-) 的样式的时候
比如: background-color, border-top, margin-top, …
你操作的时候要转换成写 驼峰 的形式
background-color => backgroundColor
border-top => borderTop
margin-top => marginTop
// 0. 获取元素
var div = document.querySelector(‘div’)
// 1. 获取元素的 style
var res = div.style
console.log(res)
// 2. 获取某一个样式
var width = div.style.width
console.log(width)
var pt = div.style.paddingTop
console.log(pt)
// 3. 设置某一个样式
div.style.height = ‘300px’
div.style.borderTop = ‘10px solid #333’
div 是一个元素节点
div 里面有多少个 子节点 ? 7 个
1. 文本节点: 一个换行 + 四个空格
2. 元素节点:

一号

DOM对象,节点,获取元素的非行间样式,元素的偏移量等属性词

获取页面中的元素的方法
作用: 通过各种方式获取页面中的元素
以前我们说过, id 可以直接使用
这个方法只能通过 id 获取
今天学的就是使用各种方式
比如: id, 类名, 标签名, 选择器 的方式来获取元素
伪数组:
长得和数组差不多, 也是按照索引排列
也是有 length 属性, 也可以使用 for 循环来遍历
但是就是不能使用数组常用方法
1. 通过 id 获取元素的方法
语法: document.getElementById(‘你要获取的元素的 id’)
返回值: 是 dom 元素, 也叫做 dom 对象
如果页面上有对应 id 的元素, 那么就是这个元素
如果页面上没有对应 id 的元素, 那么就是 null
2. 通过类名获取元素的方法
语法: document.getElementsByClassName(‘你要获取的元素的类名’)
返回值: 是一个 伪数组, 伪数组里面包含着所有能获取到的元素
页面上有多少类名符合的, 那么这个伪数组里面就有多少个元素
页面上没有类名符合的, 那么就是一个空的伪数组
3. 通过标签名获取元素的方法
语法: document.getElementsByTagName(‘你要获取的元素的标签名’)
返回值: 是一个 伪数组, 伪数组里面包含着所有能获取到的元素
页面上有标签名符合的元素, 那么有多少, 这个伪数组里面就有多少
页面上没有标签名符合的元素, 那么就是一个空的伪数组
4. 通过选择器获取一个元素的方法
语法: document.querySelector(‘你要获取的元素的选择器’)
选择器 => 你 css 怎么捕获这个元素, 那么这里就怎么写
返回值: 满足选择器的第一个元素
如果页面上有满足选择器的元素, 那么返回第一个满足条件的元素
如果页面上没有满足选择器的元素, 那么就是 null
5. 通过选择器获取一组元素的方法
语法: document.querySelectorAll(‘你要获取的元素的选择器’)
返回值: 一个伪数组
如果页面上有满足选择器的元素, 有多少伪数组里面就有多少个
如果页面上没有满足选择器的元素, 那么就是空伪数组
// 1. 通过 id 获取元素
// var box = document.getElementById(‘box’)
// console.log(box)
// 2. 通过 类名 获取元素
// 获取页面中所有类名为 box 的元素
// var boxs = document.getElementsByClassName(‘box’)
// console.log(boxs)
// console.log(boxs[0])
// console.log(boxs[1])
// console.log(boxs[2])
// console.log(boxs[3])
// 3. 通过 标签名 获取元素
// 通过 div 这个标签名获取页面上的元素
// var divs = document.getElementsByTagName(‘div’)
// console.log(divs)
// 4. 通过 选择器 获取一个元素
// var div = document.querySelector(’.box:last-child’)
// console.log(div)
// 5. 通过 选择器 获取一组元素
// 获取页面上所有类名为 box 的元素
// var divs = document.querySelectorAll(’.box’)
// console.log(divs)
操作元素的属性
我们获取到的 dom 元素, 本身也是一个对象
其实就是操作这个 dom 元素的某一个成员内容
三个操作文本属性的方式
1. innerHTML
是一个读写的属性
读: 获取一个元素的所有后代元素内容, 包含 html 结构
你得到的内容是一个字符串, 不是 dom 元素了
语法: 元素.innerHTML
写: 设置这个元素的内容部分, 会完全覆盖式的写入
语法: 元素.innerHTML = ‘你要写的内容’
特点: 你写入的时候, 如果写入一个 html 格式的字符串, 他能解析出来
2. innerText
是一个读写的属性
读: 获取一个元素内所有的文本内容, 包含后代元素的文本内容
不包含 html 结构, 是一个字符串
语法: 元素.innerText
写: 设置这个元素的内容部分, 完全覆盖式的写入
语法: 元素.innerText = ‘你要写入的内容’
特点: 你写入的时候, 如果写入一个 html 格式的字符串, 他不会解析
3. value
是一个独写的属性, 专门用来和 表单元素 合作的
读: 获取一个标签元素的 value 属性的值
语法: 表单元素.value
写: 给一个表单元素设置 value 属性的值, 完全覆盖式的写入
语法: 表单元素.value = ‘你要写入的内容’
// 0. 获取元素
// 你获取到的是一个 包含 p 标签和 span 标签的 div
var div = document.querySelector(’#box’)
var inp = document.querySelector(‘input’)
// 1. innerHTML
// console.log(div.innerHTML) // 获取这个 div 标签里面的所有内容, 以字符串的形式
// 使用 innerHTML 属性来写入内容
// 不是把内容写在页面上
// 是把内容写在了 div 这个元素里面
// 因为 div 这个元素在 页面上, 所以这些内容就在页面上了
// div.innerHTML = ‘我要写入一些内容’
// 2. innerText
// console.log(div.innerText) // 获取这个 div 标签里面的所有文本, 以字符串的形式
// 使用 innerText 属性来写入内容
// div.innerText = ‘我是新写入的内容’
// 3. value
console.log(inp.value)
// 使用 value 属性来给表单元素写入一些内容
inp.value = ‘我是新写入的内容’
console.log(inp.value)
在页面上出现一个倒计时
1. 获取两个时间节点之间的时间差
1-1. 准备两个时间节点
1-2. 使用 timeDiff 方法获取两个时间节点之间的时间差
2. 写一个定时器, 每间隔一秒钟执行一次
2-1. 书写一个间隔定时器 setInterval()
2-2. 哪些代码写在定时器里面
每间隔一秒钟获取一次当前时间
每间隔一秒钟计算一次时间差
每间隔一秒钟写入页面一次
3. 把得到的时间差写入页面里面
3-1. 组装一个 html 格式的字符串
1天1小时1分钟1秒钟
3-2. 获取页面中现在存在的 p 标签
3-3. 把我组装好的字符串使用 innerHTML 属性写入到 p 标签内
// 1-1. 准备两个时间节点
var time1 = new Date(‘2020-5-23 12:50:33’)
// var time2 = new Date()
// 1-2. 获取时间差
// var res = timeDiff(time1, time2)
// console.log(res)
// 3-2. 获取 p 标签
var p = document.querySelector(‘div p’)
// 2-1. 书写一个定时器
setInterval(function () {
// 这里的代码才会每间隔一秒执行一次
// 2-2. 获取时间差
var time2 = new Date()
var res = timeDiff(time1, time2)
// 3. 写入页面里面
// 3-1. 每间隔一秒都要组装一次最新的字符串
var str = ‘’ + res.day + ‘天’ + res.hours + ‘小时’ + res.minutes + ‘分钟’ + res.seconds + ‘秒钟’
// 3-2. 获取 p 元素, 因为不需要每间隔一秒都获取一次
// 所以这段代码写在定时器外面
// 3-3. 因为每间隔一秒都要覆盖式的写入一次
// 要在这里把我们准备好的 str 写入 p 标签内容
p.innerHTML = str
}, 1000)
操作元素属性 - 原生属性
原生属性: 元素自己本身就带有的属性
每个元素都有的 id
img 标签有的 src 属性
input 标签有的 type 属性
table 标签有的 border 属性
特别说明: class 属性不行
原生属性直接操作就可以了
读: 元素.你要读取的属性名
写: 元素.你要写入的属性名 = ‘你要写入的值’
// 操作原生属性 id 属性
// 获取元素
// var div = document.querySelector(‘div’)
// // 设置 id 属性的值
// console.log(div.id) // 先获取一下看看
// div.id = ‘box’ // 把 div 元素的 id 名称设置为 box
// 操作原生属性 src 属性
// 获取元素
// var img = document.querySelector(‘img’)
// // 设置 src 属性
// console.log(img.src) // 先获取一下看看
// // 给 img 标签的 src 属性换一个地址
// img.src = ‘=1906469856,4113625838&fm=26&gp=0.jpg’
// 操作原生属性 type 属性
// 获取元素
// inp 这个变量代表着 input 这个元素
var inp = document.querySelector(‘input’)
// 设置 type 属性
console.log(inp.type) // 先打印看一下
inp.type = ‘password’ // 把这个 input 元素的 type 属性设置为 password
操作元素属性 - 自定义属性
自定义属性: 元素本身不带有的属性
是我们自己定义的属性
我们想在元素身上写上这些属性
1. setAttribute()
作用: 给元素设置一个自定义属性
语法: 元素.setAttribue(你要设置的属性名, 你要设置的属性值)
设置的时候, 不管你写的是什么数据类型, 到了元素身上的时候
都会被自动转换为 string 类型
2. getAttribute()
作用: 获取元素的属性(可以获取原生属性, 也可以获取自定义属性)
语法: 元素.getAttribute(你要获取的属性名)
返回值: 这个属性的值
获取到的所有数据都是 string 数据类型
3. removeAttribute()
作用: 删除元素的属性
语法: 元素.removeAttribute(你要删除的属性名)
// 0. 获取元素
var div = document.querySelector(‘div’)
// 1. 给元素设置自定义属性
// 给 div 这个元素身上设置了一个叫做 hello 的属性
// 值就是 world
div.setAttribute(‘hello’, ‘world’)
div.setAttribute(‘num’, 10) // 设置的时候是赋值了一个 number 数据类型
// 2. 获取元素的属性
var res = div.getAttribute(‘hello’)
console.log(res)
var res2 = div.getAttribute(‘num’) // 获取元素身上叫做 num 的属性的值
console.log(res2)
// 3. 删除元素属性
div.removeAttribute(‘num’) // 删除元素身上的 num 这个属性
div.removeAttribute(‘hello’) // 删除元素身上的 hello 这个属性
div.removeAttribute(‘class’) // 删除元素身上的 class 这个属性
操作元素属性 - 类名
专门用来操作元素类名的一个属性
因为 class 在 JS 里面有特殊含义
所以我们操作类名使用 className 这个属性
1. className
是一个读写的属性
读: 获取元素的类名
有多少类名获取多少个类名, 以字符串的形式
语法: 元素.className
写: 设置元素的类名
完全覆盖式的写入
语法: 元素.className = ‘你要设置的类名’
我想追加一个类名
就是在原有的基础上添加一个类名
可以使用 += 符号操作, 并且在前面多添加一个 空格, 和之前的类名隔开
// 0. 获取元素
var div = document.querySelector(‘div’)
// 1. 获取元素的类名
var cn = div.className
console.log(cn) // 以字符串的形式获取到了元素 class 属性的所有值
// 2. 设置元素的类名
// div.className = ‘box1 box2’ // 给元素设置两个类名, 分别是 box1 和 box2
// 3. 追加一个类名
// 等价于 div.className = div.className + ‘box1’
div.className += ’ box1’ // 是不是追加了一个类名 ?
// 你原先的类名是 ‘a b c’ + ‘box1’ === ‘a b cbox1’
// 使用的时候要多加一个空格, 把他们隔开
操作元素属性 - 样式
操作元素的 css 样式
1. style 属性
作用: 获取到元素所有的可设置样式, 值是一个对象
语法: 元素.style
内容: 是一个对象, 里面有所有的元素可设置样式
但是有值只有 行内样式
你想读取元素的样式
直接从对象里面获取就可以了
你获取到的样式值, 是带有单位的
能拿到值的只有行内样式, 非行内样式设置的值 style 拿不到
你想设置元素的样式
直接给对象里面的某个成员修改值就可以了
JS 设置样式只能设置行内样式
不能设置非行内样式
注意: 当你要操作一个带有 中划线(-) 的样式的时候
比如: background-color, border-top, margin-top, …
你操作的时候要转换成写 驼峰 的形式
background-color => backgroundColor
border-top => borderTop
margin-top => marginTop
// 0. 获取元素
var div = document.querySelector(‘div’)
// 1. 获取元素的 style
var res = div.style
console.log(res)
// 2. 获取某一个样式
var width = div.style.width
console.log(width)
var pt = div.style.paddingTop
console.log(pt)
// 3. 设置某一个样式
div.style.height = ‘300px’
div.style.borderTop = ‘10px solid #333’
div 是一个元素节点
div 里面有多少个 子节点 ? 7 个
1. 文本节点: 一个换行 + 四个空格
2. 元素节点:

一号