C1 能力认证——Web进阶
DOM节点操作-上
| 名称 | 描述 |
|---|---|
getElementById() |
获取带有指定id的节点 |
getElementsByTagName() |
获取带有指定标签名的节点集合 |
querySelector() |
获取指定选择器或选择器组匹配的第一个节点 |
querySelectorAll() |
获取指定选择器或选择器组匹配的所有节点集合 |
除了函数方法，我们还可以使用属性来获取节点信息，下表介绍了一些获取元素节点信息常用的属性。
| 名称 | 描述 |
|---|---|
| innerHTML | 返回元素内包含的所有HTML内容（文本和标签），类型为字符串 |
| parentNode | 返回指定节点的父节点 |
| children | 返回指定元素的子元素节点集合 |
| firstElementChild | 返回指定元素的第一个子元素节点 |
| lastElementChild | 返回指定元素的最后一个子元素节点 |
| 名称 | 描述 |
|---|---|
getAttribute() |
返回元素一个指定的属性值 |
| 直接使用属性名称获取 | 适用于部分属性（如：title，value，href） |
获取id名为container的div元素，请补全横线处代码
document.________('div#container')
queryselector
获取ul中的第2个li元素，请补全横线处数字
document.querySelectorAll('ul li')[________]
1
点击确认按钮把当前整行背景色设置为蓝色，请补全横线处代码
-
C1认证
-
C4认证
parentnode
# 观察元素结构可知，如果想更改当前整行背景色，即修改当前li元素的背景色，li元素是button元素的父节点，这里需要使用DOM属性获取元素父级节点
获取div内所有p元素和span元素，请补全横线处代码
children
# p元素和span元素皆为div元素的子元素，这里需要使用获取选定元素所有子元素的属性
代码如下，需要判断input输入框是否为密码类型，请补全横线处代码
getAttribute('type')
DOM节点操作-下
DOM修改
| 名称 | 描述 |
|---|---|
innerHTML |
innerHTML除了获取元素内容，也可通过赋值用于修改元素中内容。如果修改内容中包含html字符串会被解析成html元素 |
setAttribute(name,value) |
设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性 |
| 通过属性名更改属性 | 对元素属性重新赋值可更改对应属性值 |
DOM添加
| 名称 | 描述 |
|---|---|
createElement(tagName) |
创建一个由标签名称tagName指定的HTML元素 |
appendChild(node) |
将一个节点插入到指定父节点的子节点列表的末尾处 |
insertAdjacentHTML(position, text) |
将指定文本解析为HTML字符串，插入到指定位置（IE不友好） |
DOM删除
| 名称 | 描述 |
|---|---|
removeChild(child) |
删除选定的子节点，需要指定其父元素 |
remove() |
删除选定节点（IE不友好） |
删除类名为disable的元素，补全横线处代码
var disbaleItem = document.querySelector('.disable')
disbaleItem.parentNode.________(disbaleItem)
removechild
在ul中的最后一个li元素后添加一个新的li元素，li元素文字内容为input元素的输入值，请补全横线处代码（依次填写答案，使用中文逗号「，」隔开）
- 任务1
- 任务2
creatElement appendchild
# 由题知，添加的为一个新li元素，所以需要创建元素，第一空应使用节点创建方法
# 由于需要在ul的最后一个元素后插入，参数只有一个lastItem代表元素节点，最后一空应为符合要求的节点添加方法
将内容为第一名的元素插入到ol元素内的第一行，请补全横线处代码
- 第二名
- 第三名
afterbegin
将内容为第二名的元素插入到ol元素中，成为第二个li元素，请补全横线处代码
- 第一名
- 第三名
beforebegin
# insertAdjacentHTML方法的第一个参数为插入位置，题目要求要插入元素内的第二行，也就是第三名之前，document.querySelectorAll('li')[1]代表第三个元素，这里填写的参数应表示元素自身的前面
将不属于国内的城市删除，请选择正确的选项
- 石家庄
- 秦皇岛
- 伊拉克
- 哈尔滨
2
DOM控制CSS样式
通过style属性控制样式
style属性可以设置或返回元素的内联样式
- 语法：element.style.property = value
- property为CSS属性名，如：color，margin。如果属性名原来包含“-”，则需转换为小驼峰形式，如：backgroundColor，marginLeft
通过classList控制样式
classList属性返回一个元素类属性集合（这里可以简单理解为类名的集合），通过使用classList中的方法可以方便的访问和控制元素类名，达到控制样式的目的
classList常用方法介绍
| 名称 | 描述 |
|---|---|
add(class1, class2, …) |
添加一个或多个类名 |
remove(class1, class2, …) |
移除一个或多个类名 |
replace(oldClass, newClass) |
替换类名 |
contains(class) |
判定类名是否存在，返回布尔值 |
| `toggle(class, true | false)` |
将div元素背景颜色设置为蓝色，请补全横线处代码
var box = document.querySelector('div')
box.style.________ = 'blue'
backgroundColor
将div设置为隐藏，请补全横线处代码
看不见我
add
将包含disabled类名的按钮设置为禁用，请补全横线处代码
contains
将span元素文字颜色设置为绿色，请补全横线处代码
考试通过
loading
span元素的文字颜色是红色
逢考必过
错
# 对于更改同一个元素的同一种样式，style属性的优先级要高于classList
节点写入
| 名称 | 描述 |
|---|---|
innerHTML |
返回元素中的html内容，通过赋值，可设置元素中的html内容 |
innerText |
返回元素中的文本内容，通过赋值，可设置元素中的文本内容 |
document.write() |
将html字符串写入到文档中 |
innerHTML
使如下代码运行后输出字符串sky，请补全横线处代码
sky
innerText
在第一行元素后插入第二行元素，请补全横线处代码
第一行
write
# 写入的方法带括号了
将ul中的span元素改为li元素，文字内容不变，请补全横线处代码
第一梯队
- 第二梯队
第一梯队
代码运行后，页面中所有数字之和是________
- 6
7
事件基础
事件绑定
事件源要与事件绑定后，才能触发对应事件。下面以鼠标点击事件为例，介绍事件的三种绑定方式。
方式一：行内事件属性赋值
方式二：事件属性赋值
var btn = document.querySelector('button');
btn.onclick = function() {
alert('事件属性赋值')
}
方式三：事件监听
addEventListener(type, listener, useCapture)
- type: 事件类型
- listener: 监听器（处理程序）
- useCapture: 默认为false，设置为true时，不会因冒泡触发监听器
const btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('事件监听')
})
事件属性赋值与事件监听区别：
- 事件属性多次赋值，只会执行最后一次事件处理程序；事件监听可以添加多个监听器，执行多个事件处理程序；
- 事件属性赋值兼容IE8及以下浏览器，而事件监听最低兼容到IE9浏览器
实现点击按钮，更改按钮内容效果，请补全横线处代码
addeventlistener
实现点击按钮，更改按钮内容效果，请补全横线处代码
点击这个盒子
onclick
实现点击变身按钮，弹出变身台词，请补全横线处代码
rider
# 绑定事件，通过rider函数执行动作
点击输出数字按钮，最终输出的数字是________
111
# 通过属性绑定事件，只会执行最后一个，所以执行foo1
代码如下，点击一次按钮，p元素中显示的数字是________
0
2
# addEventListener为事件监听方法，可以调用多次事件处理程序，所以num执行了两次加法运算
鼠标及键盘事件
鼠标事件
| 名称 | 描述 |
|---|---|
click |
单击鼠标左键触发。焦点在按钮并按了Enter键时，也会触发 |
contextmenu |
右键点击（右键菜单显示前触发） |
dblclick |
双击左键触发 |
mouseenter |
指针移至元素范围内触发一次 |
mouseleave |
指针移出元素范围外触发一次 |
mouseover |
指针移至元素或其子元素内，可能触发多次 |
mouseout |
指针移出元素，或者移至其子元素内，可能触发多次 |
键盘事件
| 名称 | 描述 |
|---|---|
keydown |
按下任意按键，按住可连续触发 |
keypress |
按下按键（包括字母，文字和Enter）触发，按住可连续触发，不能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、方向键等） |
keyup |
释放任意按键 |
常用键盘事件属性
使用键盘事件属性可以精确的控制键盘操作，如：回车触发，方向键触发
| 名称 | 描述 |
|---|---|
keyCode |
keyCode属性返回keypress事件触发的键的值的字符代码，或者keydown或keyup事件的键盘代码。 字符代码 - 表示ASCII字符的数字 键盘代码 - 表示键盘上真实键的数字 |
charCode |
返回keypress事件触发时按下的字符键的字符Unicode值，用于keydown或keyup时总是返回0 |
key |
返回按键的标识符(字母区分大小写)。keypress，keyup，keydown返回值相同 |
实现点击按钮，弹出“已点击”提示，补全代码
var btn = document.querySelector('button');
btn.addEventListener('________', showPublish);
function showPublish() {
alert('已点击');
}
click
# addEventListener方法第一个参数为事件名称，此处应为对应的点击事件名称
点击按钮，弹框显示对应按钮中文字，补全代码
this
# 横线处指的是当前节点，此处需要一个能指代当前节点的变量
鼠标移出span元素时，字体大小是________px
五谷丰登
14
# mouseenter鼠标移入，mouseleave鼠标移出
补全代码 ，实现在文本框中输入内容时，唐僧先于白龙马输出
keyup
# 常用键盘事件执行顺序为：keydown->keypress->keyup
在input输入框中点击回车后，弹出登录成功提示，补全代码
enter
# event.key返回按键标识符，此处应为对应的回车键标识符
窗口事件
常用鼠标事件
| 名称 | 描述 |
|---|---|
load |
当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件 |
beforeunload |
window、document 和它们的资源即将卸载时触发。当事件属性 returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框 |
resize |
窗口大小改变时触发 |
scroll |
元素内发生滚动时触发 |
实现窗口大小发生变化时，重置div元素高度为当前窗口高度的一半，请补全横线处代码
resize
实现窗口滚动时，类名为top的元素固定在顶部，请补全横线处代码
我是顶部
顶部元素
scroll
将h1元素中文字改为“欢迎光临”，请补全横线处代码
等待中
load
# 由于代码中的js写在了h1元素上方，所以需要等待页面加载完成才能获取到此元素，此处需使用页面加载完成时触发的事件
浏览器窗口宽度为1000px时，p元素的字体大小为________px
我爱学习
20
# 浏览器窗口宽度为1000px没有满足if条件，所以不改变
代码如下，最后输出的num数字是________
1
# add方法中，只有获取到box节点时才会对num加1
# box节点在JS代码下方，只有在load事件中的add方法才能获取到box节点，所以最终num只会执行一次相加
BOM window对象
window对象
| 名称 | 描述 |
|---|---|
open() |
打开一个新浏览器窗口 |
alert() |
显示警告框 |
close() |
关闭当前浏览器窗口 |
scrollTo() |
可把内容滑动到指定坐标 |
scrollBy() |
可将内容滑动指定的距离（相对于当前位置） |
innerWidth |
返回窗口的网页显示区域宽度 |
innerHeight |
返回窗口的网页显示区域高度 |
location对象
location对象包含当前url信息，经常用于网址判断，url跳转
| 名称 | 描述 |
|---|---|
href |
返回当前完整网址 |
host |
返回主机名和端口号，通常指完整域名 |
protocol |
返回网址协议 |
port |
返回端口号 |
pathname |
返回网址路径部分 |
search |
返回网址中的?及?后的字符串（查询部分），通常指查询参数 |
hash |
返回网址中的#及#后的字符串，通常指锚点名称 |
assign(url) |
在当前页面打开指定新url（增加浏览记录） |
reload() |
重新加载当前页面 |
replace(url) |
打开新url替换当前页面（替换当前浏览记录） |
history对象
history对象包含用户浏览器的历史记录，但是不可读取，经常用于页面跳转
| 名称 | 描述 | 示例 |
|---|---|---|
back() |
返回历史记录的上一个url | history.back() |
forward() |
返回历史记录的下一个url | history.back() |
go(n) |
返回相对于当前记录的第n个url n>0，表前进；n<0，表后退；n=0，刷新当前页 | history.go(-1) history.go(1) |
navigator对象
navigator对象包含浏览器相关信息，经常用于判断设备类型，浏览器兼容性
| 名称 | 描述 |
|---|---|
platform |
返回操作系统类型 |
userAgent |
返回用户代理头的值 |
screen对象
screen对象包含用户屏幕的信息
| 名称 | 描述 |
|---|---|
availWidth |
返回屏幕的宽度（不包括windows任务栏） |
availHeight |
返回屏幕的高度（不包括windows任务栏） |
width |
返回屏幕的总宽度 |
height |
返回屏幕的总高度 |
补全代码，完成点击按钮返回顶部的功能
我是顶部
0
# 返回顶部需要使用scrollTo方法，scrollTo的两个参数为窗口横坐标和纵坐标位置，此处应为顶部对应的纵坐标大小
判断当前网页是否为http协议，如果是，则在当前页面跳转到https协议的页面，补全代码
protocol
# protocol:返回网址协议
当前操作系统是否为windows，如果是windows则跳转对应下载地址，补全代码
platform
# platform:返回操作系统类型
点击净化，刷新当前页面，补全代码
0
# history对象的go方法参数为数字，不同的数字大小对应不同的跳转动作
# 返回相对于当前记录的第n个url n>0，表前进；n<0，表后退；n=0，刷新当前页
div元素的字体大小为________px，补全代码
宽度比较
16
# screen.width代表屏幕宽度，window.innerWidth代表浏览器窗口宽度，浏览器宽度不可能超过屏幕宽度
BOM 定时器
定时器方法
| 方法名 | 定义 | 清除定时器方法 |
|---|---|---|
setTimeout() |
指定的毫秒数后调用函数或计算表达式 | clearTimeout() |
setInterval() |
按照指定的周期（毫秒）来调用函数或计算表达式 | clearInterval() |
实现页面等待2.5秒后显示对话框，请补全代码
2500
监听是否点击支付按钮，若点击支付则弹出支付成功提示，请补全代码
setInterval
代码如下，div字体大小每隔1秒增加1px，达到20px时，停止增长，请补全代码
字体变大
clearinterval
# 此处使用了setInterval定时器，为了阻止字体变大，需要使用其对应的清除定时器方法
代码如下，实现点击按钮停止定时器的功能，请补全代码
0秒
clearTimeout
代码如下，最后p元素内显示的水果是________
我是什么水果？
火龙果
# 当判断idx=2时，定时器停止，最终显示fruit数组中索引为2的水果名称