Web前端最新JavaScript 常用API — WebAPI 详细介绍+实例描述(1)，腾讯前端开发面试记录

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

![在这里插入图片描述](https://img-blog.csdnimg.cn/fea10b98f78142a0878bf16094ab6276.png)

当 querySelector 的参数选择器，匹配到了多个元素的时候，此时返回的对象，就是匹配到了结果中的第一个元素。

那么下面 querySelectorAll 就能很好的应对这个问题

querySelectorAll

使用 querySelectorAll 用法和上面类似。

值得提的是：querySelectorAll 返回的不是一个真正的原生数组，而是一个对象，只不过这个对象，有 length(长度)，也能通过下标的方式来访问内部元素，这样的对象使用起来和数组非常相似，就把它称为“伪数组”。

JS 中的事件

---

事件 就是浏览器对于用户操作行为进行了一个 “统称”。JS 要构建动态页面, 就需要感知到用户的行为.

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

行更复杂的交互操作.

举一些例子来形象理解：

事件三要素：

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

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

3. 事件处理程序: 进一步如何处理. 往往是一个回调函数.(当事件产生之后，执行什么部分的JS代码)

“点击” 事件

先来看一个例子：

• button 按钮就是事件源.

• 点击就是事件类型

• function 这个匿名函数就是事件处理程序

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

注意: 这个匿名函数相当于一个回调函数, 这个函数不需要程序猿主动来调用, 而是交给浏览器, 由浏览器自动在合适的时机(触发点击操作时) 进行调用回调函数：这个函数不会立即调用，而是在合适的时机，被 库/框架 自动的调用。

操作元素

获取/修改元素内容

通过 对象 里面的一个属性 innerHTML 来实现，获取到元素的内容，进一步就可以来修改。

1. innerText

• 获取

  

通过 innerText 无法获取到 div 内部的 html 结构, 只能得到文本内容.

2.innerHTML

• 获取

  

• 修改

  

获取/修改元素属性

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

• 通过 console.dir 这个方法，打印出一个 DOM 对象的全部属性和值

获取/修改表单元素属性

表单(主要是指 input 标签)

因为 input 作为一个单标签，无法通过 innerHTML 来获取内容。

于是：

以下属性都可以通过 DOM 来修改。

• value: input 的值.

• disabled: 禁用

• checked: 复选框会使用

• selected: 下拉框会使用

• type: input 的类型(文本, 密码, 按钮, 文件等)

代码示例： 切换按钮的文本.

<input type="button" value="播放">

<script>

    var btn = document.querySelector('input');

    btn.onclick = function () {

        if (btn.value === '播放') {

            btn.value = '暂停';

        } else {

            btn.value = '播放';

        }

    }

</script>

由于这些代码展示的是一个动态的效果，大家可以自行取代码去自己本地实现，这里就不做运行效果。

代码示例: 点击计数

<input type="text" id="text" value="0">

<input type="button" id="btn" value='点我+1'>



<script>

    var text = document.querySelector('#text');

    var btn = document.querySelector('#btn');



    btn.onclick = function () {

        var num = +text.value;

        console.log(num);

        num++;

        text.value = num;

    }

</script>

• input 具有一个重要的属性 value, 这个 value 决定了表单元素的内容

• 如果是输入框, value 表示输入框的内容, 修改这个值会影响到界面显式; 在界面上修改这个值也会影响到代码中的属性

• 如果是按钮, value 表示按钮的内容. 可以通过这个来实现按钮中文本的替换

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

<input type="checkbox" id="all">我全都要 <br>

<input type="checkbox" class="girl">HTML<br>

<input type="checkbox" class="girl">CSS<br>

<input type="checkbox" class="girl">JavaScript<br>

<input type="checkbox" class="girl">Java <br>



<script>

    // 1. 获取到元素

    var all = document.querySelector('#all');

    var girls = document.querySelectorAll('.girl');

    // 2. 给 all 注册点击事件, 选中/取消所有选项

    all.onclick = function () {

        for (var i = 0; i < girls.length; i++) {

            girls[i].checked = all.checked;

        }

    }

    // 3. 给 girl 注册点击事件

    for (var i = 0; i < girls.length; i++) {

        girls[i].onclick = function () {

            // 检测当前是不是所有的 girl 都被选中了. 

            all.checked = checkGirls(girls);

        }

    }

    // 4. 实现 checkGirls

    function checkGirls(girls) {

        for (var i = 0; i < girls.length; i++) {

            if (!girls[i].checked) {

                // 只要一个 girl 没被选中, 就认为结果是 false(找到了反例)

                return false;

            }

        }

        // 所有 girl 中都没找到反例, 结果就是全选中

        return true;

    }

</script>

获取/修改样式属性

行内样式操作

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

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

类名样式操作

代码示例: 夜间模式/白天模式 切换

操作节点

新增节点

分成两个步骤

1. 创建元素节点

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

1. 创建元素节点

2. 插入节点到 dom 树中

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

树中.

1. 创建元素节点

2. 插入节点到 dom 树中

最后

[外链图片转存中…(img-rTxPsEX8-1715905216881)]

[外链图片转存中…(img-ger3SVjA-1715905216882)]

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。