JavaScript(WebAPI)

最新推荐文章于 2024-11-07 13:38:59 发布

Living_Amethyst

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量615

点赞数 7

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

本文链接：https://blog.csdn.net/Living_Amethyst/article/details/127002988

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

WebAPI

上次我们已经介绍到 JavaScript分成三个大的部分

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

WebAPI 就包含了 DOM + BOM

所谓的 API 本质上就是一些现成的函数/对象, 让程序员拿来就用, 方便开发

API参考文档

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

可以在搜索引擎中按照 “MDN + API 关键字” 的方式搜索, 也能快速找到需要的 API 文档

1 获取元素

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

1.1 querySelector

一个页面上，有很多HTML标签，每个标签(tag)也称为是一个元素(element)，获取元素，就类似于，操作数据库时得先use 一下数据库

JS获取元素的方式有很多种，此处介绍一种最强大最通用的方式

querySelector

var element = document.querySelector(selectors);

参数selectors包含一个或多个要匹配的选择器的 DOM字符串，该字符串必须是有效的CSS选择器字符串，如果不是则引发异常（简单来说就是括号里放的是选择器）
element表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素
如果需要一次选择与指定选择器匹配的全部元素，则使用querySelectorAll()
document是一个页面中内置的全局对象（由浏览器提供），当页面加载成功，显示出来时，document就有了。我们可以在任何元素上调用querySelector，不仅仅是 document。调用后，调用这个方法的元素将作为本次查找的根元素
此时就可以通过element来表示这个标签，同时可以通过element获取到标签里的属性，也可以用来修改了

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

<div class="box">abc</div>
<div id="id">def</div>
<h3><span><input type="text"></span></h3>
<script>
    var elem1=document.querySelector('.box');
    console.log(elem1);
    var elem2 = document.querySelector('#id');
    console.log(elem2);
    var elem3 = document.querySelector('h3 span input');
    console.log(elem3);
</script>

1.2 querySelectorAll

使用 querySelectorAll 用法和上面类似

<div class="box">abc</div>
<div id="id">def</div>
<script>
   var elems = document.querySelectorAll('div');
   console.log(elems);
</script>

关于这两个，值得注意的是querySelector和 querySelectorAll 是属于新版本HTML中支持的，针对一些比较老的浏览器，可能无法使用，不过当前使用的主流浏览器chrome这些肯定没问题

2 事件

何为事件？

简单来说，就是用来实现和用户交互的关键操作

用户针对浏览器页面的每个动作就可以视为是”事件“

用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作

事件三要素

事件源: 触发事件的元素(标签)
事件类型: 描述事件具体是啥，是点击还是选择还是按键盘
事件处理程序: 事件出现之后要执行哪个代码

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

对于这个

事件源就是 btn按钮
事件类型就是点击
事件处理程序就是 function
其中 btn.onclick = function() 这个操作称为注册事件/绑定事件

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

3 操作元素

3.1 获取/修改元素

3.1.1 innerHTML

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代

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

注：element 为一个元素（如HTML的一个标签）

识别 html 标签. W3C 标准的. 读取结果保留html源码中的换行和空格

示例

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 读取页面内容
    console.log(div.innerHTML);
    // 修改页面内容
    div.innerHTML = '<span>hello js</span>'
</script>

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

3.1.2 获取/修改元素属性

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

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    console.dir(img); //显示img标签的属性
</script>

此时可以看到 img 这个 Element 对象中有很多属性

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

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    // console.dir(img);
    console.log(img.src);
    console.log(img.title);
    console.log(img.alt);
</script>

我们通过控制台查看获取到的属性

我们还可以直接修改属性

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    img.onclick = function () {
        if (img.src.lastIndexOf('rose.jpg') !== -1) {
            img.src = './rose2.png';
        } else {
            img.src = './rose.jpg';
        }
    }
</script>

此时点击图片就可以切换图片显示状态. (需要提前把两个图片准备好)

3.1.3 代码示例

代码示例：写一个计数器

使用一个div来显示一个整数

每次点击按钮，数字都会 + 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .screen{
            width: 200px;
            height: 100px;
            margin: 0 auto;
            background-color: grey;
            color: white;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
            border-radius: 10px;
        }
        .add-btn{
            margin: 10px auto;
            width: 200px;
            height: 50px;
            font-size: 20px;
            line-height: 50px;
            display: block;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="screen">0</div>
    <button class="add-btn">+</button>

        <script>
            let addBtn = document.querySelector(".add-btn");
            let screen = document.querySelector(".screen");
            addBtn.onclick = function() {
                //1.先拿到 screen 里面的数值
                let number = screen.innerHTML;
                //2.针对number加1，由于innerHTML拿到的是String，要进行算术运算需要String=》number
                number = parseInt(number);
                number += 1;
                //3.写回到元素中
                screen.innerHTML = number;
            }
        </script>
</body>
</html>

效果：

点击计数器

注：浏览器是有内置的调试工具的，我们可以用浏览器中的调试工具对我们的代码进行调试

代码示例：密码框点击切换显示密码/隐藏密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="password">
    <button>显示密码</button>
    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick = function() {
            if(input.type == 'text'){
                input.type = 'password';
                button.innerHTML = '显示密码';
            }else if(input.type == 'password'){
                input.type = 'text';
                button.innerHTML = '隐藏密码';
            }
        }
    </script>
</body>
</html>

效果展示

密码点击

3.2 获取/修改样式属性

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

3.2.1 行内样式操作

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

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

代码示例：点击文字则放大文字

style 中的属性都是使用驼峰命名的方式和 CSS 属性对应的.
例如: font-size => fontSize, background-color => background Color 等
这种方式修改只影响到特定样式, 其他内联样式的值不变

<body>
    <div>修勾崽崽</div>
    <script>
        //先选中div，然后通过 点击事件 来修改文字大小
        let div = document.querySelector('div');
        div.onclick = function() {
            //修改div的元素中文字的大小
            //div.style = 'font-size: 100px';   这是写法一
            div.style.fontSize = '100px';
        }
    </script>
</body>

3.2.2 类名样式操作

element.className = [CSS 类名];

修改元素的 CSS 类名. 适用于要修改的样式很多的情况

由于 class 是 JS 的保留字, 所以名字叫做 className

代码示例：开启夜间模式

日间模式

夜间模式

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 日间模式 */
        .light {
            color: black;
            background-color: white;
        }
        .dark {
            color: white;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="light">
        这是一大段话. <br>
        这是一大段话. <br>
        这是一大段话. <br>
        这是一大段话. <br>
    </div>
    <script>
        let div = document.querySelector('div');
        div.onclick = function() {
            if(div.className == 'light'){
                div.className = 'dark';
            } else{
                div.className = 'light';
            }
        }
    </script>
</body>
</html>

像某些网页的日间/夜间模式切换就是这样来完成操作的

4 操作节点

上面介绍的是操作一个元素里面的东西

接下来要说的操作节点，这个是针对页面上的元素进行增、删

4.1 新增节点

分成两个步骤

创建元素节点
把元素节点插入到 dom 树中

第一步相当于生了个娃, 第二步相当于给娃上户口

4.1.1 创建元素节点

使用 createElement 方法来创建一个元素. options 参数暂不关注

var element = document.createElement(tagName[, options]);

代码示例：

<div class = "container">
    <div>这是之前的div</div>
</div>

<script>
    //创建一个新的div标签
    let div = document.createElement('div');
    div.innerHTML = '这是新创建的 div';
    div.id = 'one';
    div.className = 'one-div';
    div.style.fontSize = '50px';

    console.log(div);
        
</script>

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

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

createTextNode 创建文本节点

createComment 创建注释节点

createAttribute 创建属性节点

我们以 createElement 为主即可

4.1.2 插入节点到 dom 树中

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

步骤是：先确定要把新元素放到哪个父节点下，再根据父节点，使用appendChild方法

我们在刚才的代码上加上这个操作

<div class = "container">
    <div>这是之前的div</div>
</div>

<script>
    //创建一个新的div标签
    let div = document.createElement('div');
    div.innerHTML = '这是新创建的 div';
    div.id = 'one';
    div.className = 'one-div';
    div.style.fontSize = '50px';

    console.log(div);
    
    //获取到  container对象
    let container = document.querySelector('.container');
    container.appendChild(div);//把新创建的div插入到 container
</script>

如图，这就插入成功了

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

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

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

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

注意: referenceNode 引用节点不是可选参数

4.2 删除节点

使用 removeChild 删除子节点

oldChild = element.removeChild(child);

先确定要删除的父节点
再确定要删除的节点
使用 removeChild 删除子节点

示例：点击删除新创建的div

<div class = "container">
    <div>这是之前的div</div>
    
    <button>删除新创建的div</button>
</div>

<script>
    //创建一个新的div标签
    let div = document.createElement('div');
    div.innerHTML = '这是新创建的 div';
    div.id = 'one';
    div.className = 'one-div';
    div.style.fontSize = '50px';

    console.log(div);
    
    //获取到  container对象
    let container = document.querySelector('.container');
    container.appendChild(div);//把新创建的div插入到 container
    
    let button = document.querySelector('button');
    button.onclick = function() {
        container.removeChild(div);
    }
</script>

效果展示

点击删除新创建的div