C1能力认证训练题解析 _ 第四部分 _ Web进阶「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

目录

一、DOM节点操作(上)

二、DOM节点操作(下)

三、DOM 控制 CSS 样式

四、节点写入

五、事件基础

六、鼠标及键盘事件

七、窗口事件

八、BOM window 对象

九、BOM 定时器

一、DOM节点操作(上)

1. 常用节点获取方法： 

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

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

（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 修改：

2. DOM 添加： 

3. DOM 删除：

（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控制样式：

（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. 节点写入常用方式：

（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. 常用鼠标事件

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

2. 常用键盘事件

3. 常用键盘属性事件

（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返回按键标识符，此处应为对应的回车键标识符。

七、窗口事件

常用鼠标事件：

（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对象：

2. location 对象：

3. history 对象：

4. navigator对象：

5. screen对象：

（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 定时器

定时器方法：

（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定时器，为了实现定时器的提前停止，需要使用其对应的清除定时器方法。