作者:困了电视剧
专栏:《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 = '';
}
这是一个很简易的“信息墙”的代码片段,后面的博客中我会全部开源。
这一步是获取元素:
这是一个回调函数,当我点击按钮时,他会做这些步骤:
首先先是将各个输入框中的内容给取出来并判断正确性。
取出正确的数据后我们就需要构造新的元素,来讲这些内容添加进去,构造元素的两步一步都不能少。
文章来源:https://www.toymoban.com/news/detail-597559.html
以上就是本篇博客的全部内容,如有疏漏欢迎指正!文章来源地址https://www.toymoban.com/news/detail-597559.html
到了这里,关于【剧前爆米花--前端三剑客】JavaScript(WebAPI)中的相关方法和实例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!