API中DOM元素的获取和操作

文章目录

API
- 变量声明
- DOM
- - 获取DOM元素
  - 操作元素内容
  - 操作元素属性
  - - 通过style属性操作CSS
    - 通过类名操作CSS
    - 通过classList操作CSS
    - 操作表单属性
    - 自定义属性
    - 定时器——间歇函数

API

作用：就是使用js去操作html和浏览器

分类：DOM(文档对象模型)、BOM(浏览器对象类型)

变量声明

变量声明有三个：var、let、const

建议const优先：

const语义化更好
很多变量声明后就不会更改了
有了变量先给const，如果发现后面要被修改，再改为let

注意：用const定义的数组或对象使用添加、删除、修改操作不会报错，但不能对其重新赋值。（因为对象和数组里存的时地址，只要地址不变，就不会报错）

const a = ['a', 'b']
a.push('c') // 不报错
a.pop() // 不报错
a[0] = 1 // 不报错
a = [1, 2, 3] // 报错
console.log(a)

DOM

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

作用：开发网页内容特效和实现用户交互。

获取DOM元素

选择匹配的第一个元素

document.querySelector('div') // css选择器

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

选择匹配的多个元素

document.querySelectorAll('div') // css选择器，包含一个或多个有效的CSS选择器字符串

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

注意：哪怕只有一个元素，通过document.querySelectorAll('')获取过来的也是一个伪数组，只是里面只有一个元素而已

根据id获取一个元素

document.getElementById('a') // 获取页面中id为a的元素

根据标签获取一类元素

document.getElementsByTagName('div') // 获取页面中所有的div

根据类名获取元素

document.getElementsByClassName('a') // 获取页面所有类名为a的元素

操作元素内容

属性innerText获取文字内容，显示纯文本，不解析标签

属性innerHTML获取文字内容，显示纯文本，解析标签

案例：颁奖（随机抽取一等奖、二等奖、三等奖，且不会抽中同一个人）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.radio-item .radio {width: 10px;height: 10px;border: 2px solid #999;border-radius: 100%;cursor: pointer;display: inline-block;}.radio-item input:checked+.radio {border-color: blue;color: aqua;}.radio-item input:checked+.radio::after {content: "";display: block;width: 5px;height: 5px;border-radius: 50%;background-color: blue;margin-top: 2.5px;margin-left: 2.5px;}.radio-item input:checked+span+span {color: steelblue;}.radio-item input[type="radio"] {display: none;}</style>
</head><body><div><strong>年会抽奖</strong><h1>一等奖<span id="a">???</span></h1><h2>二等奖<span id="b">???</span></h2><h3>三等奖<span id="c">???</span></h3></div><script>const person = ['小明', '小王', '小丽', '小红', '小芳']const one = document.querySelector('#a')let radom = Math.floor(Math.random() * person.length)one.innerHTML = person[radom]const two = document.querySelector('#b')person.splice(radom, 1)radom = Math.floor(Math.random() * person.length)two.innerHTML = person[radom]const three = document.querySelector('#c')person.splice(radom, 1)radom = Math.floor(Math.random() * person.length)three.innerHTML = person[radom]</script>
</body></html>

操作元素属性

通过js设置/修改标签的元素属性，比如通过src更换图片。

通过style属性操作CSS

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: black;}</style>
</head><body><div></div><script>const box = document.querySelector('div')box.style.width = '400px' // 注意要加单位box.style.backgroundColor = 'blue' // 多组单词采用小驼峰命名法</script>
</body></html>

通过类名操作CSS

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: black;}.modify {width: 300px;background-color: bisque;height: 300px;margin: 0 auto;}</style>
</head><body><div></div><script>const box = document.querySelector('div')box.className = 'modify' // 当需要修改的样式过多时，可以通过添加类名进行修改</script>
</body></html>

注意：

由于class是关键字，所以使用className去代替
className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

通过classList操作CSS

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。

div.classList.add('类名') // 追加一个类
div.classList.remove('类名') // 删除一个类
div.classList.toggle('类名') // 切换一个类：有删无加

操作表单属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text" value="电脑">><script>const uname = document.querySelector('input')uname.value = 'abc' // 通过value属性获取表单内容，innerHTML无效uname.type = 'password'</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="checkbox" name="" id=""><script>const ipt = document.querySelector('input')ipt.checked = trueipt.checked = 'false' // 会选中，不为空的字符串通过隐式转换都是true</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button>提交</button><script>const but = document.querySelector('button')but.disabled = true // 默认为false——不禁用</script>
</body></html>

自定义属性

标准属性：标签自带的属性，可以直接操作，比如：disabled、checked等

自定义属性：

在html5中推出来专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div data-id="1" data-spm="a">1</div><script>const first = document.querySelector('div')console.log(first.dataset) // 1 aconsole.log(first.dataset.id) // 1</script>
</body></html>

定时器——间歇函数

语法：setInterval(函数, 间隔时间)

作用每隔一定时间调用一次函数，间隔时间单位毫秒（1000毫秒 = 1秒）

    let i = 0function fn() {console.log(i)}let n = setInterval(fn, 1000) // 函数名不需要加括号console.log(n) // 定时器返回的是一个id数字clearInterval(n)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/10954.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！