document 对象是 JS 内置的一个对象, 里边存储着专门用来
操作元素的各种方法
DOM: 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做
DOM对象(DOM节点)
2. 获取元素
获取非常规元素
document.documentElement
document.head
document.body
console.log(document.documentElement)
console.log(document.head)
console.log(document.body)
获取常规元素
2.1 通过 ID 名获取标签
语法: document.getElementById('ID名')
2.2 通过 class 名获取标签
语法: document.getElementsByClassName('class名')
注意: 因为页面中可能会有多个元素的 class 相同, 所以获取到的是一组元素,获取到后会把元素放在一个长得很像数组一样的 数据结构内, 但它并不是数组,我们管这种数据结构叫做 伪数组
伪数组: 长得很像数组, 也是通过索引排列, 但是没有数组的方法
2.3 通过标签名获取
语法: document.getElementsByTagName('标签名')
注意: 获取到的也是一个长得很像数组一样的数据结构, 其实就是获取到了一个伪数组,想要准确的获取到标签元素, 我们需要通过索引来帮助我们拿到
2.4 按照选择器的形式来获取元素
2.4.1 querySelector 这个方法允许我们像写 css 的时候的选择器一样获取标签
注意: 这个方法只能获取到一个元素, 就是满足条件的第一个元素
语法: document.querySelector('选择器')
2.4.2 querySelectorAll, 该方法与 querySelector 选择器类似, 只不过会将所有满足条件的元素都获取到,也是放在一个伪数组内
语法: document.querySelectorAll('选择器')
<div id="box">我是 ID 名为 box 的 div 标签</div>
<div class="box_cla">我是 class 为 box_cla 的 div 标签1</div>
<div class="box_cla">我是 class 为 box_cla 的 div 标签2</div>
<div class="box_cla">我是 class 为 box_cla 的 div 标签3</div>
var box = document.getElementById('box')
var box_cla = document.getElementsByClassName('box_cla')
console.log(box_cla)
var divs = document.getElementsByTagName('div')
console.log(divs)
var box2 = document.querySelector('.box_cla')
console.log(box2)
var box3 = document.querySelector('div')
console.log(box3)
var box4 = document.querySelectorAll('.box_cla')
var box5 = document.querySelectorAll('div')
console.log(box4)
console.log(box5)
3. 操作属性
我们获取到元素以后, 可以直接操作 DOM 的属性, 然后直接把效果展示在页面
元素.innerHTML
获取元素内部的 HTML 结构
我们也可以直接给这个属性重新赋值, 达到修改页面的效果
元素.innerText
获取元素内部的文本 (只能获取到文本, 获取不到 html 标签)
我们也可以直接给这个属性重新赋值, 达到修改页面的效果
4. 元素属性
获取元素的某些属性
语法: 元素.getAttribute('要查询的属性名')
返回值: 查询到属性时返回对应的属性值, 没有查询到时直接返回 null
修改元素的某些属性
语法: 元素.setAttribute('对应的属性名', '对应的属性值')
注意: 如果元素没有对应的属性名, 那么相当于是新增一个属性
删除元素的某些属性
语法: 元素.removeAttribute('要删除的属性名')
<div class="box" a="QF001"></div>
var oDiv =document.getElementsByClassName('box')[0]
console.log(oDiv.getAttribute('a'))
console.log(oDiv.getAttribute('class'))
console.log(oDiv.getAttribute('b'))
oDiv.setAttribute('a', 'QF999')
oDiv.setAttribute('b', 'qwer')
oDiv.removeAttribute('class')
5. h5 自定义属性
data- 表示该属性是一个自定义属性
data- 后边的内容才是属性名, 当前案例中属性名为a, 不是 data-a
= 后边的内容是属性值
- 每一个 元素/DOM节点 天生自带一个属性, 叫做 dataset, 是一个类似对象的数据结构
<div data-a="100"></div>
var oDiv = document.querySelector('div')
console.log(oDiv.dataset.a)
oDiv.dataset.age = 18
oDiv.dataset.a = 'QF666'
delete oDiv.dataset.a
6. 获取元素样式
语法: 元素.style.某个属性
我们也可以给这个语法重新赋值, 达到修改元素样式的效果 (修改的是行内的样式)
这种语法获取到的元素样式, 只能获取到行内样式
获取非行内样式
语法: window.getComputedStyle(元素).要查询的css属性
注意: 这种方式获取到的属性 是只读的
只读: 能获取到, 但是不允许修改
<style>
.box {
width: 100px;
height: 100px;
</style>
<div class="box" style="background-color: red;"></div>
var oDiv = document.querySelector('.box')
console.log(oDiv.style.width)
console.log(oDiv.style.height)
console.log(oDiv.style['background-color'])
console.log(oDiv.style.backgroundColor)
oDiv.style.width = 666 + 'px'
oDiv.style.backgroundColor = 'red'
console.log(window.getComputedStyle(oDiv).width)
console.log(window.getComputedStyle(oDiv).backgroundColor)
7. className专门用来操作元素的 类名
语法: 元素.className
我们也可以给他重新赋值, 来达到修改元素的类名
<div class="box" style="background-color: red;"></div>
oDiv.className = 'new_box'
console.log(oDiv.className)
元素.classList
var oDiv = document.querySelector('.box')
console.log(oDiv.classList)
oDiv.classList.add('qwer')
oDiv.classList.remove('new_box')
8. DOM 节点
元素节点(标签)
通过 getElementBy... 获取到的都是元素节点
文本节点(标签内的文字)
通过 getAttribute 获取到的都是属性节点
属性节点(标签上的属性)
通过 getAttribute
9. 获取子节点
获取某一节点下 所有的 子一级 节点, 获取到的是一个伪数组
语法: 元素.childNodes
获取某一节点下 所有的 子一节 元素节点 获取到的是一个伪数组
语法: 元素.children
获取某一节点下子一级的 第一个节点
语法: 元素.firstChild
获取某一节点下子一级的 最`一个节点
语法: 元素.lastChild
获取某一节点下子一级的 第一个元素节点
语法: 元素.firstElementChild
获取某一节点下子一级的 最后一个元素节点
语法: 元素.lastElementChild
<p>你好</p>
<span>测试文本</span>
<h1>JS 是世界上最优美的语言</h1>
var oDiv = document.querySelector('div')
console.log(oDiv.childNodes)
* 拿到的是一个伪数组, 里边有 7 个节点
* [0]: text 从 <div> 一直到 <p> 中间有一个换行和一堆空格 这是一个文本节点
* [1]: p 这个就是 p 标签, 他是第二个节点, 这是一个 元素节点
* [2]: text 从 </p> 一直到 <span> 中间有一个换行和一堆空格 这是一个文本节点
* ....
console.log(oDiv.children)
console.log(oDiv.firstChild)
console.log(oDiv.lastChild)
console.log(oDiv.firstElementChild)
console.log(oDiv.lastElementChild)
10. 获取兄弟节点
获取对应的 下一个兄弟节点
语法: 元素.nextSibling
获取对应的 上一个兄弟节点
语法: 元素.previousSibling
获取对应的 下一个兄弟元素节点
语法: 元素.nextElementSibling
获取对应的 上一个兄弟元素节点
语法: 元素.previousElementSibling
<p>你好</p>
<span>测试文本</span>
<h1>JS 是世界上最优美的语言</h1>
var oSpan = document.querySelector('span')
console.log(oSpan.nextSibling)
console.log(oSpan.previousSibling)
console.log(oSpan.nextElementSibling)
console.log(oSpan.previousElem
entSibling)
11. 获取父节点与属性节点
语法: 元素.parentNode
获取元素的所有属性节点
语法: 元素.attributes
<p>你好</p>
<span>测试文本</span>
<h1 id="h1_box" class="h1_box_cla" test="QF001" num="100">JS 是世界上最优美的语言</h1>
var oH = document.querySelector('h1')
console.log(oH.parentNode)
console.log(oH.attributes)
console.log(oH.attributes[0])
12. 节点属性
nodeType 节点类型
节点中的一个属性 nodeType 能够区分当前节点是什么类型
1 -> 元素节点
2 -> 属性节点
3 -> 文本节点
nodeName 节点名称
元素节点 -> 大写的标签名 (LI / UL / DIV)
属性节点 -> text (属性名)
文本节点 -> #text
nodeValue 节点的值
元素节点 -> 没有 nodeValue 也就会输出 null
属性节点 -> 对应的属性值
文本节点 -> 对应的文本内容
<ul text="我是 UL 的一个属性">
<li>你好</li>
var oUl = document.querySelector('ul')
var eleNode = oUl.firstElementChild
var attrNode = oUl.attributes[0]
var textNode = oUl.firstChild
console.log('元素节点: ', eleNode.nodeType)
console.log('属性节点: ', attrNode.nodeType)
console.log('文本节点: ', textNode.nodeType)
