web进阶


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

 web进阶

 web进阶

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

web进阶

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

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

  web进阶

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

  web进阶

  web进阶

  web进阶

  web进阶

  web进阶

  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

(0)
上一篇 2022年6月24日
下一篇 2022年6月24日

相关推荐

发表回复

登录后才能评论