DOM对象

概念：

浏览器根据html标签生成的 JS对象

• 所有的标签属性都可以在这个对象上面找到
• 修改这个对象的属性会自动映射到标签身上

DOM的核心思想

把网页内容当做对象来处理

获取DOM对象

根据CSS选择器来获取DOM元素

获取单个元素

语法: document.querySelector('css选择器')

参数:

? 包含一个或多个有效的CSS选择器 字符串

返回值：

? CSS选择器匹配的第一个元素,一个 HTMLElement对象。

? 如果没有匹配到，则返回null。

  
123
  
abc
  
段落
  

    
1
    
2
    
3
    
4
  
  

获取多个元素

语法 ：document.querySelectorAll('css选择器')

参数:

? 包含一个或多个有效的CSS选择器 字符串

返回值：

? CSS选择器匹配的NodeList 对象集合 是个伪数组

伪数组 有下标.legth属性 但不可以使用数组方法：增加/删除/修改

  
1
  
2
  
3
  
4
  

    
1
    
2
    
3
    
4
  
  
hellow
  

注意

1.哪怕页面只有一个元素，返回的也是伪数组

2.灵活性

  
标题
  

    
1
    
2
    
3
    
5
  
  
p标签
  
1
  
2
  
3
  
4

  

获取元素的其他方法

1. id获取元素

   语法：document.getElementById('id值')

   返回值：一个元素对象

2. 标签名获取元素

   语法：getElementsByTagName('标签名')

   返回值：标签名匹配的NodeList 对象集合 是个伪数组

3. 类名获取元素

   语法：document.getElementsByClassName('类名')

   返回值：与类名匹配的NodeList 对象集合 是个伪数组

4. 获得body

   document.body

5. 获得html

   document.documentElement

  
123
  
345
  
标签
  

目前常用：

document.querySelector('css选择器')

document.querySelectorAll('css选择器')