Web APIs的学习笔记

鱼晚.

已于 2024-02-19 00:59:07 修改

阅读量400

点赞数 8

文章标签：前端学习笔记

于 2024-01-25 21:27:34 首次发布

本文链接：https://blog.csdn.net/m0_62146534/article/details/135787835

版权

本文介绍了DOMAPI在JavaScript中的作用，包括如何操作HTML内容、创建DOM对象、使用querySelector和querySelectorAll选择元素，以及const和let的使用规则。同时通过年终抽奖案例展示了如何利用DOMAPI动态更新页面内容。

摘要由CSDN通过智能技术生成

API的作用和分类

作用：使用js去操作HTML和浏览器

分类：DOM（文档对象模型）、BOM（浏览器对象模型）

对于复杂数据类型，用const声明的时候，是可以往里面添加新元素的，因为地址还是不会发生改变。
const arr = ['小猪','小狗']
arr.push('小猫')
console.log(arr)    //['小猪','小狗','小猫']    可以往里面添加新元素
但是这种情况会报错（改变了对象的地址，const声明的对象（复杂数据类型，数组是其中一种）地址不能发生改变）
const arr = ['小猪','小狗']

arr = [3,6,8,6]
console.log(arr)    //报错，因为数组地址发生改变了，不再是原来的数组了，const声明的数组地址不能发生改变

DOM

用来呈现以及与任意HTML或xml文档交互的API，通俗来讲DOM就是浏览器提供的一套用来操作网页内容的功能。

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

DOM树

将HTML文档以树状结构直观地表现出来，称之为DOM树或文档树。

作用：文档树直观地，如：

DOM对象：浏览器根据html标签生成的JS对象

1、所有的标签属性都可以在这个对象上面找到

2、修改这个对象的属性会自动映射到标签身上

DOM的核心思想：

把网页内容当做对象来处理

document对象：

是DOM里提供的一个最大的对象

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

例：document.write()

网页所有内容都在document里面

DOM——获取元素

变量声明尽量使用const，因为const的语义化更好，有了变量先给const，如果发现其后面是要被修改的，再改为let。

获取DOM元素

选择匹配的其中一个元素

document.querySelector()

<body>
    <div class="box">你好</div>
    <div class="box">小猪佩奇</div>
    <nav class="nav">导航栏</nav>
    <script>
        //获取匹配的第一个元素
        //const box = document.querySelector('div')
        //第二种写法
        const box = document.querySelector('.box')
        const nav = document.querySelector('#nav')
    </script>
</body>

<body>
    <div class="box">你好</div>
    <div class="box">小猪佩奇</div>
    <nav class="nav">导航栏</nav>
    <ul>
        <li>小红</li>
        <li>小兰</li>
        <li>小黑</li>
    </ul>
    <script>
        //获取第一个li元素
        const li1 = document.querySelector('ul li:first-child')
        //获取第二个li元素
        const li2 = document.querySelector('ul li:nth-child(2)')
        console.log(li2)
    </script>
</body>

选择匹配的多个元素

document.querySelectorAll()

<body>
    <ul>
        <li>小红</li>
        <li>小兰</li>
        <li>小黑</li>
    </ul>
    <script>
        //获取所有li
        const lis = document.querySelectorAll('li')        
        console.log(lis)
    </script>
</body>

返回值如下：

以上根据css选择器来获取DOM元素得到的是一个伪数组，即

有长度有索引号的数组
没有pop() push()等数组方法，没有返回数组的值，只是返回数组的长度和名字
想要得到里面的每一个对象，需要通过for遍历

<body>
    <div class="nav">
        <ul>
            <li>小红</li>
            <li>小兰</li>
            <li>小黑</li>
        </ul>
    </div>
    <script>
        //获取所有li元素，lis的返回值一个伪数组
        const lis = document.querySelectorAll('.nav li')  
        遍历获取到的li，即获取返回的伪数组的值
        for(let i = 0; i < lis.length; i++){
            console.log(lis[i])
        }      
    </script>
</body>

其他获取DOM元素的方法（了解即可）

        //根据id获取一个元素
        document.getElementById('nav')
        //根据标签获取一类元素 eg：获取页面所有div
        document.getElementByTagName('div')
        //根据类名获取元素 eg：获取页面内所有类名为s的元素
        document.getElementClassName('s')

操作元素内容

元素.innerText属性

1、将文本内容添加/更新到标签位置

2、显示纯文本，不解析标签

<body>
    <div class="box">我是文字内容</div>
    <script>
        const box1 = document.querySelector('.box')
        //console.log(box1)打印出来的是一个对象值，而不单单是box里面的内容
        //获取文字内容,显示纯文本，不解析标签
        console.log(box1.innerText)
        //修改文本内容
        box1.innerText = '<strong>我是你奶奶的奶奶</strong>'
        console.log(box1.innerText)                
    </script>
</body>

不解析功能标签

元素.innerHTML属性

1、将文本内容添加/更新到标签

2、会解析功能标签，多标签建议使用模版字符

<body>
    <div class="box">我是文字内容</div>
    <script>
        const box = document.querySelector('.box')
        console.log(box.innerHTML) 
        //可以解析标签
        box.innerHTML = '<strong>我是你奶奶的奶奶</strong>'  
        console.log(box.innerHTML)             
    </script>
</body>

综合案例

年终会抽奖案例

需求：从数组中随机抽取一等奖、二等奖、三等奖，显示到对应的标签里面。

素材：

HTML文件结构

数组名单：小红、小兰、小猪、小黑、小鹅

分析：

声明数组：const personArr = ['小红','小兰','小猪','小黑','小鹅']
一等奖：随机生成一个数字（0~数组长度），找到对应数组的名字
通过innerText或者innerHTML将名字写入span元素内部
二等奖以此类推

<!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>
        .wrapper {
            width: 800px;
            height: 400px;
            background: url(./image/头像.jpg) no-repeat center / cover;
            padding: 100px 250px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <strong><h2>与可科技文化年终会抽奖</h2></strong>
        <h3>一等奖：<span id = 'one'>???</span></h3>
        <h4>二等奖：<span id = 'two'>???</span></h4>
        <h5>三等奖：<span id = 'three'>???</span></h5>
        <h6>四等奖：<span id = 'four'>???</span></h6>
    </div>
    <script>
        //声明数组
        const personArr = ['小红','小兰','小猪','小黑','小鹅']
        //先做一等奖
        //随机生成一个数，得到一个数组下标,math.randon()函数在笔记4里面有
        const random = Math.floor(Math.random()*personArr.length)
        // console.log(personArr[random])
        const one = document.querySelector('#one')
        one.innerHTML = personArr[random]
        //在数组中删除已经被抽到的元素，使用函数splice()
        //splice(起始位置(下标)，删除个数)
        personArr.splice(random,1)
       

        //二等奖
        //随机生成一个数，得到一个数组下标,math.randon()函数在笔记4里面有
        const random2 = Math.floor(Math.random()*personArr.length)
        // console.log(personArr[random])
        const two = document.querySelector('#two')
        two.innerHTML = personArr[random2]
        //在数组中删除已经被抽到的元素，使用函数splice()
        //splice(起始位置(下标)，删除个数)
        personArr.splice(random2,1)

        //三等奖
        //随机生成一个数，得到一个数组下标,math.randon()函数在笔记4里面有
        const random3 = Math.floor(Math.random()*personArr.length)
        // console.log(personArr[random])
        const three = document.querySelector('#three')
        three.innerHTML = personArr[random3]
        //在数组中删除已经被抽到的元素，使用函数splice()
        //splice(起始位置(下标)，删除个数)
        personArr.splice(random3,1)

        //四等奖
        const random4 = Math.floor(Math.random()*personArr.length)
        const four = document.querySelector('#four')
        four.innerHTML = personArr[random4]
        personArr.splice(random4,1)       
    </script>   
</body>
</html>