C1 能力认证——Web进阶

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

点击确认按钮把当前整行背景色设置为蓝色，请补全横线处代码

<ul class="box">
  <li class="item">
    <span>C1认证</span>
    <button>确认</button>
  </li>
  <li class="item">
    <span>C4认证</span>
    <button>确认</button>
  </li>
</ul>
<script>
  var btn = document.querySelectorAll('button')
  for (var idx = 0; idx < btn.length; idx++) {
    btn[idx].addEventListener('click', function() {
      this.________.style.backgroundColor = 'blue'
    })
  }
</script>

parentnode
# 观察元素结构可知，如果想更改当前整行背景色，即修改当前li元素的背景色，li元素是button元素的父节点，这里需要使用DOM属性获取元素父级节点

获取div内所有p元素和span元素，请补全横线处代码

<div>
	<p></p>
	<p></p>
	<span></span>
	<span></span>
</div>
<script>
	document.querySelector('div').________
</script>

children
# p元素和span元素皆为div元素的子元素，这里需要使用获取选定元素所有子元素的属性

代码如下，需要判断input输入框是否为密码类型，请补全横线处代码

<input type="password" placeholder="输入密码">
<script>
  var inputType = document.querySelector('input').________
  if (inputType === "password") {
    // 判断密码
  }
</script>
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元素的输入值，请补全横线处代码（依次填写答案，使用中文逗号「，」隔开）

<ul>
  <input type="text" value="任务3" />
  <li class="item">任务1</li>
  <li class="item">任务2</li>
</ul>
<script>
  var ul = document.querySelector ('ul')
  var val = document.querySelector('input').value
  var lastItem = document.________('li')
  lastItem.innerHTML = val
  ul.________(lastItem)
</script>

creatElement appendchild
# 由题知，添加的为一个新li元素，所以需要创建元素，第一空应使用节点创建方法
# 由于需要在ul的最后一个元素后插入，参数只有一个lastItem代表元素节点，最后一空应为符合要求的节点添加方法

将内容为第一名的元素插入到ol元素内的第一行，请补全横线处代码

<ol>
    <li>第二名</li>
    <li>第三名</li>
</ol>
<script>
  var ol = document.querySelector('ol')
    ol.insertAdjacentHTML('________', '<li>第一名</li>')
</script>

afterbegin

将内容为第二名的元素插入到ol元素中，成为第二个li元素，请补全横线处代码

<ol>
    <li>第一名</li>
    <li>第三名</li>
</ol>
<script>
  var item = document.querySelectorAll('li')[1]
  item.insertAdjacentHTML('________', '<li>第二名</li>')
</script>

beforebegin
# insertAdjacentHTML方法的第一个参数为插入位置，题目要求要插入元素内的第二行，也就是第三名之前，document.querySelectorAll('li')[1]代表第三个元素，这里填写的参数应表示元素自身的前面

将不属于国内的城市删除，请选择正确的选项

<ul>
    <li>石家庄</li>
    <li>秦皇岛</li>
    <li>伊拉克</li>
    <li>哈尔滨</li>
</ul>
<script>
  var item = document.querySelectorAll('li')[________]
  item.remove()
</script>

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设置为隐藏，请补全横线处代码
<style>
  .hidden {
    display: none;
  } 
</style>
<div class="box">看不见我</div>
<script>
  var box = document.querySelector('.box')
  box.classList.________('hidden')
</script>

add

将包含disabled类名的按钮设置为禁用，请补全横线处代码

<button class="delete disabled">删除</button>
<script>
  var delBtn = document.querySelector('.delete')
    if (delBtn.classList.________ ('disabled')) {
        delBtn.setAttribute('disabled', true)
    }
</script>

contains

将span元素文字颜色设置为绿色，请补全横线处代码

<style>
    .pass {
        color: green;
    }
    .loading {
        color: orange;
    }
</style>
<span class="pass loading">考试通过</span>
<script>
  var item = document.querySelector('span')
  item.classList.remove('________')
</script>

loading

span元素的文字颜色是红色

<style>
    .active {
        color: red;
    }
</style>
<span>逢考必过</span>
<script>
  var item = document.querySelector('span')
  item.style.color = 'blue'
  item.classList.add('active')
</script>

错
# 对于更改同一个元素的同一种样式，style属性的优先级要高于classList

节点写入

名称	描述
innerHTML	返回元素中的html内容，通过赋值，可设置元素中的html内容
innerText	返回元素中的文本内容，通过赋值，可设置元素中的文本内容
document.write()	将html字符串写入到文档中

<div></div>
<script>
  var box = document.querySelector('div')
  box.________ = '<p>加油，我要通过C认证</p>'
</script>

innerHTML

使如下代码运行后输出字符串sky，请补全横线处代码

<div>
    <span>s</span><span>k</span><span>y</span>
</div>
<script>
  var word = document.querySelector('div').________
  console.log(word)
</script>

innerText

在第一行元素后插入第二行元素，请补全横线处代码

<div>第一行</div>
<script>
    document.________ ('<div>第二行</div>')
</script>

write
# 写入的方法带括号了

将ul中的span元素改为li元素，文字内容不变，请补全横线处代码

<ul>
    <span>第一梯队</span>
    <li>第二梯队</li>
</ul>
<script>
  var box = document.querySelector('ul span')
  box.innerHTML = '________'
</script>

<li>第一梯队</li>

代码运行后，页面中所有数字之和是________

<ul>
    <script>
        document.write('<li>5</li>')
    </script>
    <li>6</li>
    <script>
        var box = document.querySelector('ul')
        box.innerHTML = '<li>7</li>'
    </script>
</ul>

7

事件基础

事件绑定

事件源要与事件绑定后，才能触发对应事件。下面以鼠标点击事件为例，介绍事件的三种绑定方式。

方式一：行内事件属性赋值

<button onclick="alert('行内事件属性赋值')">点击按钮</button>

方式二：事件属性赋值

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浏览器

实现点击按钮，更改按钮内容效果，请补全横线处代码

<button class="btn">点击我</button>
<script>
document.querySelector('.btn').________ ('click', function() {
    this.innerText = '我被点击了'
})
</script>

addeventlistener

实现点击按钮，更改按钮内容效果，请补全横线处代码

<div class="box">点击这个盒子</div>
<script>
    document.querySelector('.box').________ = function() {
        this.style.backgroundColor = '#000'
        this.style.color = '#fff'
        this.innerText = '盒子黑了'
    }
</script>

onclick

实现点击变身按钮，弹出变身台词，请补全横线处代码

<button>变身</button>
<script>
    var btn = document.querySelector('button')
    btn.addEventListener('click', ________)

    function rider() {
        alert("胜利的法则已经确定了！")
    }
</script>

rider
# 绑定事件，通过rider函数执行动作

点击输出数字按钮，最终输出的数字是________

<button>输出数字</button>
<script>
    var btn = document.querySelector('button')
    btn.onclick = foo2
    btn.onclick = foo1
    
    function foo1() {
        console.log(111)
    }
    function foo2() {
        console.log(222)
    }
</script>

111
# 通过属性绑定事件，只会执行最后一个，所以执行foo1

代码如下，点击一次按钮，p元素中显示的数字是________

<button >按钮</button>
<p>0</p>
<script>
  var btn = document.querySelector('button')
  var num = 0
  btn.addEventListener('click', function() {
    num++
    document.querySelector('p').innerHTML = num
  })
  btn.addEventListener('click', function() {
    num++
    document.querySelector('p').innerHTML = num
  })
</script>

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方法第一个参数为事件名称，此处应为对应的点击事件名称

点击按钮，弹框显示对应按钮中文字，补全代码

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
  var btns = document.querySelectorAll('button')
  for (var idx = 0; idx < btns.length; idx++) {
    btns[idx].addEventListener('click', function() {
      alert(________.innerHTML)
    })
  }
</script>

this
# 横线处指的是当前节点，此处需要一个能指代当前节点的变量

鼠标移出span元素时，字体大小是________px

<span>五谷丰登</span>
<script>
    var span = document.querySelector('span')
    span.addEventListener('mouseenter', function() {
        this.style.fontSize = '16px'
    })
    span.addEventListener('mouseleave', function() {
        this.style.fontSize = '14px'
    })
</script>

14
# mouseenter鼠标移入，mouseleave鼠标移出

补全代码 ，实现在文本框中输入内容时，唐僧先于白龙马输出

<input type="text" />
<script>
  var input = document.querySelector('input')
  input.addEventListener('________', function() {
    console.log('白龙马')
  })
  input.addEventListener('keypress', function() {
    console.log('唐僧')
  })
</script>

keyup
# 常用键盘事件执行顺序为：keydown->keypress->keyup

在input输入框中点击回车后，弹出登录成功提示，补全代码

<input type="text">
<script>
  var input = document.querySelector('input')
  input.addEventListener('keyup', function(event) {
    if (event.key=== '________') {
      alert('登录成功')
    }
  })
</script>

enter
# event.key返回按键标识符，此处应为对应的回车键标识符

窗口事件

常用鼠标事件

名称	描述
load	当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件
beforeunload	window、document 和它们的资源即将卸载时触发。当事件属性 returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框
resize	窗口大小改变时触发
scroll	元素内发生滚动时触发

实现窗口大小发生变化时，重置div元素高度为当前窗口高度的一半，请补全横线处代码

<style>
    .box {
        width: 200px;
        height: 500px;
        background-color: blue;
    }
</style>
<div class="box"></div>
<script>
  window.addEventListener('________', function() {
      document.querySelector('.box').style.height = window.innerHeight/2 + 'px'
  })
</script>

resize

实现窗口滚动时，类名为top的元素固定在顶部，请补全横线处代码

<style>
    .box {height: 3000px;}
    .top {width: 200px;height: 200px;background-color: gray;}
</style>
<div class="box">
    <span>我是顶部</span>
    <div class="top">顶部元素</div>
</div>
<script>
  window.addEventListener('________', function() {
      document.querySelector('.top').style.position = 'fixed'
  })
</script>

scroll

将h1元素中文字改为“欢迎光临”，请补全横线处代码

<script>
  window.addEventListener('________', function() {
    document.querySelector('h1').innerText = "欢迎光临"
  })
</script>
<h1>等待中</h1>

load
# 由于代码中的js写在了h1元素上方，所以需要等待页面加载完成才能获取到此元素，此处需使用页面加载完成时触发的事件

浏览器窗口宽度为1000px时，p元素的字体大小为________px

<style>
  .item {
      font-size: 20px;
  }
</style>
<p class="item">我爱学习</p>
<script>
window.addEventListener('resize', function() {
    if (window.innerWidth < 900) {
      document.querySelector('.item').style.fontSize = '12px'
    }
})
</script>

20
# 浏览器窗口宽度为1000px没有满足if条件，所以不改变

代码如下，最后输出的num数字是________

<script>
  var num = 0
  function add() {
    if(document.querySelector('.box')) {
      num++
    }
    console.log(num)
  }
  add()
  window.addEventListener('load', function() {
    add()
  })
  add()
</script>
<div class="box"></div>

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	返回屏幕的总高度

补全代码，完成点击按钮返回顶部的功能

<style>
  .box { height: 3000px; }
  .btn { position: fixed;bottom: 50px;right: 50px; }
</style>
<div class="box"><p>我是顶部</p></div>
<button class="btn">返回顶部</button>
<script>
  var btn = document.querySelector('.btn')
  btn.addEventListener('click', function() {
    scrollTo(0,________)
  })
</script>

0
# 返回顶部需要使用scrollTo方法，scrollTo的两个参数为窗口横坐标和纵坐标位置，此处应为顶部对应的纵坐标大小

判断当前网页是否为http协议，如果是，则在当前页面跳转到https协议的页面，补全代码

<script>
  if (location.________ === 'http:') {
	window.open('https://newsite.com', 'self')
  }
</script>

protocol
# protocol:返回网址协议

当前操作系统是否为windows，如果是windows则跳转对应下载地址，补全代码

<button>下载VS code</button>
<script>
  if (navigator.________ === 'Win32') {
      document.querySelector('button').addEventListener('click', function() {
          location.href= 'https://code.visualstudio.com/docs/?dv=win64user'
      })
  }
</script>

platform
# platform:返回操作系统类型

点击净化，刷新当前页面，补全代码

<button>净化</button>
<script>
var btn = document.querySelector('button')
btn.onclick = function() {
  history.go(________)
}
</script>

0
# history对象的go方法参数为数字，不同的数字大小对应不同的跳转动作
# 返回相对于当前记录的第n个url n>0，表前进；n<0，表后退；n=0，刷新当前页

div元素的字体大小为________px，补全代码

<style>
  .box {
    font-size: 16px;
  }
</style>
<div class="box">宽度比较</div>
<script>
  var box = document.querySelector('.box')
  if (screen.width < window.innerWidth) {
    box.style.fontSize = '12px'
  }
</script>

16
# screen.width代表屏幕宽度，window.innerWidth代表浏览器窗口宽度，浏览器宽度不可能超过屏幕宽度

BOM 定时器

定时器方法

方法名	定义	清除定时器方法
setTimeout()	指定的毫秒数后调用函数或计算表达式	clearTimeout()
setInterval()	按照指定的周期（毫秒）来调用函数或计算表达式	clearInterval()

实现页面等待2.5秒后显示对话框，请补全代码

<script>
  setTimeout(showAlert, _____)

  function showAlert() {
    alert('你的小可爱突然出现')
  }
</script>

2500

监听是否点击支付按钮，若点击支付则弹出支付成功提示，请补全代码

<button>支付</button>
<script>
  var btn = document.querySelector('button')
  var flag = false

  btn.onclick = function() {
    flag = true
  }

  ________(function() {
    if (flag) {
      alert('支付成功')
    }
  }, 1000)
</script>

setInterval

代码如下，div字体大小每隔1秒增加1px，达到20px时，停止增长，请补全代码

<div>字体变大</div>
<script>
  var myFontSize = 14
  var box = document.querySelector('div')
  var timer = setInterval(function() {
    if (myFontSize >= 19) {
      ________(timer)
    }
    myFontSize++
    box.style.fontSize = myFontSize + 'px'
  }, 1000)
</script>

clearinterval
# 此处使用了setInterval定时器，为了阻止字体变大，需要使用其对应的清除定时器方法

代码如下，实现点击按钮停止定时器的功能，请补全代码

<h1>0秒</h1>
<button>停止</button>
<script>
  var timer = setTimeout(function() {
    document.querySelector('h1').innerText = '5秒过去了'
  }, 5000);
  document.querySelector('button').addEventListener('click', function() {
    document.querySelector('h1').innerText = '提前停止'
    ________(timer)
  })
</script>

clearTimeout

代码如下，最后p元素内显示的水果是________

<p class="info">我是什么水果？</p>
<script>
  var info = document.querySelector('.info')
  var idx = 0
  var fruit = ['葡萄', '橘子', '火龙果', '人参果', '猕猴桃']
  var t1 = setInterval(function() {
    if (idx >= 2) {
      clear(idx)
    }
    idx++
  }, 1000)
  // 清除定时器，显示水果名称
  function clear(idx) {
    clearInterval(t1)
    info.innerHTML = fruit[idx]
  }
</script>

火龙果
# 当判断idx=2时，定时器停止，最终显示fruit数组中索引为2的水果名称