API中DOM元素的获取和操作

最新推荐文章于 2024-07-22 15:13:59 发布

青青青青草地

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量412

点赞数 4

文章标签： javascript

本文链接：https://blog.csdn.net/2301_79614379/article/details/138763545

版权

文章目录

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 = true
    ipt.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 a
    console.log(first.dataset.id) // 1
  </script>
</body>

</html>

定时器——间歇函数

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

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

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

青青青青草地

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
API中DOM元素的获取和操作

标准属性：标签自带的属性，可以直接操作，比如：disabled、checked等在html5中推出来专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取</</</const'div'log// 1 alog// 1</</</
复制链接

扫一扫