汪小黑：一步一步實現(xiàn)一個古詩詞網(wǎng)站（三）——首頁?zhuanlan.zhihu.com

在上篇文章中，我們一步一步的實現(xiàn)了我們的靜態(tài)首頁，從中學習到了頁面布局方面的知識。

在這篇文章中，我們將使用 JavaScript 實現(xiàn)頁面右上角的輸入搜索功能，在實現(xiàn)該功能的過程中，主要會涉及到以下的一些知識點：

什么是BOM？

什么是DOM？

瀏覽器的事件。

一、什么是BOM？

BOM（Browser Object Model），即瀏覽器對象模型。

瀏覽器是一個大型的復雜的軟件，JavaScript 運行在瀏覽器當中，瀏覽器可以看作是 JavaScript 的一個運行環(huán)境。JavaScript 想要控制瀏覽器，就需要瀏覽器開放相應的控制接口，這個控制接口就是 BOM。BOM 可以理解為瀏覽器和 JavaScript 之間的橋梁，JavaScript 通過 BOM 來控制瀏覽器的行為。比如控制頁面的前進和后退、從一個窗口跳轉(zhuǎn)到另外一個窗口、獲取窗口大小等等。舉個例子，我們想要打開一個新的窗口：

window.open('http://www.baidu.com')

BOM核心對象是 window，window 對象包含了6大核心模塊，分別是：

document：文檔對象

frames：窗口中所有命名的框架

history：當前頁面歷史記錄

location：當前頁面地址信息

navigator：瀏覽器相關(guān)信息

screen：用戶顯示屏幕相關(guān)屬性

學習 BOM， 最主要的就是掌握 BOM 中常用的一些屬性和方法。

二、什么是DOM？

DOM（Document Object Model），即文檔對象模型。

DOM是針對 HTML 和 XML 文檔的一個 API。DOM 描繪了一個層次化的節(jié)點樹，允許開發(fā)人員添加、刪除和修改頁面的某一部分。

瀏覽器端也實現(xiàn)了 DOM 規(guī)范，這些實現(xiàn)都集中體現(xiàn)在 document 對象上：

創(chuàng)建節(jié)點：document.createElement

添加節(jié)點：element.appendChild

刪除節(jié)點：element.removeChild

查找節(jié)點：document.getElementById、document.getElementsByClassName、document.querySelector、document.querySelectorAll

學習 DOM，就是學習如何增刪改查 DOM 結(jié)構(gòu)。

三、瀏覽器的事件

事件，就是文檔或者瀏覽器窗口中發(fā)生的一些特定的交互瞬間。

HTML呈現(xiàn)的網(wǎng)頁是異步的和事件驅(qū)動的，其交互過程近乎如下

建立用戶界面

等待有趣的事件發(fā)生

做出相應的反應

重復這一過程

JavaScript 和 HTML 之間的交互也是通過事件實現(xiàn)的，我們可以使用偵聽器來預定事件，以便在事件發(fā)生時執(zhí)行相應的代碼。

瀏覽器的事件系統(tǒng)相對比較復雜，但有一些核心概念一定要理解：

事件流

事件冒泡

事件捕獲

DOM 事件流

事件處理程序

綁定處理程序

刪除處理程序

事件對象

事件類型

總結(jié)一下上邊三個知識點：

BOM 和 DOM 都是獨立的規(guī)范，和特定的語言無關(guān)。

BOM 是用來控制瀏覽器的行為，DOM 是用來控制文檔結(jié)構(gòu)。

事件，就是文檔或者瀏覽器窗口中發(fā)生的一些特定的交互瞬間。

學習這些基礎知識點首選的方式就是閱讀《JavaScript高級程序設計》。

其次是網(wǎng)上的一些系統(tǒng)教程：

JavaScript HTML DOM?www.w3school.com.cnJavaScript Window - 瀏覽器對象模型?www.w3school.com.cnJavaScript 事件?www.w3school.com.cn

四、實現(xiàn)輸入搜索功能

我們來分析一下輸入搜索功能的細節(jié)：

點擊確定按鈕，跳轉(zhuǎn)搜索頁面，并且攜帶上輸入框中輸入的關(guān)鍵字。

輸入框處于焦點的情況下，按下回車鍵，觸發(fā)確定按鈕點擊事件。

要實現(xiàn)上述的功能，我們要做到：

獲取輸入框中的輸入值

監(jiān)聽確定按鈕點擊事件

監(jiān)聽鍵盤被按下事件

1.修改 HTML

<!-- 搜索區(qū) --> <div class="search"><input placeholder="請輸入"/><button>確定</button> </div>

上面是我們在上篇文章中編寫的搜索區(qū) HTML 結(jié)構(gòu)，為了能更加凸顯搜索輸入框和確定按鈕，我們給他們添加 id。

<!-- 搜索區(qū) --> <div class="search"><input id="searchInput" placeholder="請輸入"/><button id="searchBtn">確定</button> </div>

2.獲取 DOM 元素

// 獲取 DOM 元素 var searchBtnEl = document.querySelector('#searchBtn'); var searchInputEl = document.querySelector('#searchInput');

3.編寫跳轉(zhuǎn)邏輯

function goToSearch() {// 從輸入框獲取關(guān)鍵字var keyWord = searchInputEl.value;// 組裝 urlvar url = './search.html' + '?' + 'keyWord=' + keyWord;// 跳轉(zhuǎn)頁面window.open(url, '__blank'); }

4.綁定事件

// 綁定確定按鈕點擊事件 searchBtnEl.addEventListener('click', goToSearch);// 綁定鍵盤按鍵事件 searchInputEl.addEventListener('keydown', function (e) {// 根據(jù) keyCode 判斷按鍵，回車鍵為13if (e.keyCode === 13) {goToSearch();} })

5.完整代碼

// 獲取 DOM 元素 var searchBtnEl = document.querySelector('#searchBtn'); var searchInputEl = document.querySelector('#searchInput');// 編寫跳轉(zhuǎn)邏輯 function goToSearch() {// 從輸入框獲取關(guān)鍵字var keyWord = searchInputEl.value;// 組裝 urlvar url = './search.html' + '?' + 'keyWord=' + keyWord;// 跳轉(zhuǎn)頁面window.open(url, '__blank'); }// 綁定確定按鈕點擊事件 searchBtnEl.addEventListener('click', goToSearch);// 綁定鍵盤按鍵事件 searchInputEl.addEventListener('keydown', function (e) {// 根據(jù) keyCode 判斷按鍵，回車鍵為13if (e.keyCode === 13) {goToSearch();} })

五、下期預告

這篇文章詳細介紹了首頁的輸入搜索功能的實現(xiàn)，大致介紹了幾個重要的知識點：BOM、DOM 和瀏覽器事件。

下篇文章將介紹首頁推薦區(qū)和信息區(qū)的邏輯實現(xiàn)部分。

如果對這個系列感興趣的同學歡迎關(guān)注一波～，可以收到最新的文章通知。

對前端入門感興趣的小伙伴歡迎加入我們的前端學習交流群：

qq群：948805468

微信群：加我微信（a1127502049），我拉你進群

總結(jié)

以上是生活随笔為你收集整理的button active 跳转到另一个页面_一步一步实现一个古诗词网站（四）——首页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。