C1 能力認證——Web進階

C1 能力認證——Web進階

DOM節點操作-上

名稱	描述
getElementById()	獲取帶有指定id的節點
getElementsByTagName()	獲取帶有指定標籤名的節點集合
querySelector()	獲取指定選擇器或選擇器組匹配的第一個節點
querySelectorAll()	獲取指定選擇器或選擇器組匹配的所有節點集合

除了函式方法，我們還可以使用屬性來獲取節點資訊，下表介紹了一些獲取元素節點資訊常用的屬性。

名稱	描述
innerHTML	返回元素內包含的所有HTML內容（文字和標籤），型別為字串
parentNode	返回指定節點的父節點
children	返回指定元素的子元素節點集合
firstElementChild	返回指定元素的第一個子元素節點
lastElementChild	返回指定元素的最後一個子元素節點

名稱	描述
getAttribute()	返回元素一個指定的屬性值
直接使用屬性名稱獲取	適用於部分屬性（如：title，value，href）

獲取id名為container的div元素，請補全橫線處程式碼

document.________('div#container')
queryselector

獲取ul中的第2個li元素，請補全橫線處數字

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

點選確認按鈕把當前整行背景色設定為藍色，請補全橫線處程式碼

<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
# 觀察元素結構可知，如果想更改當前整行背景色，即修改當前li元素的背景色，li元素是button元素的父節點，這裡需要使用DOM屬性獲取元素父級節點

獲取div內所有p元素和span元素，請補全橫線處程式碼

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

children
# p元素和span元素皆為div元素的子元素，這裡需要使用獲取選定元素所有子元素的屬性

程式碼如下，需要判斷input輸入框是否為密碼型別，請補全橫線處程式碼

<input type="password" placeholder="輸入密碼">
<script>
  var inputType = document.querySelector('input').________
  if (inputType === "password") {
    // 判斷密碼
  }
</script>
getAttribute('type')

DOM節點操作-下

DOM修改

名稱	描述
innerHTML	innerHTML除了獲取元素內容，也可通過賦值用於修改元素中內容。如果修改內容中包含html字串會被解析成html元素
setAttribute(name,value)	設定指定元素上的某個屬性值。如果屬性已經存在，則更新該值；否則，使用指定的名稱和值新增一個新的屬性
通過屬性名更改屬性	對元素屬性重新賦值可更改對應屬性值

DOM新增

名稱	描述
createElement(tagName)	建立一個由標籤名稱tagName指定的HTML元素
appendChild(node)	將一個節點插入到指定父節點的子節點列表的末尾處
insertAdjacentHTML(position, text)	將指定文字解析為HTML字串，插入到指定位置（IE不友好）

DOM刪除

名稱	描述
removeChild(child)	刪除選定的子節點，需要指定其父元素
remove()	刪除選定節點（IE不友好）

刪除類名為disable的元素，補全橫線處程式碼

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

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

creatElement appendchild
# 由題知，新增的為一個新li元素，所以需要建立元素，第一空應使用節點建立方法
# 由於需要在ul的最後一個元素後插入，引數只有一個lastItem代表元素節點，最後一空應為符合要求的節點新增方法

將內容為第一名的元素插入到ol元素內的第一行，請補全橫線處程式碼

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

afterbegin

將內容為第二名的元素插入到ol元素中，成為第二個li元素，請補全橫線處程式碼

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

beforebegin
# insertAdjacentHTML方法的第一個引數為插入位置，題目要求要插入元素內的第二行，也就是第三名之前，document.querySelectorAll('li')[1]代表第三個元素，這裡填寫的引數應表示元素自身的前面

將不屬於國內的城市刪除，請選擇正確的選項

<ul>
    <li>石家莊</li>
    <li>秦皇島</li>
    <li>伊拉克</li>
    <li>哈爾濱</li>
</ul>
<script>
  var item = document.querySelectorAll('li')[________]
  item.remove()
</script>

2

DOM控制CSS樣式

通過style屬性控制樣式

style屬性可以設定或返回元素的內聯樣式

• 語法：element.style.property = value
• property為CSS屬性名，如：color，margin。如果屬性名原來包含“-”，則需轉換為小駝峰形式，如：backgroundColor，marginLeft

通過classList控制樣式

classList屬性返回一個元素類屬性集合（這裡可以簡單理解為類名的集合），通過使用classList中的方法可以方便的訪問和控制元素類名，達到控制樣式的目的

classList常用方法介紹

名稱	描述
add(class1, class2, …)	新增一個或多個類名
remove(class1, class2, …)	移除一個或多個類名
replace(oldClass, newClass)	替換類名
contains(class)	判定類名是否存在，返回布林值
`toggle(class, true	false)`

將div元素背景顏色設定為藍色，請補全橫線處程式碼

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

backgroundColor

將div設定為隱藏，請補全橫線處程式碼
<style>
  .hidden {
    display: none;
  } 
</style>
<div class="box">看不見我</div>
<script>
  var box = document.querySelector('.box')
  box.classList.________('hidden')
</script>

add

將包含disabled類名的按鈕設定為禁用，請補全橫線處程式碼

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

contains

將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

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

節點寫入

名稱	描述
innerHTML	返回元素中的html內容，通過賦值，可設定元素中的html內容
innerText	返回元素中的文字內容，通過賦值，可設定元素中的文字內容
document.write()	將html字串寫入到文件中

<div></div>
<script>
  var box = document.querySelector('div')
  box.________ = '<p>加油，我要通過C認證</p>'
</script>

innerHTML

使如下程式碼執行後輸出字串sky，請補全橫線處程式碼

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

innerText

在第一行元素後插入第二行元素，請補全橫線處程式碼

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

write
# 寫入的方法帶括號了

將ul中的span元素改為li元素，文字內容不變，請補全橫線處程式碼

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

<li>第一梯隊</li>

程式碼執行後，頁面中所有數字之和是________

<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

事件基礎

事件繫結

事件源要與事件繫結後，才能觸發對應事件。下面以滑鼠點選事件為例，介紹事件的三種繫結方式。

方式一：行內事件屬性賦值

<button onclick="alert('行內事件屬性賦值')">點選按鈕</button>

方式二：事件屬性賦值

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

方式三：事件監聽

addEventListener(type, listener, useCapture)

• type: 事件型別
• listener: 監聽器（處理程式）
• useCapture: 預設為false，設定為true時，不會因冒泡觸發監聽器

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

事件屬性賦值與事件監聽區別：

• 事件屬性多次賦值，只會執行最後一次事件處理程式；事件監聽可以新增多個監聽器，執行多個事件處理程式；
• 事件屬性賦值相容IE8及以下瀏覽器，而事件監聽最低相容到IE9瀏覽器

實現點選按鈕，更改按鈕內容效果，請補全橫線處程式碼

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

addeventlistener

實現點選按鈕，更改按鈕內容效果，請補全橫線處程式碼

<div class="box">點選這個盒子</div>
<script>
    document.querySelector('.box').________ = function() {
        this.style.backgroundColor = '#000'
        this.style.color = '#fff'
        this.innerText = '盒子黑了'
    }
</script>

onclick

實現點選變身按鈕，彈出變身臺詞，請補全橫線處程式碼

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

    function rider() {
        alert("勝利的法則已經確定了！")
    }
</script>

rider
# 繫結事件，通過rider函式執行動作

點選輸出數字按鈕，最終輸出的數字是________

<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
# 通過屬性繫結事件，只會執行最後一個，所以執行foo1

程式碼如下，點選一次按鈕，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執行了兩次加法運算

滑鼠及鍵盤事件

滑鼠事件

名稱	描述
click	單擊滑鼠左鍵觸發。焦點在按鈕並按了Enter鍵時，也會觸發
contextmenu	右鍵點選（右鍵選單顯示前觸發）
dblclick	雙擊左鍵觸發
mouseenter	指標移至元素範圍內觸發一次
mouseleave	指標移出元素範圍外觸發一次
mouseover	指標移至元素或其子元素內，可能觸發多次
mouseout	指標移出元素，或者移至其子元素內，可能觸發多次

鍵盤事件

名稱	描述
keydown	按下任意按鍵，按住可連續觸發
keypress	按下按鍵（包括字母，文字和Enter）觸發，按住可連續觸發，不能監聽一些特殊按鍵（ALT、CTRL、SHIFT、ESC、方向鍵等）
keyup	釋放任意按鍵

常用鍵盤事件屬性

使用鍵盤事件屬性可以精確的控制鍵盤操作，如：回車觸發，方向鍵觸發

名稱	描述
keyCode	keyCode屬性返回keypress事件觸發的鍵的值的字元程式碼，或者keydown或keyup事件的鍵盤程式碼。 字元程式碼 - 表示ASCII字元的數字 鍵盤程式碼 - 表示鍵盤上真實鍵的數字
charCode	返回keypress事件觸發時按下的字元鍵的字元Unicode值，用於keydown或keyup時總是返回0
key	返回按鍵的識別符號(字母區分大小寫)。keypress，keyup，keydown返回值相同

實現點選按鈕，彈出“已點選”提示，補全程式碼

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

click
# addEventListener方法第一個引數為事件名稱，此處應為對應的點選事件名稱

點選按鈕，彈框顯示對應按鈕中文字，補全程式碼

<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
# 橫線處指的是當前節點，此處需要一個能指代當前節點的變數

滑鼠移出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
# mouseenter滑鼠移入，mouseleave滑鼠移出

補全程式碼 ，實現在文字框中輸入內容時，唐僧先於白龍馬輸出

<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

在input輸入框中點選回車後，彈出登入成功提示，補全程式碼

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

enter
# event.key返回按鍵識別符號，此處應為對應的Enter鍵識別符號

視窗事件

常用滑鼠事件

名稱	描述
load	當整個頁面及所有依賴資源（如樣式表和圖片）都已完成載入時，將觸發load事件
beforeunload	window、document 和它們的資源即將解除安裝時觸發。當事件屬性 returnValue 被賦值為非空字串時，會彈出一個對話方塊，讓使用者確認是否離開頁面（示例如下）。否則，事件被靜默處理。一些瀏覽器實現僅在框架或內建框架接收到使用者手勢或互動時才顯示對話方塊
resize	視窗大小改變時觸發
scroll	元素內發生滾動時觸發

實現視窗大小發生變化時，重置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

實現視窗滾動時，類名為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

將h1元素中文字改為“歡迎光臨”，請補全橫線處程式碼

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

load
# 由於程式碼中的js寫在了h1元素上方，所以需要等待頁面載入完成才能獲取到此元素，此處需使用頁面載入完成時觸發的事件

瀏覽器視窗寬度為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
# 瀏覽器視窗寬度為1000px沒有滿足if條件，所以不改變

程式碼如下，最後輸出的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物件

window物件

名稱	描述
open()	開啟一個新瀏覽器視窗
alert()	顯示警告框
close()	關閉當前瀏覽器視窗
scrollTo()	可把內容滑動到指定座標
scrollBy()	可將內容滑動指定的距離（相對於當前位置）
innerWidth	返回視窗的網頁顯示區域寬度
innerHeight	返回視窗的網頁顯示區域高度

location物件

location物件包含當前url資訊，經常用於網址判斷，url跳轉

名稱	描述
href	返回當前完整網址
host	返回主機名和埠號，通常指完整域名
protocol	返回網址協議
port	返回埠號
pathname	返回網址路徑部分
search	返回網址中的?及?後的字串（查詢部分），通常指查詢引數
hash	返回網址中的#及#後的字串，通常指錨點名稱
assign(url)	在當前頁面開啟指定新url（增加瀏覽記錄）
reload()	重新載入當前頁面
replace(url)	開啟新url替換當前頁面（替換當前瀏覽記錄）

history物件

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)

navigator物件

navigator物件包含瀏覽器相關資訊，經常用於判斷裝置型別，瀏覽器相容性

名稱	描述
platform	返回作業系統型別
userAgent	返回使用者代理頭的值

screen物件

screen物件包含使用者螢幕的資訊

名稱	描述
availWidth	返回螢幕的寬度（不包括windows工作列）
availHeight	返回螢幕的高度（不包括windows工作列）
width	返回螢幕的總寬度
height	返回螢幕的總高度

補全程式碼，完成點選按鈕返回頂部的功能

<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的兩個引數為視窗橫座標和縱座標位置，此處應為頂部對應的縱座標大小

判斷當前網頁是否為http協議，如果是，則在當前頁面跳轉到https協議的頁面，補全程式碼

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

protocol
# protocol:返回網址協議

當前作業系統是否為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
# platform:返回作業系統型別

點選淨化，重新整理當前頁面，補全程式碼

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

0
# history物件的go方法引數為數字，不同的數字大小對應不同的跳轉動作
# 返回相對於當前記錄的第n個url n>0，表前進；n<0，表後退；n=0，重新整理當前頁

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

實現頁面等待2.5秒後顯示對話方塊，請補全程式碼

<script>
  setTimeout(showAlert, _____)

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

2500

監聽是否點選支付按鈕，若點選支付則彈出支付成功提示，請補全程式碼

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

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

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

setInterval

程式碼如下，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
# 此處使用了setInterval定時器，為了阻止字型變大，需要使用其對應的清除定時器方法

程式碼如下，實現點選按鈕停止定時器的功能，請補全程式碼

<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

程式碼如下，最後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>

火龍果
# 當判斷idx=2時，定時器停止，最終顯示fruit陣列中索引為2的水果名稱