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

目录

一、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 添加：

• ‘beforebegin’：元素自身的前面
• ‘afterbegin’：插入元素内部的第一个子节点之前
• ‘beforeend’：插入元素内部的最后一个子节点之后
• ‘afterend’：元素自身的后面

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

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/180055.html原文链接：https://javaforall.cn