一、DOM-获取元素

目录

获取DOM对象

一、根据css选择器来获取DOM

二、其他获取DOM元素的方法

设置/修改DOM元素内容

设置/修改DOM元素属性

定时器-间歇函数

---

DOM（文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API；即DOM是浏览器提供的一套专门用来操作网页内容的功能。

获取DOM对象

一、根据css选择器来获取DOM

1. 选择匹配的第一个元素

   语法：

     document.querySelector('css选择器')

   参数：包含一个或多个有效的css选择器字符串

   返回值：css选择器匹配到的第一个元素，一个HTMLElement对象，如果没有匹配到，则返回null

2. 选择匹配的多个元素

   语法：

     document.querySelectorAll('css选择器')

   参数：包含一个或多个有效的css选择器字符串

   返回值：css选择器匹配的NodeList对象集合

二、其他获取DOM元素的方法

​ 语法：

          // 根据id获取一个元素
          document.getElementById('css选择器')
          // 根据标签获取一类元素 获取页面所有div
          document.getElementsByTagName('div')
          // 根据类名获取元素 获取页面所有类名为w的
          document.getElementsByClassName('w')  

设置/修改DOM元素内容

1. innerText属性（文本内包含的标签不能被解析）

   语法：

     对象名.innerText = ''

2. innerHTML属性（文本内包含的标签可以被解析）

   语法：

     对象名.innerHTML = ''

设置/修改DOM元素属性

1. 修改/设置元素常用属性

   常见属性：href，title，src

   语法：

     对象名.属性 = '值'

2. 修改/设置元素样式属性

   • 通过style属性操作css

     语法：

       对象名.style.样式属性 = '值'

   • 操作类名className操作css

     语法：

       //active 是一个css类名
       对象名.className = 'active'

     注：直接覆盖掉 之间的css类中所写的样式，改为新换的css类中的样式

   • 通过classList操作类控制css

     语法：

       //追加一个类
       对象名.classList.add('类名')
       //删除一个类
       对象名.classList.remove('类名')
       //切换一个类（原本有这个类则将其删掉，若原本没有这个类则增加）
       对象名.classList.toggle('类名')
       //检测是否有该类
       对象名.classlist.contains('类名')//有则返回true否则返回false

     这里('类名')，类名前面一定不要加点

3. 修改/设置表单元素属性

   普通属性

   ​ 语法：

     对象名.属性名 = '新值'
     //对象名.value = '用户名'
     //对象名.type = 'password'

   其他属性(disable:按钮的禁/启用；checked：选项框的勾选；selected：下拉菜单)

   ​ 语法：

     对象名.属性名 = true/false

定时器-间歇函数

每间隔一段时间就调用这个函数，间隔时间的单位是毫秒

1. 开启定时器

   语法：

     setInterval(函数, 间隔时间)
     //eg:
     //写法一：
     function fun(){
         console.log('开启定时器')
     }
     setInterval(fun, 1000)
     //写法二：
     setInterval(function (){
         console.log('开启定时器')
     },1000)

2. 关闭定时器

   语法：

     let 变量名 = setInterval(函数, 间隔时间)
     clearInterval(变量名)

   ​