一文搞懂傻傻分不清的手机摄像头CMOS,一文搞懂伤寒论六经辨证
这篇文章给大家带来了一些关于javascript的知识，主要介绍了JavaScript WebAPI的一些相关问题，包括WebAPI的背景知识、获取元素、操作元素、操作节点以及一些案例分享。下面就一起来看看吧，希望对你有帮助。
【相关推荐：javascript视频教程，web前端】
1. WebAPI 背景知识
1.1 什么是 WebAPI
JS分为三大部分：
ECMAScript:基础语法部分DOM API:操作页面结构BOM API:操作浏览器WebAPI包括DOM + BOM.。
1.2 DOM 基本概念
什么是 DOM
DOM称为文档对象模型。
W3C标准为我们提供了一系列可以操作的功能：
内容网页结构网页样式
DOM 树
页面的结构是一个名为DOM 树的树形结构。
重要概念：
文档:一个页面是一个文档，用文档来表示.元素:一个页面中的所有标签都称为元素。用element来表示.节点:一个网页中的所有内容都可以调用节点(标签节点、评论节点、文本节点、节点等。).它由节点表示。
2. 获取元素
2.1 querySelector
使用querySelector可以完全重用之前学过的CSS选择器知识，实现更快更准确的获取元素对象的方式。
语法格式：
let element=document . query selector(selectors)；选择器填写一个或多个选择器使用示例：。
一个abc /p
p id=two def /p
pinput type=text/p
脚本
let one=document.querySelector(。一’)；
console.log(一个)；
let two=document . query selector(# two)；
console.log(两个)；
let three=document . query selector( input )；
console.log(三个)；
/script运行截图
2.2 querySelectorAll
如果您需要与指定选择器匹配的所有元素的列表，您应该使用querySelectorAll()
使用示例：
一个123/p
p id=two456/p
脚本
let PS=document . query selector all( p )；
console . log(PS)；
/script运行截图
3. 操作元素
3.1 获取/修改元素内容
1. innerText
element . innertext属性表示节点及其后代的“呈现”文本内容。
注：不识别 html 标签.它是非标准的(由IE发起)。读取结果不保留html源代码中的换行符和空格。
使用示例：
你好，世界
你好，世界
脚本
设p=document.querySelector(。两个’)；
console . log(p)；
p . inner text= span world hello/span ；
/script运行截图:
只有文本内容可以通过intranet内部的html结构获得无法获取to P .
2. innerHTML
Element.innerHTML属性设置或获取由HTML语法注意表示的元素的后代：
识别html标记。W3C标准。读取结果在html源代码中保留换行符和空格代码示例：。
你好，世界
你好，世界
脚本
设p=document.querySelector(。两个’)；
console . log(p)；
p . innerhtml= span world hello/span ；
/script运行截图：
Innerhtml不仅可以获取页面的html结构，还可以修改结构，获取的内容保留空格和换行符。
3.2 获取/修改元素属性
注：通过元素获取属性代码示例：。属性。
img src= male . png title== male alt= male
脚本
let img=document . query selector( img )；
img.onclick=function() {
If(img.title.lastIndexOf(男性)！=-1){
img . src= female . png ；
Img.title=女性；
}否则{
img . src= male . png ；
Img.title= male
}
}
/script运行结果：
3.3 获取/修改表单元素属性
:
代码示例1: 播放 暂停的转换.
输入类型=按钮值=播放脚本
let input=document . query selector( input )；
input.onclick=function() {
If(input.value== play) {
input . value=“pause”；
}否则{
Input.value= play
}
}/脚本运行截图：
代码示例2: 计数
输入类型=text 值=0 id=one
输入类型=按钮值=点击1 id=add
脚本
让一个=文档。查询选择器(# one)；
让add=document。查询选择器(" # add ")；
add.onclick=function() {
一。价值；
}
/脚本
代码示例3: 全选/取消全选按钮
h3选择你喜欢玩的游戏/h3
输入类型=复选框 class=游戏王者荣耀br/
输入类型=复选框 class=游戏和平精英br/
输入类型=复选框 class=游戏开心消消乐br/
输入类型=复选框 class=游戏我的世界br/
输入类型=复选框 class=全部全选脚本
让游戏=文档。查询选择器全部(.游戏);
let all=document.querySelector( .all’)；
all.onclick=function(){
对于(设I=0；一。游戏长度；i ) {
游戏[我]。checked=all.checked
}
}
对于(设I=0；一。游戏长度；i ) {
游戏[我]。onclick=function() {
全部。checked=全部选中()；
}
}
函数allChecked() {
对于(设I=0；一。游戏长度；i ) {
如果(!游戏[我]。已检查){
返回错误的
}
}
返回真实的
}
/script运行截图
3.4 获取/修改样式属性
CSS中指定给元素的属性，都可以通过射流研究…来修改
1. 行内样式操作
element.style.[属性名]=[属性值];element.style.cssText=[属性名属性值];
代码示例： 字体变大
p style= font-size:20px；颜色：红色你好/p
脚本
设p=文档。查询选择器(“p”)；
p.onclick=function() {
让fontSize=parse int(p . style。fontSize)；
fontSize=10
p。风格。字体大小=字体大小 px ；//注意有单位的要带上单位
}
/script运行截图：
2. 类名样式操作
元素类名];
代码示例： 背景颜色变化
款式
html，正文{
身高：100%;
宽度：100%;
}
p {
身高：100%;
宽度：100%;
}。黑色{
背景色：黑色；
颜色：灰色；
}。灰色{
背景色：灰色；
颜色：黑色；
}
/风格
黑色的
你好！
/p
脚本
设p=文档。查询选择器(“p”)；
p.onclick=function() {
if(p.className.indexOf(black )！=-1){
格雷；
}否则{
布莱克；
}
}
/script运行截图：
4. 操作节点
4.1 新增节点
分为两个步骤：
创建元素节点
创建元素创建元素节点。
创建文本节点创建文本节点
创建评论创建注释节点
创建属性创建属性节点插入节点到数字正射影像图树中
使用appendChild将节点插入到指定节点的最后一个孩子之后
使用插入之前将节点插入到指定节点之前
代码示例：
p class=测试
/p
脚本
设p=文档。createelement( p )；
p.id= myp
一个；
p.innerHTML=呵呵；
let test=document.querySelector( .测试);
测试。appendchild(p)；
/script运行截图：
代码示例： 当一个节点插入两次，相当于移动.
p class=parent
p1/p
p2/p
p3/p
p4/p
/p
脚本
让子代=文档。createelement( p )；
child.innerHTML= 100
让父代=文档。查询选择器(.父);
//本来有四个元素，0号元素没有，就插入一个元素
parent.insertBefore(child，parent。儿童[0])；
//插入到2号元素前，1号元素是一不是儿童，2岁号元素是2.
parent.insertBefore(child，parent。儿童[2])；
/script运行结果：
4.2 删除节点
使用移除孩子删除子节点
老孩子=元素。移除子对象(子对象)；注：如果儿童不是元素的子节点，会抛异常
代码示例：
p class=parent
p class=child1/p
p class=" child " 2/p
p儿童3/p
/p
脚本
让父代=文档。查询选择器(.父);
让childs=document。查询选择器全部(.子);
父母。删除childs(childs[1])；
/script运行结果：
5. 实现几个案例
5.1 猜数字
!DOCTYPE htmlhtml lang=enhead
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题猜数字/标题/床头
p class=parent
pinput type=button value=重新开始一局新游戏class=again/p
p
请输入要猜的数字：输入类型=text class=guessNum 输入类型=按钮值=猜按下
/p
p
已经猜的次数：span class=count0/span
/p
p
结果：span class=结果/span
/p
/p
脚本
让我猜num=document。查询选择器(.猜num’)；
让媒体=文档。查询选择器(.按);
让计数=文档。查询选择器(.计数);
让结果=文档。查询选择器(.结果);
设count count=0；
让猜测结果=数学。地板(数学。random()* 100)1；
press.onclick=function(){
计数计数
count.innerHTML=countCount
猜测数=parse int(猜测数。值)；
if(guessNumber==guessResult){
result.innerHTML=猜对了；
结果。style= color:red ；
} else if(猜数猜结果){
result.innerHTML=猜小了；
结果。style= color:blue ；
}否则{
result.innerHTML=猜大了；
结果。style= color:orange ；
}
}
再让=文档。查询选择器(.再一次);
again.onclick=function() {
猜测结果=数学。地板(数学。random()* 100)1；
count count=0；
数数。innerhtml=0；
猜num。值=" "；
结果。innerhtml=
}
/脚本/正文/html运行截图：
5.2 表白墙
!DOCTYPE htmlhtml lang=enhead
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题表白墙/标题/床头
p class=parent
p id=墙表白墙/p
p id=提醒输入后点击提交，会将信息显示在表格中/p
"一"是"二"谁：/spaninput type= text class= text /p
"一"是"二"对谁：/spaninput type= text class= text /p
"一"是"二"说什么：/spaninput type= text class= text /p
一个输入类型=按钮值=提交class=press/p
/p
风格
/* 去除浏览器默认样式*/
* {
边距：0;
填充：0;
}
/* 设置总宽度*/。父级{
宽度：400像素
边距：0自动；
}
/* 涉资表白墙样式*/
#墙{
字体大小：30px
字体粗细：700;
文本对齐：居中；
保证金：5px
}
/* 设置提示信息样式*/
#提醒{
字体大小：13px
文本对齐：居中；
颜色：灰色；
保证金：5px
}
/* 设置弹性布局*/。一个
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
高度：40px
}
/* 设置文字内容*/。两个
宽度：100像素
行高：40px
}
/* 设置输入框*/。一个。文本{
宽度：200像素
高度：20px
}
/* 提交按钮的设置*/。一个。按下{
宽度：304px
高度：40px
颜色：白色；
背景色：橙色；
边框半径：5px
边框：无；
}
/* 设置鼠标点击的时候改变颜色*/。一个。按：活动{
背景色：红色；
}
/* 提交之和内容的设置*/。元素{
文本对齐：居中；
}
/风格
脚本
//获取到输入框元素
让文本=文档。查询选择器全部(.text’)；
//获取到提交按钮元素
让媒体=文档。查询选择器(.按);
//设置单击事件
press.onclick=function() {
让user1=texts[0].价值；
让user2=texts[1].价值；
let message=texts[2].价值；
//如果有一个为空，就提交不成功
if(用户1== 用户2== 消息== ){
返回；
}
//这里都不为空，创建新的节点
让elem=document。createelement( p )；
elem . elem
elem.innerHTML=user1 对用户2 说： 消息；
//插入新的节点
让父代=文档。查询选择器(.父);
父母。追加子项(elem)；
//提交之后，将输入框置空。
对于(设I=0；i3；i ){
文本[我].值="";
}
}
/脚本/正文/html运行截图：
5.3 待办事项
!DOCTYPE htmlhtml lang=enhead
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题待办事项/标题/床头
p class=parent
一个
输入类型=text class=text 输入类型=按钮值=新建任务提交
/p
两个
向左
h3未完成/h3
/p
对的
h3已完成/h3
/p
/p
/p
风格
/* 去除浏览器默认样式*/
* {
边距：0;
填充：0;
}
/* 设置宽度*/。父级{
宽度：840像素
边距：0自动；
}
/* 设置输入框和新建的样式*/。一个
高度：50px
填充：20px
}
/* 设置输入框样式*/。一个。文本{
高度：50px
宽度：600像素
}
/* 设置提交框样式*/。一个。提交{
背景色：橙色；
颜色：白色；
高度：50px
宽度：196像素
边框：无；
}
/* 设置点击时的背景*/。一个。提交：活动{
背景色：红色；
}
/* 设置已完成和未完成的样式*/。两个
宽度：800像素
高度：800像素
显示器：flex
边距：0自动；
}
/* 设置未完成和已完成字体样式*/。两个h3 {
高度：50px
文本对齐：居中；
行高：50px
背景色：黑色；
颜色：白色；
}
/* 设置未完成左边的样式*/。左侧{
宽度：50%;
身高：100%;
}
/* 设置已完成右边的样式*/。右{
宽度：50%;
身高：100%;
}
/* 新建任务的样式*/。第{
高度：50px
显示器：flex
对齐-项目：居中；
}
/* 新建任务字体的样式*/。行跨度{
宽度：340像素
}
/* 新建任务的删除按钮样式*/。行按钮{
宽度：40px
高度：40px
}
/风格
脚本
//首先获取新建按钮元素
让提交=文档。查询选择器(.提交);
//设置鼠标单击事件
submit.onclick=function() {
//获取输入框元素
let text=document.querySelector( .text’)；
//判断输入框内容是否为空
if(text.value== )返回；
//新建代办事项
让row=document。createelement( p )；
row . class name=row
让复选框=文档。createelement(“input”)；
checkBox.type=复选框
让事物=文档。createelement(“span”)；
东西。innerhtml=text。价值；
让del=document。createelement( button )；
del.innerHTML=删除；
row.appendChild(复选框);
划。appendchild(事物)；
划。appendchild(del)；
//获取左边元素
let left=document.querySelector( .左);
向左。appendchild(row)；
//添加节点之后置空
文字。值=" "；
//设置选择框的鼠标单击事件
checkBox.onclick=function() {
//如果被选择了就移动已完成
//如果未完成就移动到未完成
如果(复选框。选中){
让目标=文档。查询选择器(.右);
目标。appendchild(row)；
}否则{
让目标=文档。q查询选择器( .左);
目标。appendchild(row)；
}
}
//设置删除按钮的鼠标单击事件
del.onclick=function() {
//使用节点获取到父节点
let parent=row.parentNode
//删除该节点
父母。移除子级(行)；
}
}
/脚本/正文/html运行截图：
【相关推荐：javascript视频教程、网络前端】以上就是一文搞懂JavaScript WebAPI的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。