DOM

）# 用 JS 去操作浏览器 和 页面中的 HTML 元素（DOM）

1. DOM的基本概念

文档对象模型，其实就是操作 html 中标签的一些能力 比如:

• 获取一个元素(标签)
• 移除一个元素
• 创建一个元素
• 向页面添加一个元素
• 给元素绑定一些事件
• 获取元素的属性
• 给元素添加一些css样式
• 。。。 DOM 的核心 就是 document 对象

document 对象是 JS 内置的一个对象, 里边存储着专门用来操作元素的各种方法

DOM: 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做 DOM对象(DOM节点)

2. 获取元素

1. 获取非常规元素

• document.documentElement
• document.head
• document.body

// 1. html 标签
console.log(document.documentElement)
// 2. head 标签
console.log(document.head)
// 3. body 标签
console.log(document.body)

2. 获取常规元素

• 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>


// 2.1 获取到页面中 ID 为 box 的标签
var box = document.getElementById('box')
// console.log(box)  //<div id="box">我是 ID 名为 box 的 div 标签</div>

// 2.2 获取到页面中 class 名为 box_cla 的标签
var box_cla = document.getElementsByClassName('box_cla')
console.log(box_cla) //[div.box_cla,div.box_cla,div.box_cla]
// console.log(box_cla[0])
// console.log(box_cla[1])
// console.log(box_cla[2])

// 2.3 获取到页面中 标签名为 div 的标签
var divs = document.getElementsByTagName('div')
console.log(divs)
//[div#box, div.box_cla, div