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

最新推荐文章于 2023-04-18 23:53:36 发布

不吃代码的猫大人

最新推荐文章于 2023-04-18 23:53:36 发布

阅读量230

点赞数 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>

总结：
在这里插入图片描述

不吃代码的猫大人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何通过API获取元素、操作元素、操作元素属性以及定时器的使用

API:应用程序接口（Application Programming Interface）（Document Object Model——文档对象模型）**作用：**DOM用来操作网页文档，开发网页特效和实现用户交互DOM的核心思想就是把网页内容当做对象来处理，通过对象的属性和方法对网页内容操作是 DOM 里提供的一个**对象，**是DOM顶级对象作为网页内容的入口所以它提供的属性和方法都是用来访问和操作网页内容的document . write('你好')
复制链接

扫一扫