webapi（一）初识DOM&定时器

初识

作用

使用js去操作html和浏览器

分类

DOM：文档对象模型
BOM：浏览器对象模型

DOM（文档对象模型）

用来呈现，以及与任意 HTML 或 XML文档交互的

作用：

实现网页特效
实现用户交互

DOM树

含义: 将HTML文档以树状结构直观地表现出来
作用： 直观地体现了标签与标签之间的关系

DOM对象

含义： 浏览器根据html标签生成的JS对象
核心思想： 把网页内容当作对象来处理

 let divObj = document.querySelector('div')
 console.log(typeof divObj)
 // 显示的是object

例如：document对象
document.write

是DOM提供的一个对象
提供的属性和方法都是用来访问和操作网页内容的
网页所有内容都在document中

获取DOM对象

1. 根据CSS选择器来获取DOM对象（⭐）

1.选择单个元素
document.querySelector('选择器') //选择器一定是用引号引起来

匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。
返回值: 匹配的第一个元素, 如果没有匹配到，则返回null


 <ul>
    <li class="ul">1</li>
    <li id="ul">2</li>
    <li>3</li>
  </ul>
  
  <script>
    // 根据CSS选择器来获取DOM元素(重点)
    // 1. querySelector
    //    语法：
    //    参数：css选择器
    //    作用：
    //    返回值: 匹配的第一个元素, 如果没有匹配到，则返回null
    
	let ulObj1 = document.querySelector('ul') //标签选择器
    let ulObj2 = document.querySelector('.ul') // 类名选择器
    let ulObj3 = document.querySelector('#ul') // id名选择器
    let ulObj4 = document.querySelector('li:nth-child(1)') // 结构伪类选择器
    let ulObj5 = document.querySelector('ul li') // 后代选择器选择器
    let ulObj6 = document.querySelector('ul>li') // 子代选择器选择器
                 /*   ... 所有选择器都可以  ... */
    
    let liObj = document.querySelector('li') // 只能找到第一个li
    let divObj = document.querySelector('div') // 没有获取到就会返回null

</script>

作用：在文档中根据CSS选择器来查询获取元素

选择多个元素

document.querySelectorAll('选择器')
作用：返回对象集合NodeList

document.querySelectorAll('li')

注意：

querySelector()方法获取到的元素可以直接修改，因为只有一个元素
querySelectorAll() 方法获取到的元素不能直接修改,因为获取到的是多个，需要配合for循环遍历修改。

例如：

 let lis = document.querySelectorAll('li')
    console.log(lis)
    for (let i = 0 ; i < lis.length ; i ++) {
      lis[i].innerHTML = ' 修改啦！'
    }

伪数组

querySelectorAll() 方法获取到的元素是伪数组，有length,索引号等。
无论有无获取到元素，querySelectorAll() 始终获取的是伪数组
伪数组与数组最大的不同，就是伪数组不能使用数组的pop , push等方法
例如：

// 没有div元素
let divs = document.querySelectorAll('div')
    console.log(divs)

返回的结果：

2. 通过其他方式获得DOM对象

 // 通过id名来获取
    let idObj = document.getElementById('ul')
    console.log(idObj)
    // 通过类名来获取
    let classObj = document.getElementsByClassName('ul')
    console.log(classObj)
    // 通过标签名来获取
    let tagObj = document.getElementsByTagName('ul')
    console.log(tagObj)

	// 拓展补充
    //  body的获取方式   
    console.log(document.body)
    // 其他类似获取方法
    console.log(document.title)
    console.log(document.head)
    // 获取html方法
    console.log(document.documentElement)

设置/修改DOM内容

1. innerText属性

能够操作标签的内容
文本中包含的标签不会被解析

例如：

 let info = document.querySelector('div')
 info.innerText = '<h1>喜喜</h1>

显示为

2. innerHTML属性（⭐）

能够操作标签的内容
文本中包含的标签会被解析

例如：

let info  = document.querySelector('div')
 info.innerHTML = '<h1>哈哈哈</h1>'

显示为

设置/修改元素属性

通过对象的学习，我们知道了 对象.属性 = 值，那么我们就可以利用这一特性来修改元素的属性
例如：


<img src="./images/1.jpg" width="500" alt="" />
  <script>
      // 设置/修改元素常用属性（src 、title等属性）
        let pic = document.querySelector('img')
        pic.src = "./images/3.jpg"
        pic.title = '我是一张图片'
</script>

设置/修改元素样式

1. 通过类名操作CSS

1. className 属性

语法：元素.className = 'css类名'
例如：

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .active {
      width: 300px;
      height: 300px;
      background-color: lightgreen;
      margin-left: 100px;
      border-radius: 20px;
    }
  </style>
  

<body>
  <div></div>
  <script>
    // 使用className操作类名修改样式
    let a = document.querySelector('div')
    a.className = 'active'
  </script>
  </body>

有覆盖问题：是用className赋值会覆盖以前的类名

2. classList 属性

语法：

// 获取到当前DOM元素他的一个 类的集合列表
元素.classList
// 添加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')
// 检测一个元素是否有某个类名 有就是true, 没有就是false
元素.classList.contains('类名')

classList 是追加和删除不影响以前类名
注意：add remove toggle contains 等都是方法，用()进行调用，要与属性区分开

2. 通过style操作CSS

语法：对象.style.样式属性 = 值
例如：

  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: pink;
    }
  </style>

<body>
  <div class="box"></div>
  <script>
      // 通过style控制样式属性
      // 语法：对象.style.样式属性名 = 值
      let a = document.querySelector('.box')
      a.style.backgroundColor = 'red'
      a.style.width = '100px'
      a.style.height = '100px'
  </script>
</body>

注意点

遵守驼峰式写法
不要落下单位px单位

设置/修改表单元素的属性

// 获取
DOM对象.属性名
// 设置
DOM对象.属性名 = 新值

布尔类型属性： checked、selected、 disabled ，属性值是布尔值（true / false）

例如

 let inputObj1 = document.querySelector('.inp1')
 inputObj1.type = 'password'
 let inputObj2 = document.querySelector('.inp2')
 inputObj2.checked = true

定时器

使用场景： 网页中的倒计时、轮播图
作用： 每隔一段时间，重复调用一个函数

开启定时器

语法：

// 开启定时器
setInterval(函数 , 间隔时间)

作用：

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

函数名字不需要加括号
例如：


 function fn() {
      document.write('fn 函数执行啦！')
    }
      setInterval(fn , 1500) // 1.5秒执行一次

效果图：

关闭定时器

语法：

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

注意

函数名字不需要加括号
定时器返回的是一个id数字

例如：


function fn() {
      document.write('fn 函数执行啦！<br />')
      }
      // 关闭定时器语法：clearInterval(定时器id)
      let close = setInterval(fn , 1500)
      clearInterval(close)

posted @ 2022-04-06 19:50 Tricia11 阅读(13) 评论(0) 收藏举报来源

刷新页面返回顶部

Tricia