DOM节点操作（上）

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

document.________('div#container')

答案：queryselector

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

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

答案：1

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

<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

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

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

答案：children

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

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

答案：getattribute('type')

web进阶

DOM节点操作（下）

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

var disbaleItem = document.querySelector('.disable')
disbaleItem.parentNode.________(disbaleItem)
答案：removechild

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>

A .querySelector，appendChild
B .createElement，appendChild
C .querySelector，querySelector
D .createElement，removeChild

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

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

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

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

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

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

答案：2

web进阶

DOM控制CSS样式

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

var box = document.querySelector('div')
box.style.________ = 'blue'
答案：backgroundcolor

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

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

答案：add

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

<button class="delete disabled">删除</button>
<script>
  var delBtn = document.querySelector('.delete')
    if (delBtn.classList.________ ('disabled')) {
        delBtn.setAttribute('disabled', true)
    }
</script>
答案：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

5、span元素的文字颜色是红色

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

答案：

web进阶

节点写入

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

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

答案：innerhtml

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

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

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

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

答案：write

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

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

答案：innerhtml

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

web进阶

事件基础

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

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、点击输出数字按钮，最终输出的数字是________

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

答案：2

鼠标及键盘事件

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

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

答案：click

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

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

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

答案：keyup

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

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

答案：enter

web进阶

窗口事件

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

4、浏览器窗口宽度为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

5、代码如下，最后输出的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

web进阶

BOM window对象

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

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

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

答案：protocol

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

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

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

答案：0

5、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

web进阶

BOM 定时器

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

<script>
  setTimeout(showAlert, _____)

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

答案：2500

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

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

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

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

答案：setinterval

3、代码如下，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

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

<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

5、代码如下，最后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>
答案：火龙果

web进阶

原创文章，作者：wure，如若转载，请注明出处：https://blog.ytso.com/270133.html

web进阶

DOM节点操作（上）

DOM节点操作（下）

DOM控制CSS样式

节点写入

事件基础

鼠标及键盘事件

窗口事件

BOM window对象

BOM 定时器

相关推荐

发表回复