设计好看的网站,市场营销手段有哪四种,内部网站 备案,温州哪里有做网站目录
JavaScript与WebAPI
WebAPI简介
DOM
获取元素
事件
事件三要素
常见的事件类型
获取修改元素属性
基本介绍和使用
案例1#xff1a;实现文本框内数字计数
案例2#xff1a;实现“全部选中”按钮触发时相应的效果#xff08;worth trying for a freshman修改元素属性
基本介绍和使用
案例1实现文本框内数字计数
案例2实现“全部选中”按钮触发时相应的效果worth trying for a freshman
获取修改元素样式
基本介绍与使用
节点与其操作
创建节点
插入节点
删除节点 JavaScript与WebAPI
WebAPI简介
JavaScript分为三个部分
JavaScript基础语法ECMAScriptDOM API操作页面结构BOM API操作浏览器
WebAPI就包括了DOM和BOM
API所谓API就是已经实现的函数或者接口专门提供给需要使用的调用
WebAPI参考文档Web API | MDN (mozilla.org)
本篇文章主要讲述DOM DOM
DOM 全称为 Document Object Model
W3C 标准给我们提供了一系列的函数, 让我们可以操作:
网页内容网页结构网页样式
DOM树一个页面的结构是一个树形结构称为 DOM 树
文档一个页面就是一个文档使用document表示
元素页面中所有的标签都称为元素使用element表示
节点网页中所有的内容都可以称为节点(标签节点注释节点文本节点属性节点等)使用 node表示
获取元素
在DOM操作中有两种常用的获取页面元素的函数分别是
querySelector默认情况下选中页面中第一次出现的匹配的指定元素第一个参数可以为HTML元素、类名或者id名querySelectorAll默认情况下选中页面中所有匹配的指定元素
例如下面的结构只展示body内部的内容
div classbox1box1/div
div classbox2box2/div
h1spaninput typetext/span
/h1
如果需要选中类名为box1的div就需要调用两个函数中的一个函数因为只需要选择其中一个类名为box1的div所以可以考虑使用querySelector函数但是querySelector都是对象函数所以需要使用一个对象来调用前面提到一个页面就是一个文档使用document表示所以使用document来调用querySelector函数。此时页面中有类名为box1和box2的两个div所以此时不可以在querySelector中使用div而应该使用其类名当前为box1或者id当前没有代码如下
document.querySelector(.box1);// 打印该函数返回的内容
console.log(document.querySelector(.box1));输出结果
div classbox1box1/div
querySelector函数还可以选择嵌套的元素例如对于一级标题元素中嵌套的文本框标签可以通过下面的方式选择
document.querySelector(h1).querySelector(span).querySelector(input)// 打印该函数返回的内容
console.log(document.querySelector(h1).querySelector(span).querySelector(input));输出结果
input typetext
如果需要选择页面中所有的div则需要使用querySelectorAll此时不要使用使用querySelector因为该函数找到第一个满足条件的元素就停止继续查找代码如下
document.querySelectorAll(div)// 打印输出结果
console.log(document.querySelectorAll(div)); 事件
在浏览页面时用户所做出的操作被称为一个事件该事件一般包括点击、按下等
事件三要素
事件三要素分为
事件源触发事件的元素可以理解为事件元事件类型如何触发该事件点击、按下等事件处理程序触发事件后该如何处理该事件一般为一个回调函数
常见的事件类型
常见的事件类型有
鼠标点击可以使用onclick属性键盘键按下可以使用onkeydown属性或者onkeypress属性键盘键抬起可以使用onkeyup属性
例如实现一个鼠标点击按钮后弹出窗口显示内容的效果可以写为下面的形式
button点击/button
点击后对应执行的行为如下
// 获取到页面中的元素找到事件源
let btn document.querySelector(button);
// 确定事件类型并给出后续处理
btn.onclick function () {alert(Hello World!);
}
如果是对于键盘事件来说则考虑下面的几种事件例子
键盘按下时在控制台中打印内容
使用结构如下
input typetext
对应的行为如下
let input document.querySelector(input);
input.onkeydown function () {console.log(按下了键盘);
}
如果想实现读取到按下的键可以使用event对象作为函数参数该对象中存储了事件的相关属性
// 获取事件源
let input document.querySelector(input);
input.onkeydown function (event) {let key event.key; // 获取按键console.log(key);
}
当按键抬起时弹窗也是同样的思路
// 获取事件源
let input document.querySelector(input);
input.onkeyup function () {alert(按键抬起);
}
获取修改元素属性
基本介绍和使用
当用户也页面交互时有时需要对不同的操作显示不同的结果这其中包括对网页已有元素属性的修改下面以修改input元素中的部分属性为例
首先先查看input元素有哪些属性可以使用console.dir()打印对应元素的属性代码如下
console.dir(document.querySelector(input));
在浏览器调试工具控制台中可以看到input标签的所有可用属性下面是部分属性截图 想要修改元素属性就需要在JavaScript代码中指定修改的属性例如实现默认情况下input的type属性是button当点击按钮时修改input的type属性为text并将默认的value值修改为text属性清空添加占位内容
结构代码如下
input typebutton onclickchange() value点击我输入文字
行为代码如下
// 获取事件源
let input_element document.querySelector(input);
// 触发事件时改变元素属性
function change() {input_element.type text;input_element.value ;input_element.placeholder 请输入文字;
}
案例1实现文本框内数字计数
案例介绍有一个文本框文本框的右侧有两个按钮分别代表和-当鼠标按下时文本框内的数字增加对应增量当鼠标按下-时文本框内数字减少对应增量。这里提供增量为1
结构设计
input classnum typetext value0
input classincrease typebutton value1
input classdecrease typetext value-1
行为设计
// 获取事件源
let num document.querySelector(.num);
// 增加
let increase document.querySelector(.increase);
increase.onclick function () {num.value parseInt(num.value) 1;
}// 减少
let decrease document.querySelector(.decrease);
decrease.onclick function () {num.value parseInt(num.value) - 1;
}
案例2实现“全部选中”按钮触发时相应的效果worth trying for a freshman
案例介绍本案例中一共有5个复选框1个内容为「全部选中」下面称为父复选框四个内容为「选项」下面称为子复选框
如果父复选框选中子复选框全部被选中如果有其中一个子复选框未被选中则父复选框更改为未被选中如果四个子复选框额外全部选中则父复选框自动选中
结构如下
forminput classall typecheckbox namechoose全部选中 brinput classselect typecheckbox namechoose选项1 brinput classselect typecheckbox namechoose选项2 brinput classselect typecheckbox namechoose选项3 brinput classselect typecheckbox namechoose选项4 br
/form
行为代码如下
// 当父复选框选中时子复选框全部选中否则全部不选中
let parent document.querySelector(.all);
let children document.querySelectorAll(.select);
parent.onclick function () {for (let i 0; i children.length; i) {children[i].checked parent.checked;}
}// 当子复选框有一个取消父复选框取消如果子复选框全部选中父复选框选中
for (let i 0; i children.length; i)
{// 当子复选框有一个取消父复选框取消children[i].onclick function () {parent.checked isCheck(children);}
}// 判断子复选框是否全部选中
function isCheck() {for (let i 0; i children.length; i) {// 如果有一个子复选框未选中返回falseif (!children[i].checked) {return false;}}// 如果子复选框全部选中返回truereturn true;
}
获取修改元素样式
基本介绍与使用
前面获取到了元素的属性接下来就是获取元素的样式方式与前面基本一致只是需要使用到下面的格式
// 行内样式
element.style.[属性名] [属性值];
element.style.cssText [属性名属性值];// 内部样式
element.className [CSS 类名];
假设需要对一个一级标题的文字进行修改当鼠标点击时改变颜色为红色字体变大则可以写为
行内结构代码如下
h1 stylecolor: aquamarine;这是一级标题/h1
对应行为代码如下
let header document.querySelector(h1);
header.onclick function () {header.style.color red;header.style.fontSize 50px;// 也等价于// header.style.cssText color:red; font-size:50px;
}
内部结构和样式如下
style.normal {color: aquamarine;}.change {color: red;font-size: 50px;}
/style
h1 classnormal这是一级标题/h1
对应行为代码如下
let header document.querySelector(.normal);
header.onclick function () { header.className change
}
节点与其操作
在网页中节点就是一个一个的HTML元素、文字、注释等实际存在于网页中的内容
创建节点
在WebAPI中可以使用createElement()函数创建节点使用一个变量接收创建的节点基本格式如下
let 变量 document.createElement(可作为节点的内容);
例如为网页创建一个一级标题标签
let new_node document.createElement(h1);
插入节点
前面创建了节点但是节点并没有插入到网页中所以网页body标签内也不存在插入的节点中的内容
一共有两种方式将节点插入到网页的DOM树中body标签中
使用appendChild()函数该函数由目标元素调用参数为插入的节点。这个函数会将节点默认插入到目标元素中最后一个子节点的后方例如下面的代码
结构代码如下
divp1/pp2/pp3/pp4/p
/div
行为代码如下
为了保证在插入的h1标签中有文字可以使用innerHTML插入文字给h1标签
let new_node document.createElement(h1);
// 找到目标节点
let parent document.querySelector(div);
new_node.innerHTML Hello World;
// 插入节点
parent.appendChild(new_node);
使用insertBefore()函数调用该函数可以指定节点的插入位置但是该方法的调用必须为父元素调用插入到任意子元素前方第一个参数为新增节点第二个参数为指定的子元素可以使用类名指定也可以使用其他方式指定例如firstChild等例如下面的代码
结构代码如下
divp classp11/pp classp22/pp classp33/pp classp44/p
/div
行为代码如下
let new_node document.createElement(h1);
// 找到目标节点
let parent document.querySelector(div);
new_node.innerHTML Hello World;
// 插入节点
parent.insertBefore(new_node, document.querySelector(.p3));
需要注意
如果第二个参数为不存在的元素或者是null则新节点将被插入到子节点的末尾如果针对一个节点插入两次则只有最后一次生效一旦一个节点插入完毕再针对刚刚的节点对象进行修改能够同步影响到 DOM 树中的内容
删除节点
使用removeChild()删除节点该函数返回被删除的节点调用对象必须是父元素参数为待删除的子节点
例如删除前面插入的新节点
parent.removeChild(new_node);
