C1能力认证训练题解析 _ 第四部分 _ Web进阶

一、DOM节点操作(上)

1. 常用节点获取方法： 

名称	描述
getElementById()	获取带有指定id的节点
getElementsByTagName()	获取带有指定标签名的节点集合
querySelector()	获取指定选择器或选择器组匹配的第一个节点
querySelectorAll()	获取指定选择器或选择器组匹配的所有节点集合

2. 获取元素节点信息常用属性：

名称	描述
innerHTML	返回元素内包含的所有HTML内容（文本和标签），类型为字符串
parentNode	返回指定节点的父节点
children	返回指定元素的子元素节点集合
firstElementChild	返回指定元素的第一个子元素节点
lastElementChild	返回指定元素的最后一个子元素节点

3. 常用的节点属性获取方式：

名称	描述
getAttribute()	返回元素一个指定的属性值
直接使用属性名称获取	适用于部分属性（如：title，value，href）

（1）获取id名为container的div元素，请补全横线处代码。

document.________('div#container')

答案：querySelector

“div#container”属于CSS选择器字符串，且id名不可重复，选择的只能是一个元素，所以需要获取指定选择器或选择器组匹配的第一个节点。

（2）获取ul中的第2个li元素，请补全横线处数字。

document.querySelectorAll('ul li')[________]

 答案：1

querySelectorAll方法获取结果为节点集合，集合索引从0开始，依次增加。

（3）获取最外层div元素，请补全横线处代码。

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

答案：parentNode

观察元素结构可知，div元素为span元素的父级的父级，使用parentNode即可返回指定节点的父节点，父级的父级即为 .parentNode.parentNode

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

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

答案：children

观察元素结构可知，p元素和span元素皆为div元素的子元素，这里需要使用获取选定元素所有子元素的属性。

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

<input type="password" placeholder="输入密码">
<script>
  var inputType = document.querySelector('input').________
  if (inputType === "password") {
    // 判断密码
  }
</script>

答案：getAttribute('type')

需要判断输入框的类型，即判断input元素的type属性值，获取元素属性值可通过属性名或使用getAttribute方法获取。

二、DOM节点操作(下)

1. DOM 修改：

名称	描述
innerHTML	innerHTML除了获取元素内容，也可通过赋值用于修改元素中内容。如果修改内容中包含html字符串会被解析成html元素
setAttribute(name,value)	设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性
通过属性名更改属性	对元素属性重新赋值可更改对应属性值

2. DOM 添加： 

名称	描述
createElement(tagName)	创建一个由标签名称tagName指定的HTML元素
appendChild(node)	将一个节点插入到指定父节点的子节点列表的末尾处
insertAdjacentHTML(position, text)	将指定文本解析为HTML字符串，插入到指定位置（IE不友好） position（内容相对当前元素位置）： 'beforebegin'：元素自身的前面 'afterbegin'：插入元素内部的第一个子节点之前 'beforeend'：插入元素内部的最后一个子节点之后 'afterend'：元素自身的后面

3. DOM 删除：

名称	描述
removeChild(child)	删除选定的子节点，需要指定其父元素
remove()	删除选定节点（IE不友好）

（1）删除类名为disable的元素，补全横线处代码。

var disbaleItem = document.querySelector('.disable')
disbaleItem.parentNode.________(disbaleItem)

答案：removeChild

此处为节点删除操作，但要注意已经使用parentNode指定了父节点，所以不可使用remove。

（2）在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>

答案：createElement，appendChild

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

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

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

答案：afterbegin

insertAdjacentHTML方法的第一个参数为插入位置，题目要求要插入元素内第一行，也就是元素内部的第一个子节点之前，这里应使用对应的位置参数。

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

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

答案：2

remove()方法可删除选定元素，这里的item指的是被删除的li元素，由题知，这里要删除不属于国内的元素即伊拉克，所以要填写对应的数字索引。

三、DOM 控制 CSS 样式

1. 通过style属性控制样式：

• 语法：element.style.property = value

• property为CSS属性名，如：color，margin。如果属性名原来包含“-”，则需转换为小驼峰形式，如：backgroundColor，marginLeft。

2. 通过classList控制样式：

名称	描述
add(class1, class2, …)	添加一个或多个类名
remove(class1, class2, …)	移除一个或多个类名
replace(oldClass, newClass)	替换类名
contains(class)	判定类名是否存在，返回布尔值
toggle(class, true|false)	如果类名存在，则移除它，否则添加它，第二个参数代表无论类名是否存在，强制添加（true）或删除（false）

（1）将div元素背景颜色设置为蓝色，请补全横线处代码。

var box = document.querySelector('div')
box.style.________ = 'blue'

答案：backgroundColor

原背景颜色属性名为background-color，使用style属性更改样式时，如果原CSS属性包含“-”，则需转换命名形式，此处应为修改命名形式后的背景颜色属性名。

（2）将div设置为隐藏，请补全横线处代码。

<style>
  .hidden {
    display: none;
  } 
</style>
<div class="box">看不见我</div>
<script>
  var box = document.querySelector('.box')
  box.classList.________('hidden')
</script>

答案：add

div 的类名为 hidden，使用 add 添加类名。

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

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

答案：contains

该题用到了 if 语句，需要判断 button 元素中是否包含 disabled类名，此处应使用classList中的 contains对应的判断类名是否存在。

（4）将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

pass类名代表绿色，loading类名代表橘色，如果要使用绿色，就得删除类名 loading。使用classList中的remove方法。

（5）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。

四、节点写入

1. 节点写入常用方式：

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

（1）在div中插入文字内容为“加油，我要通过C认证”的p元素，请补全横线处代码。

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

答案：innerHTML

此处需要插入一个p元素，插入的值为字符串，所以需要使用可以解析html字符串的DOM属性，返回元素中的html内容。

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

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

答案：innerText

sky分别对应div内三个span元素中的文本，所以这里只需要获取到元素文本内容，需要使用只获取文本内容的DOM属性innerText。

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

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

答案：write

此处需要在div后添加一个元素，应使用对应的节点写入方法，将html字符串解析为html元素并写入到html文档中。

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

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

答案：<li>第一梯队</li>

此处需要将span元素替换为li元素，需要使用到innerHTML，对应的值只需要把html字符串中span改为li即可。

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

<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

代码最后使用了innerHTML，将ul中的所有内容全部替换成了对应的html字符串，页面中只会显示一个数字。

五、事件基础

事件绑定方式：

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

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

2. 方式二：事件属性赋值 

var btn = document.querySelector('button');
btn.onclick = function() {
  alert('事件属性赋值')
}

3. 方式三：事件监听 

//格式：addEventListener(type, listener, useCapture)

//type: 事件类型
//listener: 监听器（处理程序）
//useCapture: 默认为false，设置为true时，不会因冒泡触发监听器

const btn = document.querySelector('button');
btn.addEventListener('click', function() {
  alert('事件监听')
})

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

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

答案：addEventListener

此处需要为按钮绑定点击事件，根据代码形式可知，此处应使用事件监听方法。

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

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

答案：onclick

此处使用事件属性赋值的方式绑定点击事件。

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

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

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

答案：rider

由题知，点击按钮需要弹出对话框，addEventListener方法第二个参数可以填写对应函数名进行监听，注意函数名后不需要括号。

（4）点击输出数字按钮，最终输出的数字是________。

<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

使用事件属性绑定两个事件处理程序，只会执行最后一个。

（5）代码如下，点击一次按钮，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执行了两次加法运算。

六、鼠标及键盘事件

1. 常用鼠标事件

名称	描述
click	单击鼠标左键触发。焦点在按钮并按了Enter键时，也会触发
contextmenu	右键点击（右键菜单显示前触发）
dblclick	双击左键触发
mouseenter	指针移至元素范围内触发一次
mouseleave	指针移出元素范围外触发一次
mouseover	指针移至元素或其子元素内，可能触发多次
mouseout	指针移出元素，或者移至其子元素内，可能触发多次

        PS：事件处理程序中的this指代当前操作元素。

2. 常用键盘事件

名称	描述
keydown	按下任意按键，按住可连续触发
keypress	按下按键（包括字母，文字和Enter）触发，按住可连续触发，不能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、方向键等）
keyup	释放任意按键

3. 常用键盘属性事件

名称	描述
keyCode	keyCode属性返回keypress事件触发的键的值的字符代码，或者keydown或keyup事件的键盘代码。 字符代码 - 表示ASCII字符的数字 键盘代码 - 表示键盘上真实键的数字
charCode	返回keypress事件触发时按下的字符键的字符Unicode值，用于keydown或keyup时总是返回0
key	返回按键的标识符(字母区分大小写)。keypress，keyup，keydown返回值相同

（1）实现点击按钮，弹出“已点击”提示，补全代码。

var btn = document.querySelector('button');
btn.addEventListener('________', showPublish);
function showPublish() {
  alert('已点击');
}

答案：click

addEventListener方法第一个参数为事件名称，此处应为对应的点击事件名称。

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

<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

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

（3）鼠标移出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

mouseleave代表鼠标移出事件。

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

<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。

（5）在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	元素内发生滚动时触发

（1）实现窗口大小发生变化时，重置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

此处需要监听窗口大小的变化，横线处应为对应的窗口大小改变事件名。

（2）实现窗口滚动时，类名为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

此处需要监听窗口滚动变化，横线处应为对应的元素滚动事件名。

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

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

答案：load

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

（4）代码如下，最后输出的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 对象

1. window对象：

名称	描述
open()	打开一个新浏览器窗口 open(url, name, features, replace) url: 打开指定页面的url，如果没有则打开空白页 name: 指定target属性或窗口名称，支持以下值： _blank –- url加载到新窗口（默认） _parent –- url加载到父框架 _self –- url替换当前页面 _top –- url替换任何可加载的框架集 name -- 窗口名称 features: 设置新打开窗口的功能样式（如：width=500） replace true –- url替换浏览历史中的当前条目 false –- 在浏览历史中创建新条目
alert()	显示警告框
close()	关闭当前浏览器窗口
scrollTo()	可把内容滑动到指定坐标 xpos：距离网页左上角x坐标 ypos：距离网页左上角y坐标
scrollBy()	可将内容滑动指定的距离（相对于当前位置）
innerWidth	返回窗口的网页显示区域宽度
innerHeight	返回窗口的网页显示区域高度

2. location 对象：

名称	描述
href	返回当前完整网址
host	返回主机名和端口号，通常指完整域名
protocol	返回网址协议
port	返回端口号
pathname	返回网址路径部分
search	返回网址中的?及?后的字符串（查询部分），通常指查询参数
hash	返回网址中的#及#后的字符串，通常指锚点名称
assign(url)	在当前页面打开指定新url（增加浏览记录）
reload()	重新加载当前页面
replace(url)	打开新url替换当前页面（替换当前浏览记录）

3. 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)

4. navigator对象：

名称	描述
platform	返回操作系统类型
userAgent	返回用户代理头的值

5. screen对象：

名称	描述
availWidth	返回屏幕的宽度（不包括windows任务栏）
availHeight	返回屏幕的高度（不包括windows任务栏）
width	返回屏幕的总宽度
height	返回屏幕的总高度

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

<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的两个参数为窗口横坐标和纵坐标位置，此处应为顶部对应的纵坐标大小。顶部为（0，0）

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

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

答案：protocol

此处需要判断网址协议，横线处应使用location对象中代表网址协议的属性。

（3）当前操作系统是否为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

此处需要判断当前系统类型，横线处应使用navigator中代表当前运行操作系统的属性。

（4）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()

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

<script>
  setTimeout(showAlert, _____)

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

答案：2500

setTimeout设置的时间单位为毫秒，1秒 = 1000毫秒

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

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

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

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

答案：setInterval

用户点击支付按钮的时机不确定，所以需要多次查询用户是否点击（点击后，flag为true），需要使用周期性定时器。

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

<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

此处使用了setTimeout定时器，为了实现定时器的提前停止，需要使用其对应的清除定时器方法。