JS中DOM的基本操作之基本概念和获取元素

格巫沃
132 阅读2分钟

1.DOM的基本概念

  • DOM:文档对象模型,其实就是操作 html 中标签的一些能力

  • 比如:

    • 获取一个元素(标签)
    • 移除一个元素
    • 创建一个元素
    • 向页面添加一个元素
    • 给元素绑定一些事件
    • 获取元素的属性
    • 给元素添加一些css样式
    • ...

2.DOM的核心

  • DOM的核心 就是 document 对象;document 对象是 JS 内置的一个对象,里边存储着专门用来操作元素的各种方法
  • 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做 DOM对象(DOM节点)

3.DOM获取元素

3.1获取非常规元素

document.documentElement  ->  html标签
document.head             ->  head标签
document.body             ->  body标签

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

3.2 获取常规元素

这里先写一些标签,供下面的获取使用:

  <div id="box">我是id名为box的div标签</div>
  <div class="box_cla">我是class名为box_cla的div标签</div>
  <div class="box_cla">我是class名为box_cla的div标签1</div>
  <div class="box_cla">我是class名为box_cla的div标签2</div>
  <script>

3.2.1 通过ID名获取标签

  • 语法: document.getElementById('ID名')
    //获取到页面中ID为box的标签
    var box = document.getElementById('box') 
    console.log(box)

3.2.2 通过class名获取标签

  • 语法: document.getElementsByClassName('class名')
  • 注意:因为页面中可能会有多个元素的 class 相同,所以获取到的是一组元素
  • 获取到后,会把元素放在一个长得很像数组一样的数据结构内,但他并不是数组,我们管这种数据结构叫做 伪数组
  • 伪数组: 长得很像数组,也是通过索引排列的,但是没有数组的方法
    // 获取到页面中class为box_cla的标签
    var box_cla = document.getElementsByClassName('box_cla')
    console.log(box_cla)
    console.log(box_cla[0])
    console.log(box_cla[1])
    console.log(box_cla[2])

3.3.3 通过标签名获取

  • 语法: document.getElementsByTagName('标签名')
  • 注意:获取到的也是一个长得很像数组的数据结构,其实就是获取到了一个伪数组
  • 想要准确的获取到标签元素，我们需要通过索引来帮助我们拿到
    //获取到页面中标签名为div的标签
    var divs = document.getElementsByTagName('div')
    console.log(divs)

3.3.4 按照选择器的形式来获取元素

  1. querySelector,这个方法允许我们像写css的时候的选择器一样获取标签
    • 注意:这个方法只能获取到一个元素,就是满足条件的第一个元素
    • 语法: document.querySelector('选择器')
  2. querySelectorAll
    • 这个方法与querySelector 选择器类似,只不过会将所有满足条件的元素都获取到,也放在一个伪数组中
    • 注意:这个方法能获取到所有满足条件的元素
    • 语法: document.querySelectorAll('选择器')
    //按照选择器的形式获取标签querySelector
    var box2 = document.querySelector('.box_cla')
    var box3 = document.querySelector('div')
    console.log(box2)
    console.log(box3)

    //querySelectorAll
    var box4 = document.querySelectorAll('.box_cla')
    var box5 = document.querySelectorAll('div')
    console.log(box4)
    console.log(box5)
avatar
文章
阅读
粉丝