web一、DOM 获取元素（css选择器获取）、操作元素内容（innerText，innerHTML）、事件监听（三要素，this，回调函数），操作元素属性和样式、自定义属性

CC__xy

已于 2024-12-03 20:29:24 修改

阅读量953

点赞数 22

分类专栏： Web APIs 文章标签：前端 javascript html

于 2024-11-22 14:11:23 首次发布

本文链接：https://blog.csdn.net/CC__xy/article/details/143969968

版权

一、什么是API

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

作用：开发人员使用 JavaScript提供的接口来操作网页元素和浏览器

二、DOM简介

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

DOM 的核心思想就是把网页内容当做对象来处理，通过对象的属性和方法对网页内容操作

document 对象是 DOM 里提供的一个 对象， 是DOM顶级对象作为网页内容的入口

三、获取DOM元素

1. CSS选择器来获取DOM元素

11，document.querySelector（css选择器）只能选择第一个元素，如果没有匹配到，则返回null

22，document.querySelectorAll（css选择器）

可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素

伪数组：有长度有索引号的数组但是没有 pop(）push（）等数组方法

（document：网页文档，query：查询，Selector：选中的）

<body>
    <div class="box">我是一个div</div>
    <ol>
        <li>我是第一个孩子</li>
        <li>我是第二个孩子</li>
        <li>我是第三个孩子</li>
    </ol>
    <ul class="nav">
        <li>新闻</li>
        <li>体育</li>
        <li>娱乐</li>
    </ul>

    <script>
        // document.querySelector('CSS 选择器') : 匹配第一个元素对象，没有找到则返回 null

        // querySelectorAll 返回伪数组，找不到则返回空伪数组
        //有索引有长度，支持遍历
        const lis = document.querySelectorAll('.nav li')
        lis.forEach((el, index) => {
            console.log(el, index)

        })
    </script>
</body>

2. 其他获取DOM元素（了解）

四、innerText、innerHTML

操作元素内容

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

1. 对象.innerText 属性。只识别文本，不能解析标签

2. 对象. innerHTML 属性。能识别文本，能够解析标签

<body>
    <div class="box">这是一个div</div>
    <script>
        const box = document.querySelector(".box")
            // innerText：不解析标签
        box.innerText = 'jS加内容'
        box.innerText = '<h1>(innerText)js加的标签不解析标签</h1>'

        // innerHTML：解析标签
        box.innerHTML = 'jS加内容'
        box.innerHTML = '<h1>(innerHTML)js加的标签解析标签</h1>'
    </script>
</body>

年会抽奖案例

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>年会抽奖</title>
    <style>
        .wrapper {
            width: 840px;
            height: 420px;
            background: url(./images/bg01.jpg) no-repeat center / cover;
            padding: 100px 250px;
            box-sizing: border-box;
        }
        
        .wrapper span {
            color: #b10e0d;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <strong>年会抽奖</strong>
        <h1>一等奖：<span class="one">???</span></h1>
        <h3>二等奖：<span class="two">???</span></h3>
        <h5>三等奖：<span class="three">???</span></h5>
    </div>

    <script>
        // 数组
        const arr = ['迪丽热巴', '古丽扎娜', '佟丽丫丫', '马尔扎哈']
            //一等奖
        const oneNum = Math.floor(Math.random() * arr.length)
        document.querySelector('.one').innerHTML = arr[oneNum]
        arr.splice(oneNum, 1)
            //二等奖
        const twoNum = Math.floor(Math.random() * arr.length)
        document.querySelector('.two').innerHTML = arr[twoNum]
        arr.splice(twoNum, 1)
            //三等奖
        const threeNum &#

最低0.47元/天解锁文章