Web APIs-01：Dom获取&属性操作

最新推荐文章于 2024-11-06 15:48:04 发布

一枚小蜗牛H

最新推荐文章于 2024-11-06 15:48:04 发布

阅读量525

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/Ying_ph/article/details/140775751

思维导图：

掌握DOM属性操作，完成元素内容设置，元素属性设置，控制元素样式

在这里插入图片描述

DOM简介
获取DOM元素
操作元素内容
操作元素属性
定时器-间隔函数
综合案例

描述	属性/方法	效果
获取DOM对象	document.querySelector()	获取指定的第一个元素
document.querySelectorAll()	获取指定的所有元素
操作元素内容	元素.innerText	操作元素内容，不解析标签
元素.innerHTML	操作元素内容，解析标签
操作元素样式	元素.style.width	通过style操作样式
元素.className	通过类名操作样式
元素.classList.add()	增加类名
元素.classList.remove()	删除类名
元素.classList.toggle()	切换类名
间隔函数	setInterval(function() {}, 1000)	定时器，每隔指定时间重复执行

课程介绍

web APIs 作用： JavaScript 去操作页面文档和浏览器

什么是 API

API: 应用程序接口（Application Programming Interface）

接口：无需关心内部如何实现，程序员只需要调用就可以很方便实现某些功能

DOM简介

DOM（Document Object Model——文档对象模型）

**作用：**DOM用来操作网页文档，开发网页特效和实现用户交互

DOM的核心思想就是把网页内容当做对象来处理，通过对象的属性和方法对网页内容操作
在这里插入图片描述

document 对象

是 DOM 里提供的一个对象，是DOM顶级对象

作为网页内容的入口

所以它提供的属性和方法都是用来访问和操作网页内容的

例：document.write()

获取DOM对象

利用css选择器来获取DOM元素

语法：

const box = document.querySelector('div')

**参数: **

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

返回值：

CSS选择器匹配的第一个元素对象

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

// 利用css选择器来获取DOM元素
// 1. document.querySelector() 选择指定css选择器的第一个元素
// 1.1 参数是字符串的css选择器
const box = document.querySelector('div')
console.log(box)

// 1.2 返回值是dom对象
console.log(typeof box)  // object
console.dir(box)

const box = document.querySelector('.box')
console.log(box)

const li = document.querySelector('ol li')
console.log(li)   // 只选择满足条件的第一个元素li

const li = document.querySelector('ol li:nth-child(2)')
console.log(li)   // 选择第2个小li

// 1.3 如果获取不到则返回 null
const p = document.querySelector('p')
console.log(p)  // null

选择指定css选择器的所有元素

语法：

const lis = document.querySelectorAll('.nav li')

参数:

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

返回值：

CSS选择器匹配的NodeList 伪数组

// 2. document.querySelectorAll() 选择指定css选择器的所有元素
// 2.1 参数还是字符串的css选择器
const lis = document.querySelectorAll('.nav li')

// 2.2 返回值是一个伪数组里面包含了所有的dom对象 li
console.log(lis)

// 2.3 伪数组
// (1) 有长度和索引号
// (2) 没有数组的一些常用方法 比如 push  pop  splice等方法
// lis.push(1)
// console.log(lis)  // 因为lis是伪数组无法使用push方法所以报错

// 2.4 利用循环遍历伪数组得到里面的每一个元素对象
for (let i = 0; i < lis.length; i++) {
   
   
  console.log(lis[i]) // 里面的每一个元素对象
}

// 2.5 即使只有1个元素，我们querySelectorAll 获得的也是一个伪数组，里面只有1个元素而已

const boxs = document.querySelectorAll('.box')
console.log(boxs)

其他方式(了解)

语法	实例	描述
getElementById	document.getElementById(‘box’)	根据id获取元素，单个元素
getElementsByTagName	document.getElementsByTagName(‘li’)	根据标签名获取元素，伪数组
getElementsByClassName	document.getElementsByClassName(‘one’)	根据类名获取元素，伪数组
getElementsByName	document.getElementsByName(‘sex’)	根据name属性值获取元素，伪数组

// 1. getElementById   根据id获取
const box = document.getElementById('box')
console.log(box)

// 2. getElementsByClassName   根据类名获取  返回伪数组
const items = document.getElementsByClassName('item')
console.log(items)

// 3. getElementsByTagName  根据标签名获取 返回伪数组
const ps = document.getElementsByTagName('p')
console.log(ps)

// 4. getElementsByName  根据name属性获取 返回伪数组
const inputs = document.getElementsByName('username')
console.log(inputs)

操作元素内容

DOM对象可以操作页面标签，所以本质上就是操作DOM对象（增删改查）

如果想要操作标签元素的内容，则可以使用如下2种方式：

1.对象.innerText 属性

2.对象.innerHTML 属性

innerText

innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。

<script>
  // 操作DOM元素内容
  // 1. 对象.innerText 增删改查
  // 1.1 查
  console.log(box.innerText)  // 古丽扎娜
  // 1.2 改
  box.innerText = '迪丽热巴'
  // 1.3 增
  const box1 = document.querySelector('.box1')
  console.log(box1)
  box1.innerText = '佟丽丫丫'
  // 1.4 删  给空字符串可以删除内容
  box.innerText = ''
  box1.innerText = ''
</script>

innerHTML

innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

<script>
  // 2. 对象.innerHTML  会解析标签
  box.innerHTML = '<strong>迪丽热巴</strong>'
</script>

总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。

年会抽奖案例


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport

最低0.47元/天解锁文章

200万优质内容无限畅学