1.什么是 WebAPI

2.什么是 API

API 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM .所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发.

3.什么是 DOM

1.DOM 树

一个页面的结构是一个树形结构, 称为 DOM 树

重要概念:

4.获取元素

这部分工作类似于 CSS 选择器的功能.

1.querySelector（选中一个元素）

2.querySelectorAll（选中一组元素）

5.事件

1.点击事件

  1. 事件源：触发事件的元素，这里就是 <input> 按钮（变量 button）。
  2. 事件类型：用户的操作类型，这里是 “点击”（onclick）。
  3. 事件处理程序：事件触发后执行的函数（即 function() { alert("hello") }）

2.键盘按钮事件

1.按下

2.抬起

3.例题：shift

6.获取&修改元素属性

1. innerText

可以看到, 通过 innerText 无法获取到 div 内部的 html 结构, 只能得到文本内容.
修改页面的时候也会把 span 标签当成文本进行设置

2. innerHTML

可以看到 innerHTML 不光能获取到页面的 html 结构, 同时也能修改结构. 并且获取到的内容保留的空 格和换行.

7.获取&修改表单元素属性_案例

demo6.html

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改

案例：播放暂停按钮文本切换

案例：计算器实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="播放" onclick="Onclick()" class="btn">
    <br>
    <input type="text" value="0" class="input" >
    <input type="button" value="+1" class="add" onclick="add()">
    <input type="button" value="-1" class="min" onclick="Min()">
</body>
<script>
    function add(){
        let add=document.querySelector('.input');
        add.value=parseInt(add.value)+1;
    }
    function Min(){
        let min=document.querySelector('.input');
        min.value=parseInt(min.value)-1;
    }

    let btn=document.querySelector('.btn')
    function Onclick(){
        if(btn.value=="播放"){
            btn.value="暂停"
        }else{
            btn.value="播放"
        }
    }
</script>
</html>

案例：全选/取消全选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <br>
    <input type="checkbox" class="all" onclick="Selectall()">我全都要<br>
    <input type="checkbox" class="select">貂蝉<br>
    <input type="checkbox" class="select">小乔<br>
    <input type="checkbox" class="select">妲己<br>
</body>
<script>
    let all=document.querySelector(".all");
    let select=document.querySelectorAll(".select");
    function Selectall(){
        for(i=0;i<select.length;i++){
            select[i].checked=all.checked;
        }
    }
    for(i=0;i<select.length;i++){
        select[i].onclick=function(){
            all.checked=IsSelectAll(select)
        }
    }
    function IsSelectAll(select){
         for(i=0;i<select.length;i++){
                if(select[i].checked==false){
                    return false;
                }
        }
            return true;
    }
   
</script>
</html>

8.获取/修改样式属性

1.行内样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="font-size: 10px;" onclick="Onclick()">哈哈哈</div>
</body>
<script>
    function Onclick(){
        let size1=document.querySelector('div');
        console.log(size1.style)
        let size2=parseInt(size1.style.fontSize)+10
        // size1.style.fontSize=size2+"px"
        size1.style.cssText='font-size'+size2+"px"
    }
</script>
</html>

下面这种要用到类名样式

2.类名样式操作

<!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>
        .light{
            background-color: aliceblue ;
            color: black;
            width: 100%;
            height: 100%;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .dark{
            background-color: black;
            color: white;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="light" onclick="Onclick()">
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
    </div>
</body>
<script>
    function Onclick(){
        let hua=document.querySelector('div')
        //如果是白天则换成黑夜，与之相反
        if(hua.className=="light"){
            hua.className="dark"
        }else{
            hua.className="light"
        }
    }
</script>
</html>

9.操作节点

1.节点创建

2.插入节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <P class="p1">这是一个p标签1</P>
        <P>这是一个p标签2</P>
    </div>
</body>
<script>
    let em1=document.createElement('h1')
    em1.innerHTML='这是创建的节点1'
    let em2=document.createElement('h1')
    em2.innerHTML='这是创建的节点2'
    let div=document.querySelector('div')
    div.appendChild(em1)
    div.insertBefore(em2,document.querySelector('.p1'))
</script>
</html>

注意1: 如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)

注意2: 一旦一个节点插入完毕, 再针对刚刚的节点对象进行修改, 能够同步影响到 DOM 树中的内容.

3.删除节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div id="delete">4</div>
    </div>
</body>
<script>
    let parent=document.querySelector('.container')
    let child=document.querySelector('#delete')
    let elemet=parent.removeChild(child)
    console.dir(elemet)
    parent.appendChild(child)
</script>
</html>

# javascript # 开发语言 # ecmascript
Logo
亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

avatar 亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

avatar 亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责

avatar 亚马逊云科技技术品牌专区