【剧前爆米花--前端三剑客】JavaScript（WebAPI）中的相关方法和实例

作者：困了电视剧

专栏：《JavaEE初阶》

文章分布：这是一篇关于JavaScript（WebAPI）的文章，在这篇文章中我会简单介绍一些常用的js方法，并给出他们的应用实例，希望对你有所帮助！

 

目录

什么是WebAPI

DOM的基本概念

什么是DOM

DOM树

事件初识

基本概念

事件三要素

获取元素

querySelector

querySelectorAll

操作元素

innerText

innerHTML

操作节点

新增节点

举个栗子 

---

什么是WebAPI

我们学习的JavaScript主要分为三个大的部分：

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

JavaScript的基础语法主要学的是ECMAScript，这是基本的编程思维，但是当我们真正来写一个更加复杂的有交互式的页面，还需要 WebAPI 的支持。

DOM的基本概念

什么是DOM

DOM 全称为 Document Object Model.
W3C 标准给我们提供了一系列的函数, 让我们可以操作:网页内容，网页结构，网页样式。

DOM树

一个页面的结构是一个树形结构，成为DOM树

 文档: 一个页面就是一个 文档, 使用 document 表示.
元素: 页面中所有的标签都称为 元素. 使用 element 表示.
节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node表示

事件初识

基本概念

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

事件三要素

1. 事件源: 哪个元素触发的
2. 事件类型: 是点击, 选中, 还是修改?
3. 事件处理程序: 进一步如何处理. 往往是一个回调函数——这个函数不需要程序猿主动来调用，而是交给浏览器，由浏览器自动在合适的时机（出发点击操作时）进行调用。

获取元素

querySelector

前面的几种方式获取元素的时候都比较麻烦. 而使用 querySelector 能够完全复用 CSS 选择器知识, 达到更快捷更精准的方式获取到元素对象

selectors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString 。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常
表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象.
如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素

querySelectorAll

querySelectorAll和querySelector类似，只是其会拿出与指定选择器匹配的所有元素的列表。

操作元素

innerText

Element.innerText 属性表示一个节点及其后代的“渲染”文本内容

innerHTML

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

操作节点

新增节点

新增一个节点，即在页面中新增加一个元素分为两个步骤：

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

只有完成这两步，我们才能在网页上看到我们新增的元素。 

举个栗子 

        // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示.
        // 点击的时候, 获取到三个输入框中的文本内容
        // 创建一个新的 div.row 把内容构造到这个 div 中即可.
        
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('#submit');
        button.onclick = function() {
            // 1. 获取到三个输入框的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if (from == '' || to == '' || msg == '') {
                return;
            }
            // 2. 构造新 div
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row message';
            rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
            containerDiv.appendChild(rowDiv);
            // 3. 清空之前的输入框内容
            for (let input of inputs) {
                input.value = '';
            }

这是一个很简易的“信息墙”的代码片段，后面的博客中我会全部开源。

这一步是获取元素：

这是一个回调函数，当我点击按钮时，他会做这些步骤：

首先先是将各个输入框中的内容给取出来并判断正确性。 

 

取出正确的数据后我们就需要构造新的元素，来讲这些内容添加进去，构造元素的两步一步都不能少。 

以上就是本篇博客的全部内容，如有疏漏欢迎指正！