DOM的基本概念

DOM:文档对象模型

操作html中标签的一些能力

DOM 的核心就是 document 对象

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

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

获取元素

1.获取非常规元素

语法

   document.documentElement  //获取html标签
   document.head   //获取head标签
   document.body   //获取body标签
复制代码

2.获取常规元素

1.通过id名获取标签

语法

   document.getElementById('id名')
   var a = document.getElementById('box')///获取id名为box的标签
复制代码

2.通过class名获取标签

语法

document.getElementsByClassName('class名')
复制代码

注意

因为页中可能会有多个元素的class相同所以获取到的是一组元素
获取到后会把元素放在一个很像数组一样的结构内,但它不是数组,我们管它叫做'伪数组'
伪数组:长得像数组,也是通过索引排列,但没有数组的方法.
获取准确的值要通过下标来完成

var a = document.getElementsByClassName('box')//获取页面中所有以box为class名的元素
复制代码

3.通过标签名获取

语法

document.getElementsByTagName('标签')
复制代码

注意

获取的也是伪数组,想获取准确的标签要通过索引来获取

var a =document.getElementsByTagName('div') //获取页面中所有的div标签
复制代码

4.按照选择器的形式获取

1.querySelector

这个方法允许我们像写css的时候一样获取标签

注意

这个方法只能获取一个元素,就是满足条件的第一个元素

语法

  document.querySelector('选择器')
  var a = document.querySelector('.box')//获取页面中第一个以box为class名的元素
  var b =document.querySelector('div')//获取页面中的第一个div标签
复制代码

2.querySelectAll

该方法与querySelect相同,只不过它会获取全部满足条件的元素,并以伪数组的形式返回

语法

  document.querySelectAll('选择器')
  var a = document.querySelectAll('.box')//获取页面中所有以box为class名的元素
  var b = document.querySelectAll('div')//获取页面中所有的div

DOM的基本意义