JavaScript Web API

我要满血复活

于 2024-09-19 23:33:57 发布

阅读量641

点赞数 8

分类专栏：前端技术文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_79881188/article/details/142311113

版权

前端技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 背景知识

前面学习的 JS 分成三个大的部分

ECMAScript: 基础语法部分
DOM API: 操作页面结构
BOM API: 操作浏览器

Web API 就包含了 DOM + BOM；API，全称 Application Programming Interface，即应用程序编程接口，本质上就是一些现成的函数 / 对象 , 让程序员拿来就用 , 方便开发。

JavaScript Web API 是一系列用于在客户端脚本中与浏览器功能交互的接口。它们允许开发者创建丰富的、动态的和互动的网页应用程序。Web API 包括但不限于操作文档对象模型（DOM）、处理事件、发送网络请求、存储数据以及使用设备功能等。

API 参考文档

https://developer.mozilla.org/zh-CN/docs/Web/API

2. DOM

基本概念

DOM 全称为 Document Object Model，即 " 文档对象模型 " .

W3C 标准给我们提供了一系列的函数 , 让我们可以操作 :

网页内容
网页结构
网页样式

DOM 树结构形如

重要概念 :

文档 : 一个页面就是一个文档 , 使用 document 表示 .

元素 : 页面中所有的标签都称为元素 . 使用 element 表示 .

节点 : 网页中所有的内容都可以称为节点 ( 标签节点 , 注释节点 , 文本节点 , 属性节点等 ). 使用 node

表示 .

这些文档等概念在 JS 代码中就对应一个个的对象 .

获取元素

querySelector

querySelector 是 JavaScript 中的一个方法，它属于 Document 对象。这个方法使用 CSS 选择器来选取文档中的单个元素。如果页面中有多个元素匹配提供的选择器，querySelector 只会返回第一个匹配的元素。如果没有元素匹配，则返回 null。

let element = document.querySelector(selectors);

因为参数是选择器 , 所以一定要通过特殊符号指定是哪种选择器, 例如 .box 是类选择器 , #star 是 id 选择器等 .

<body>
    <div class="box">aaaaaa</div>
    <div id="star">bbbbbb</div>
</body>
<script>
    // 获取页面中第一个具有类名 ".box" 的元素
    let element1 = document.querySelector(".box");
    console.log(element1);
    // 获取页面中第一个具有 ID "#star" 的元素
    let element2 = document.querySelector("#star");  
    console.log(element2);
</script>

querySelectorAll

let elements = document.querySelectorAll(selectors);

使用 querySelectorAll 用法和 querySelector 类似. 这个方法用于选取文档中所有匹配给定 CSS 选择器的元素，并将它们作为一个 NodeList 对象返回。与 querySelector 方法只能返回第一个匹配元素不同，querySelectorAll 返回所有匹配的元素。

<body>
    <div class="box">aaaaaa</div>
    <div id="star">bbbbbb</div>
</body>
<script>
    let elements=document.querySelectorAll("div");
    console.log(elements);
</script>

事件

JS 要构建动态页面 , 就需要感知到用户的行为，用户对于页面的一些操作( 点击 , 选择 , 修改等 ) 操作都会在浏览器中产生一个个事件 , 被 JS 获取到 , 从而进行更复杂的交互操作。

事件三要素

1. 事件源 : 哪个元素触发的

2. 事件类型 : 是点击 , 选中 , 还是修改 ?

3. 事件处理程序 : 进一步如何处理，往往是一个回调函数。

示例：

<body>
    <input type="button" id="btn" value="点我一下">
</body>
<script>
    let element=document.querySelector("#btn");
    element.onclick=function() {
        alert("hello");
    }
</script>

btn 按钮就是事件源.
点击就是事件类型
function 这个匿名函数就是事件处理程序

其中 btn.onclick = function() 这个操作称为 注册事件 / 绑定事件

注意 : 这个匿名函数相当于一个回调函数 , 这个函数不需要程序员主动来调用 , 而是交给浏览器 , 由浏览器自动在合适的时机( 触发点击操作时 ) 进行调用 .

操作元素

获取/修改元素内容

innerText

// 读操作
let content = element.innerText;
// 写操作
element.innerText = string;

innerText 是HTML DOM属性，用于获取或设置元素及其所有子元素的文本内容。与innerHTML相比，innerText 不会返回HTML标签，而是返回纯文本内容。这意味着使用innerText 时，所有的HTML标记都会被忽略，只显示文本本身。

<body>
     <div>
        <span>hello world</span>
        <span>hello world</span>
     </div>
</body>
<script>
    let elements=document.querySelector("div");
    console.log(elements);
    elements.innerText="你好世界<span>hello world</span>";
</script>

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

innerHTML

// 读操作
let content = element.innerHTML;
// 写操作
element.innerHTML = htmlString;

innerHTML是HTML DOM属性，用于获取或设置元素内部的HTML内容。这个属性返回或允许你设置一个字符串，该字符串代表了元素的所有子节点，包括文本和嵌套的HTML元素。当你设置innerHTML属性时，浏览器会解析字符串中的HTML，并将其转换为DOM结构，从而更新元素的内容。

<body>
     <div>
        <span>hello world</span>
        <span>hello world</span>
     </div>
</body>
<script>
    let elements=document.querySelector("div");
    console.log(elements);
    elements.innerHTML="你好世界<span>hello world</span>";
</script>

可以看到 innerHTML 不光能获取到页面的 html 结构 , 同时也能修改结构。

获取/修改元素属性

可以通过 element 对象的属性来直接修改 , 就能影响到页面显示效果 .

<body>
     <img src="https://pic.nximg.cn/20110719/7170514_162629143000_2.jpg" alt="图片加载失败"
     title="这是一张玫瑰花图片">
</body>
<script>
    let element=document.querySelector("img");
    console.log(element);
</script>

选择元素模块后点击 img 的属性页面，此时可以看到 img 这个 Element 对象中部分属性如下

我们可以在代码中直接通过这些属性来获取属性的值，还可以直接修改属性。

<body>
     <img src="https://pic.nximg.cn/20110719/7170514_162629143000_2.jpg" alt="图片加载失败"
     title="这是一张玫瑰花图片">
</body>
<script>
    let element=document.querySelector("img");
    console.log(element);
    console.log(element.src);//获取属性
    element.title="已经改好了标题";//修改属性
    element.onclick=function()//设置属性
    {
        alert("图片被点击了");
    };
</script>

获取/修改表单元素属性

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

value: input 的值.
disabled: 禁用
checked: 复选框会使用
selected: 下拉框会使用
type: input 的类型(文本, 密码, 按钮, 文件等)

代码示例 : 切换按钮的文本，假设这是个播放按钮, 在 " 播放 " - " 暂停 " 之间切换 .

<body>
     <input type="button" value="播放">
</body>
<script>
    let btn=document.querySelector("input");
    btn.onclick=function()
    {
        if(btn.value=="播放")
        btn.value="暂停";
        else
        btn.value="播放";
    }
</script>

代码示例 : 全选 / 取消全选按钮

1. 点击全选按钮 , 则选中所有选项。

2. 只要某个选项取消 , 则自动取消全选按钮的勾选状态。

<body>
      <input type="checkbox" id="all">全选/取消全选<br>
      <input type="checkbox" class="dishes">红烧肉<br>
      <input type="checkbox" class="dishes">烤鸭<br>
      <input type="checkbox" class="dishes">辣子鸡<br>
      <input type="checkbox" class="dishes">干炒鱿鱼<br>
</body>
<script>
    //1.获取元素
    let all=document.querySelector("#all");
    let dishes=document.querySelectorAll(".dishes");
    //2.给 all 注册点击事件, 选中/取消所有选项
    all.onclick=function()
    {
        for(let i =0;i<dishes.length;i++)
        dishes[i].checked=all.checked;
    }
</script>

获取/修改样式属性

CSS 中指定给元素的属性 , 都可以通过 JS 来修改 .

行内样式操作

element.style.[属性名] = [属性值];
element.style.cssText = [属性名+属性值];

" 行内样式 ", 通过 style 直接在标签上指定的样式，优先级很高，适用于改的样式少的情况。

代码示例 : 点击文字则放大字体 .

<body>
    <div style="font-size: 20px; font-weight: 700;">哈哈哈哈哈哈哈哈哈哈</div>
</body>
<script>
    let element = document.querySelector("div");
    element.onclick = function () {
        let size = parseInt(this.style.fontSize);//将字符串转换成数字
        size += 10;
        this.style.fontSize = size + "px";
    }
</script>

类名样式操作

element.className = [CSS 类名];

修改元素的 CSS 类名，适用于要修改的样式很多的情况，由于 class 是 JS 的保留字 , 所以名字叫做 className。

代码示例 : 开启夜间模式

<body>
    <div class="container light">
        哈哈哈哈哈哈<br>
        嘿嘿嘿嘿嘿嘿<br>
    </div>

    <style>
        /* HTML文档的body元素宽度和高度都设置为100%,意味着body元素将会填满
        整个浏览器窗口，无论用户屏幕大小或分辨率如何，都能实现全屏效果。 */
        html,body {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
        }

        .ligth {
            background-color: white;
            color: black;
        }

        .dark {
            background-color: black;
            color: white;
        }
    </style>
</body>
<script>
    let element = document.querySelector("div");
    element.onclick = function () {
        if (element.className.indexOf("light") != -1)
            element.className = "container dark";
        else
            element.className = "container light";
    }
</script>

操作节点

新增节点

分成两个步骤

1. 创建元素节点

2. 把元素节点插入到 dom 树中

使用 createElement 方法来创建一个元素：

let element = document.createElement(tagName);

代码示例：

<body>
    <div class="d1">哈哈哈哈哈哈</div>
</body>
<script>
    let div = document.createElement("div");
    div.innerHTML = "这是新增结点";
    div.className = "d2";
    console.log(div);
</script>

此时发现 , 虽然创建出新的 div 了 , 但是 div 并没有显示在页面上 . 这是因为新创建的节点并没有加入到 DOM 树中。

上面介绍的只是创建元素节点 , 还可以使用 :

createTextNode 创建文本节点
createComment 创建注释节点
createAttribute 创建属性节点

插入节点到 dom 树中

1) 使用 appendChild 将节点插入到指定节点的最后一个孩子之后

element.appendChild(parent)

<body>
    <div class="d1">这是第一段话</div>
    <div class="d2">这是第二段话</div>
    <div class="d3">这是第三段话</div>
</body>
<script>
    let div = document.createElement("div");
    div.innerHTML = "这是新增结点";
    div.className = "d4";
    console.log(div);
    let parent = document.querySelector(".d1");
    parent.appendChild(div);
</script>

可以看到新增结点放在了 d1 结点之后。

2) 使用 insertBefore 将节点插入到指定节点之前 .

let insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertedNode 被插入节点(newNode)
parentNode 新插入节点的父节点
newNode 用于插入的节点
referenceNode newNode 将要插在这个节点之前

如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾 .

<body>
    <div class="container">
        <div class="d1">这是第一段话</div>
        <div class="d2">这是第二段话</div>
        <div class="d3">这是第三段话</div>
    </div>
</body>
<script>
    let div = document.createElement("div");
    div.innerHTML = "这是新增结点";
    div.className = "d4";
    console.log(div);
    let parent = document.querySelector(".container");
    parent.insertBefore(div,parent.children[2]);
</script>

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

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

删除节点

使用 removeChild 删除子节点

let oldChild = element.removeChild(child);

child 为待删除节点, element 为 child 的父节点, 如果上例中的 child 节点不是 element 节点的子节点,则该方法会抛出异常.
返回值为该被删除节点, 被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位置.

<body>
    <div class="container">
        <div class="d1">这是第一段话</div>
        <div class="d2">这是第二段话</div>
        <div class="d3">这是第三段话</div>
    </div>
</body>
<script>
    let parent = document.querySelector(".container");
    let oldchild = parent.removeChild(parent.children[1]);
    parent.appendChild(oldchild);
</script>

上述代码中删除掉 d2 结点然后再将该结点加入到 parent 的最末结点。