如何通过API获取元素、操作元素、操作元素属性以及定时器的使用

最新推荐文章于 2023-11-30 10:31:01 发布

不吃代码的猫大人

最新推荐文章于 2023-11-30 10:31:01 发布

阅读量285

点赞数 1

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_45274635/article/details/129758921

版权

学习目标：

了解什么是API？
API是用来干什么的?
如何使用API？

1.什么是API

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

2.API的作用

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

3.使用API

可以通过查阅文档来了解API的属性和方法

查阅网址：https://developer.mozilla.org/zh-CN/

如何通过API获取元素、操作元素、操作元素属性

首先了解什么是DOM

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

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

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

document 对象：

是 DOM 里提供的一个**对象，**是DOM顶级对象
作为网页内容的入口
所以它提供的属性和方法都是用来访问和操作网页内容的

例如：

document.write('你好')

1.获取DOM元素

想要操作页面元素，那我们需要先利用DOM方式来获取（选择）这个元素

1.1CSS选择器来获取DOM元素（重点）

获取css选择器选择的第一个DOM元素，使用document.querySelector() ，返回值是一个元素，如果没有匹配到，则返回null

<script>
    	// document.querySelector  选择第一个元素  返回第一个元素
        // const box = document.querySelector('.box')
        // console.log(box);
        // 获取第一个元素
        const box = document.querySelector('.box')
        console.log(box);
 </script>

获取css选择器选择的所有相同的DOM元素，document.querySelectorAll()，返回值是一个伪数组

<script>
        // document.querySelectorAll  选择相同css标签的元素   返回元素的一个对象集合   即伪数组
        // 伪数组：有序号，但是没有数组的一些方法
        const lis = document.querySelectorAll('ul lis')
        console.log(lis);
        遍历伪数组
        for(let i =0 ;i<lis.length;i++){
            console.log(lis[i]);
        }
        // 如果找不到元素  返回为null
         console.log(lis);
    </script>

1.2 其他获取DOM元素（了解）

通过id名来获取：document.getElementById()

通过类名来获取：document.getElementsByClassName()

通过标签名来获取：document.getElementsByTagName()

通过name来获取：document.getElementsByName()

<script>
        // 类名
        const box = document.getElementsByClassName('box')
        console.log(box);

        // id名
        const item = document.getElementById('item')
        console.log(item);

        // 通过标签名
        const p = document.getElementsByTagName('p')
        console.log(p);
        // 遍历
        for(let i = 0;i<p.length;i++){
            console.log(p[i]);
        }

        // 通过name
        const input = document.getElementsByName('in-text')
        console.log(input);
    </script>

2.操作元素

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

要操作标签元素的内容，主要有两种方式:

对象.innerText 属性

<div class="box">这是一个盒子</div>
<div id="item">这是一个特殊的盒子</div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>

// 修改内容
let text = box.innerText = ‘这是一个类名为box的盒子’
console.log(text);

// 删除内容
let text = box.innerText = ‘’
console.log(text);

// 增加内容
text = box.innerText = text+‘我是一个大盒子’
console.log(text);
// 对象名.innerText只可以获取内容，修改内容，不可以解析html标签

对象.innerHTML 属性

		//对象名.innerHTML可以修改内容也可以解析html标签
        // let text = box.innerHTML
        box.innerHTML = '<strong>我是一个盒子</strong>'
        // console.log(text);

两种操作元素的方式区别是：

元素.innerHTML 属性能识别文本，能够解析标签

如果纠结到底用谁，可以选择innerHTML

3.操作元素属性

3.1操作元素常用属性

最常见的属性比如： href、title、src 等等

可以通过DOM操作元素属性，比如通过 src 更换图片地址

语法：对象.属性 = 值

<body>
    <img src="./images/1.png" alt="我是波仔">
    <script>
        // 1.获取元素
        const img = document.querySelector('img')
        // 2.修改元素属性
        img.src = './images/2.png'
        // 3.删除元素属性
        img.alt = ''
        console.log(img);
        // 4.增加元素属性
        img.title = '我是一个图片'

    </script>
</body>

3.2操作元素样式属性

可以通过 DOM对象修改标签元素的样式属性

3.2.1通过style属性操作元素样式

语法：对象.style.样式属性 = 值

<body>
    <div class="box"></div>
    <script>
    //    1.获取元素
       const box = document.querySelector('.box')
    //  2.通过style修改元素属性
        box.style.backgroundColor = 'red'
        box.style.marginTop = '100px'

        // 注意：
        // 1.复合属性需要用小驼峰方法书写
        // 2.行内
    </script>
</body>

3.2.2通过类名(className) 操作元素样式（理解）

语法：对象.className = ‘对象类名’

<body>
    <div class="box">类名操作样式</div>
    <script>
        // 通过类名操作元素样式
        // 1. 获取box盒子
        const box = document.querySelector('.box')

        // 2. 利用类名操作元素样式
        // box.className = 'circle'

        // 3. 利用类名操作样式添加的新的类名会覆盖掉原先的类名
        box.className = 'circle box'
    </script>
</body>

注意：

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

3.2.3 通过 classList 操作元素样式（推荐）

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

语法：

在这里插入图片描述

<body>
    <div class="box">类名操作样式</div>
    <script>
        // 通过类名操作元素样式
        // 1. 获取box盒子
        const box = document.querySelector('div')

        // 2. 利用类名操作元素样式
        // 2.1添加类名
        box.classList.add('circle')
        // 2.2删除类名
        // box.classList.remove = 'box'
        // 2.3 切换类名（有就删除，没有就添加）
        // box.classList.toggle = 'box'
    </script>
</body>

建议：

修改样式很少的时候，使用style ；

修改大量样式的可以选择类：className/classList ；

classList是追加和删除不影响以前类名，更提倡；

3.3操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

正常的有属性有取值的跟其他的标签属性没有任何区别

语法：

获取：DOM对象.属性

设置：DOM对象.属性 = 新值

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示

比如：实现禁用按钮，勾选按钮等

如果为 true 代表添加了该属性

如果是 false 代表移除了该属性

比如： disabled、checked、selected

<body>
    <input type="text" name="txt" value="用户名">
    <button>按钮</button>
    <script>
        // 获取对象
        const input = document.querySelector('[name=txt]')
        // 修改属性
        input.value = '你好'

        const btn = document.querySelector('button')
        // disabled属性是设置按钮不可点击
        btn.disabled = true
    </script>
</body>

3.4自定义属性

标准属性: 标签天生自带的属性比如class、id、title等, 可以直接使用点语法操作比如：对象.title

自定义属性： 在html5中推出来了专门的**data-**自定义属性

使用场景：

通过自定义属性可以存储数据，后期可以使用这个数据
在标签上一律以**data-**开头
在DOM对象上一律以dataset对象方式获取

<body>
    <div class="box" data-id = "1" data-name="盒子"></div>
    <script>
        // 1.获取元素
        const box = document.querySelector('.box')
        // 2.操作属性
        console.log(box.dataset.id);
        console.log(box.dataset.name);
    </script>
</body>

定时器-间隔函数

1.定时器函数介绍

定时器函数作用：可以开启和关闭定时器

1.1开启定时器

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

**作用：**每隔一段时间调用这个函数

注意：间隔时间单位是毫秒

1.2关闭定时器

语法： clearInterval ( 定时器名 )

一般不会刚创建就停止，而是满足一定条件再停止

	<script>
        // 定时器
        // 1.开始定时器
        const timer = setInterval(function(){
            for(let i = 0 ;i<3;i++){
                console.log(1)
            }
        },1000)
        // 返回值
        console.log(timer);
        
        //2.结束定时器
        clearInterval(timer) 
	</script>

定时器

语法： clearInterval ( 定时器名 )

一般不会刚创建就停止，而是满足一定条件再停止

	<script>
        // 定时器
        // 1.开始定时器
        const timer = setInterval(function(){
            for(let i = 0 ;i<3;i++){
                console.log(1)
            }
        },1000)
        // 返回值
        console.log(timer);
        
        //2.结束定时器
        clearInterval(timer) 
	</script>