JavaScript(WebAPI)

最新推荐文章于 2024-05-25 13:28:01 发布

来学习的小张

最新推荐文章于 2024-05-25 13:28:01 发布

阅读量1.6k

点赞数 18

分类专栏：前端文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/dddddrrrzz/article/details/124478391

版权

本文介绍了JavaScript中的Web API，重点讲解了DOM的基本概念，包括如何获取元素、操作元素内容、属性和样式，以及事件的初步认识。通过代码案例展示了如何新增和删除节点，以及实现猜数字和表白墙功能。

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

一、DOM 基本概念

DOM 全称为 Document Object Model.
W3C 标准给我们提供了一系列的函数, 让我们可以操作:

网页内容
网页结构
网页样式
一个页面的结构是一个树形结构, 称为 DOM 树.

1.1 获取元素

querySelector

其实是一个document这样的对象的属性.
页面中的全局对象.一个页面加载好了,就会自动生成一个全局变量,就叫做document .这里面就有一些属性和方法,让我们来操作页面的内容.

 <script>
        let obj = document.querySelector('ul li');
        console.log(obj);
    </script>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>

当querySelector的参数的选择器，匹配到了多个元素的时候,此时返回的对象,就是匹配结果中的第一个元素.
像这种情况,如果我们想把这些li都选中,就需要使用querySelectAll。querySelectAll返回的是一个数组,就包含了所有被选中的元素.准确的说, querySelectorAll返回的不是一个真正的原生数组，而是一个对象.只不过这个对象有length,也能够通过下标的方式来访问内部元素.这样的对象使用起来和数组非常相似(一模一样),称为“伪数组"。

二、事件初识

JS中的很多代码,都是通过"事件”来触发的。事件就是浏览器对于用户的操作行为进行了一个"统称"(准确的说,事件也不一定全是用户操作产生的,但是大部分是的)。
例如，鼠标在页面上移动,就会产生一个鼠标移动事件.
再例如，鼠标在页面某个位置点击,就会产生一个鼠标点击事件；鼠标滚轮,来滚动页面,就会产生一组滚动事件；再例如，用户按下键盘的某个按键,也会产生一个键盘事件；再例如，用户修改浏览器窗口大小,也会产生一个窗口大小改变事件……JS干的一个主要工作就是在不同的事件中,进行不同的处理。

事件的三个要素:

事件源:哪个HTML元素产生的事件.
事件类型:鼠标移动,鼠标点击,键盘事件,窗口大小改变事件…
事件的处理程序:当事件产生之后,执行啥样的js代码.

 <script>
        function f() {
   
            alert("hello");
        }
    </script>
    <button onclick="f()">这是一个按钮</button>

也可以写成：（建议写成下面这种）

 <button id="btn">点我一下</button>
    <script>
        let btn = document.getElementById('btn');
        btn.onclick = function () {
   
            alert("hello world");
        }
    </script>

三、操作元素

操作元素(操作=获取＋修改)

操作元素内容;
操作元素的属性;
操作元素的样式;

3.1 操作元素内容

通过对象里面的一个属性innerHTML来实现.(元素里面包含的html代码是啥样的)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="screen">hello world</div>
    <button id="btn">这是按钮</button>
    <script>
        let btn = document.querySelector("#btn");
        btn.onclick = function () {
   
            let screen = document.querySelector("#screen");
            console.log(screen.innerHTML);
        }
    </script>
</body>
</html>

当我们点击多次按钮,可以看到在控制台上，并没有显示多条数据,而是显示了个数字.控制台默认下会把相同的打印合并成一条的.
在这里插入图片描述

在这里插入图片描述
div中也可以存放列表：

<body>
<div id="screen">
 		<ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
        </ul>
</div>
    <button id="btn">这是按钮</button>
    <script>
        let btn = document.querySelector("#btn");
        btn.onclick = function () {
   
            let screen = document.querySelector("#screen");
            console.log(screen.innerHTML);
        }
    </script>
</body>

点击控制台得到：
在这里插入图片描述
案例一：两个按钮：一个获取内容，一个进行修改内容。

<body>
    <div id="screen">
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
        </ul>
    </div>

    <button id="btn">这是获取内容按钮</button>
    <button id="btn2">这是修改内容按钮</button>
    <script>
        let btn = document.querySelector("#btn");
        btn.onclick = function () {
   
            let screen = document.querySelector("#screen");
            console.log(screen.innerHTML);
        }

        let btn2 = document.querySelector("#btn2");
        btn2.onclick = function () {
   
            let screen = document.querySelector("#screen");
            screen.innerHTML = "<h1>修改后的内容</h1>";
            console.log(screen.innerHTML);
        }
 </script>
</body>

在这里插入图片描述

在这里插入图片描述
案例二：搞一个div显示整数.再搞一个按钮.每次点击这个按钮,就让里面的整数＋1，在此基础上可以再添加一个减号按钮，每次点击让其进行－1操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</<

最低0.47元/天解锁文章

来学习的小张

关注

18
点赞
踩
8

收藏

觉得还不错? 一键收藏
14
评论
JavaScript(WebAPI)

目录一、DOM 基本概念1.1 获取元素querySelector二、事件初识三、操作元素3.1 操作元素内容JS 分成三个大的部分ECMAScript(JS): 基础语法部分;DOM API: 操作页面结构;(最核心的库)BOM API: 操作浏览器;WebAPI 就包含了 DOM + BOM所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发.API参考文档一、DOM 基本概念DOM 全称为 Document Object Model.W3C 标准给我们
复制链接

扫一扫