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

这篇具有很好参考价值的文章主要介绍了【剧前爆米花--前端三剑客】JavaScript(WebAPI)中的相关方法和实例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作者:困了电视剧

专栏:《JavaEE初阶》

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

【剧前爆米花--前端三剑客】JavaScript(WebAPI)中的相关方法和实例,JavaEE初阶,javascript,开发语言,ecmascript,前端,vscode 

目录

什么是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树

【剧前爆米花--前端三剑客】JavaScript(WebAPI)中的相关方法和实例,JavaEE初阶,javascript,开发语言,ecmascript,前端,vscode

 文档: 一个页面就是一个 文档, 使用 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 = '';
            }

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

这一步是获取元素:

【剧前爆米花--前端三剑客】JavaScript(WebAPI)中的相关方法和实例,JavaEE初阶,javascript,开发语言,ecmascript,前端,vscode

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

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

 【剧前爆米花--前端三剑客】JavaScript(WebAPI)中的相关方法和实例,JavaEE初阶,javascript,开发语言,ecmascript,前端,vscode

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

【剧前爆米花--前端三剑客】JavaScript(WebAPI)中的相关方法和实例,JavaEE初阶,javascript,开发语言,ecmascript,前端,vscode

以上就是本篇博客的全部内容,如有疏漏欢迎指正!文章来源地址https://www.toymoban.com/news/detail-597559.html

到了这里,关于【剧前爆米花--前端三剑客】JavaScript(WebAPI)中的相关方法和实例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端三剑客 —— CSS (第三节)

    目录 上节回顾: 1.CSS使用有以下几种样式; 2.选择器         1.基本选择器         2.包含选择器         3.属性选择器 []         4.伪类选择器 :         5.伪元素选择器 ::before :after 3.常见样式的使用 常见样式参考表 一些特殊样式 媒体查询 自定义字体 变

    2024年04月08日
    浏览(49)
  • 『 前端三剑客 』:HTML常用标签

    在HTML中标签是以成对的结构出现的,在HTML当中代码是通过标签来组织的 , 下面通过见得的Hello World的展现来显示歘HTML 标签的结构 如上述代码块所示,形如 用尖括号进行组织的,成对出现的这个东西就叫做标签 (tag) , 也可以叫做元素(element); 通常情况下一个标签是成对出现的, 开

    2024年02月09日
    浏览(46)
  • 『 前端三剑客 』:CSS选择器

    上一篇文章我们介绍了 html 的常用标签及用法 , 这次我们来介绍 css 来对页面进行美化处理 css 全称 : 层叠样式表 (Cascading Style Sheets). 主要作用 : 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面 的效果. 能够做到 页面的样式和结构分离 . 一 . 基本语法 基本语

    2024年02月09日
    浏览(40)
  • 前端三剑客CSS篇——CSS选择器

    CSS是前端三剑客不可忽略的一部分,CSS对前端来说是一个美化页面的工具,而且其功能十分强大,程序员可以如果熟练运用的话可以‘随心所欲’的更改页面的样式,使得页面更加美观。 CSS标签是由 键值对 的模式来排列的。 CSS三大特征👍 学习CSS之前,先认识一下CSS的三大

    2024年02月04日
    浏览(44)
  • 前端三剑客 HTML+CSS+JavaScript ② HTML相关概念

    他们这样形容我 是暴雨浇不灭的火                                                       —— 24.4.18 学习目标         理解                 HTML的概念                 HTML的分类                 HTML的关系                 HTML的语义化         应用

    2024年04月23日
    浏览(55)
  • linux的三剑客

    1、grep命令 grep全称是Global Regular Expression Print,表示全局正则表达式版本,它的使用权限是所有用户。它是Linux系统中一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来。 shell脚本中也经常使用grep,因为grep通过返回一个状态值来说明搜索的结果

    2024年02月07日
    浏览(55)
  • Linux 三剑客

            grep主打的就是查找功能 ,它能够在一个或者多个文件中搜索某一特定的字符模式。         grep [选项] 模式 文件名 先说选项: 1.选项         要么是正则要么是字符串 -c       列出共出现多少次 -i        忽略大小写 -n       在前面列出行号 -v       列出没

    2024年02月11日
    浏览(42)
  • linux文本三剑客

    过滤/查找 参数 用法 作用 -i grep -i STRING xxx.txt 从xxx.txt文件查找不区分大小写STRING -w grep -w STRING xxx.txt 精确匹配STRING -e grep -e STRING1 -e STRING2 xxx.txt 查找多个STRING行 -n grep -n STRING xxx.txt 查看STRING 在第几行 -v grep -v STRING xxx.txt 输出不包含STRING的行 -r grep -r STRING DIR/ 查找DIR目录下哪

    2024年02月11日
    浏览(41)
  • 文本三剑客之 awk

    Linux/UNIX 系统中,awk 是一个功能强大的编辑工具。逐行读取输入文本 以空格作为分割符,多个空格他会自动压缩成一个空格 AWK信息的读入也是逐行指定的匹配模式进行查找,对符合条件的内容进行格式化输出或者过滤处理. 1按照命令找指定的行  2.找到的行 打印,操作 awk

    2024年02月08日
    浏览(41)
  • 网页三剑客之 HTML

    本章开始我们来介绍一下网页前端部分,我们只是简单的介绍一些常用的各种标签,其目的在于为我们后面的项目做准备。 我们并不要求能完全掌握前端的语法,但是在见到以后能够认识这些代码就可以了。 想走后端开发的,前端不需要多么熟悉,毕竟在各个企业中前后端

    2024年02月02日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包