個(gè)載入瀏覽器的HTML文檔都會成為Document對象，Document對象，是所有Anchor、Applet、Area、Form、Image、Link、Plugin等對象的祖先對象。

Document 對象使我們可以從腳本（例如javascript）中對 HTML 頁面中的所有元素進(jìn)行訪問，比如通過標(biāo)簽操作元素。

一起來看看javascript（以下簡稱js）是如何操作Document對象及通過Document方法操作其他對象的。

Document方法列表

以chrome瀏覽器為例，js對document對象及其子對象常用操作方法列表如下（按字母順序排列）。

表1 Document常用方法

Document常用方法

獲取對象集合

1)獲取全局性對象方法

anchors、body 、baseURI、 documentElement、forms、images、links等。

anchors：返回對文檔中所有 Anchor 對象的引用

body：返回文檔的body元素

documentElement：返回文檔的根節(jié)點(diǎn)

樣例1

以51testing網(wǎng)頁為例，使用chrome的開發(fā)者工具console面板，anchors、body和documentElement方法用法示例如下：

圖1anchors、body、documentElement方法舉例

forms：返回對文檔中所有Form對象引用

樣例2

forms方法舉例。如下圖所示，使用document.forms顯示出document中所有form對象的引用，并以0、1……序號排列，點(diǎn)擊可跳轉(zhuǎn)到element面板中對應(yīng)的元素位置。

圖2 forms方法舉例

images：返回對文檔中所有 Image 對象引用

links：返回對文檔中所有 Area 和 Link 對象引用

referrer：返回載入當(dāng)前文檔的文檔的 URL

title：返回當(dāng)前文檔的標(biāo)題

URL：返回文檔完整的URL

樣例3

images、links、referrer、title、URL方法舉例如下。

圖3images、links、referrer、title、URL方法舉例

2)獲取某類或某個(gè)對象

getElementById、getElementByClassName、getElementByName、getElementByTagName等。

getElementById：通過id標(biāo)簽獲取定位元素。

樣例4

如下圖所示，使用document.getElementById定位id=’su’的搜索按鈕，將鼠標(biāo)懸停在輸出結(jié)果上時(shí)會在網(wǎng)頁上顯示出對應(yīng)的元素。

圖4 getElementById方法舉例

getElementByClassName：通過class標(biāo)簽獲取定位元素。

樣例5

通過getElementByClassName方法，獲取樣例4中id=’su’，class=’ btn self-btn bg s_btn’元素，方法如下。

圖5 getElementByClassName方法舉例

getElementByName：通過name標(biāo)簽獲取定位元素。

樣例6

通過getElementByName方法如下。

圖6 getElementByName方法舉例

getElementByTagName：通過標(biāo)簽獲取定位元素，例如<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">元素，標(biāo)簽為input；<span class="soutu-btn"></span>標(biāo)簽為span。

值得注意的是，通過getElementByTagName獲取的元素往往是一個(gè)集合。

如下圖所示，試圖通過input標(biāo)簽定位name=’wd’,id=’kw’的元素，結(jié)果返回的是一個(gè)集合，name=’wd’,id=’kw’的元素在集合中的第一位。

樣例7

通過getElementByTagName方法如下。

圖7 getElementByTagName方法舉例

說到這里，大家可能對獲取元素對象或元素對象集合有了一定認(rèn)識，也知道了相應(yīng)的方法。

但不知道你是否發(fā)出過這樣的疑問：我們都知道元素定位不止css、name、id這些常見定位方法，還有xpath定位方法等等。為什么不說？

那么，在這里我們 拓展一下，看看在js中，如何使用xpath定位。

拓展：js的xpath定位

在document操作方法中，若想要通過xpath定位，我們可以使用evaluate方法。

evaluate用于計(jì)算一個(gè) XPath 表達(dá)式，格式為evaluate(xpathText,contextNode,namespaceURLMapper,resultType,result)。

其中：

xpathText為要計(jì)算的 XPath 表達(dá)式的字符串，例如“//*[@id="s_kw_wrap"]/span[1]”；

contextNode表示對應(yīng)要計(jì)算的表達(dá)式的節(jié)點(diǎn)，例如body；

namespaceURLMapper表示把一個(gè)命名空間前綴映射為一個(gè)全稱命名空間 URL 的函數(shù)，如果不需要或者不知道，就為 null；

resultType為指定了期待作為結(jié)果的對象的類型，使用 XPath 轉(zhuǎn)換來強(qiáng)制結(jié)果類型，類型的可能的值是 XPathResult 對象所定義的常量，例如snapshotItem；

result表示一個(gè)復(fù)用的 XPathResult 對象，如果你要?jiǎng)?chuàng)建一個(gè)新的 XPathResult 對象，則為 null。

樣例8

通過evaluate定位樣例6中，百度搜索輸入框。方法如下所示：

圖8 evaluate方法舉例

獲取對象屬性

常用對象屬性：referrer、title、URL、cookie、bgColor、 fgColor、alinkColor/vlinkColor等。

referrer、title、URL、cookie

樣例9

獲取referrer、title、URL、cookie屬性值。

圖9referrer、title、URL、cookie方法舉例

background、fgColor、alinkColor/vlinkColor

通過bgColor、fgColor可設(shè)置對象背景和前景顏色，詳細(xì)用法可見樣例10。

樣例10

通過bgColor可設(shè)置body背景和前景顏色

圖10 bgColor方法舉例

操作對象

對Document對象和其子對象的操作，我們熟知的有：如點(diǎn)擊（click），鍵盤敲擊回車鍵（Enter）等等。

這些操作行為可統(tǒng)稱為元素的事件，事件通常與函數(shù)結(jié)合使用，即事件出發(fā)后引起的下一步反應(yīng)。

對象事件主要可以分為：鼠標(biāo)事件、鍵盤事件、框架事件、表單事件等等。在此我們就聊聊常見的、常用的鼠標(biāo)事件和鍵盤事件。

1)鼠標(biāo)事件

鼠標(biāo)與Document對象及其子對象交互時(shí)發(fā)生的事件屬于鼠標(biāo)事件。

常用的監(jiān)聽鼠標(biāo)事件方法有onclick（當(dāng)用戶單擊元素時(shí)發(fā)生此事件）、ondblclick（當(dāng)用戶雙擊元素時(shí)發(fā)生的事件）、onmousedown（當(dāng)用戶在元素上按下鼠標(biāo)按鈕時(shí)，發(fā)生此事件）、onmousedenter（當(dāng)指針移動到元素上時(shí)，發(fā)生此事件）、onmouseleave（當(dāng)指針從元素上移出時(shí)，發(fā)生此事件）等。

操作對象觸發(fā)綁定在對象上的事件，可以使用第1節(jié)中提到的獲取對象方法，如getElementById、getElementByName等方法精準(zhǔn)定位元素，并在元素上使用觸發(fā)事件方法。

2)鍵盤事件

鍵盤事件操作方法有onkeydown（當(dāng)用戶正在按下鍵時(shí)，發(fā)生此事件），onkeypress(當(dāng)用戶按下鍵時(shí)，發(fā)生此事件)，onkeyup（當(dāng)用戶松開鍵時(shí)，發(fā)生此事件）等。

對測試人員來說，值得注意的是這些事件方法一般都為開發(fā)所用，綁定在元素上，當(dāng)在該元素上進(jìn)行相應(yīng)的鼠標(biāo)操作或鍵盤操作時(shí)被觸發(fā)。

那么，js是如何觸發(fā)這些事件的呢？

如對樣例4中的百度搜索按鈕使用click操作，方法為：document.getElementById("su").click()。

樣例11：以百度搜索輸入“51testing”搜索關(guān)鍵字，點(diǎn)擊/按下搜索按鈕“百度一下“為例。js語句如下圖所示：

圖11 鼠標(biāo)事件、鍵盤事件方法舉例

小結(jié)

為什么要講講js和Document呢？也許有人會有這樣的問題。

從測試角度來說，前端自動化測試難免會和Document交互，了解js和Document的一些常識和基本方法能夠有助于我們在測試過程中，對前端測試有更清晰地認(rèn)識。希望這篇小文章能對你有所幫助~

文末福利——推薦一個(gè)《Python自動化測試學(xué)習(xí)交流群》給大家：

請關(guān)注+私信回復(fù)："測試" 就可以免費(fèi)拿到軟件測試學(xué)習(xí)資料，同時(shí)進(jìn)入群學(xué)習(xí)交流~~

、什么是JavaScript中的window？

JavaScript中window是一個(gè)全局對象，代表瀏覽器中一個(gè)打開的窗口，每個(gè)窗口都是一個(gè)window對象。

2、什么是document？

document是window的一個(gè)屬性，這個(gè)屬性是一個(gè)對象；

document代表當(dāng)前窗口中的整個(gè)網(wǎng)頁；

document對象保存了網(wǎng)頁上所有的內(nèi)容，通過document對象就可以操作網(wǎng)頁上的內(nèi)容。

3、什么是JavaScript中的DOM？

DOM定義了訪問和操作HTML文檔(網(wǎng)頁)的標(biāo)準(zhǔn)方法；

DOM全稱：Document Object Model，即文檔模型對象；

學(xué)習(xí)DOM就是學(xué)習(xí)如何通過document對象操作網(wǎng)頁上的內(nèi)容。

4、JavaScript中如何通過選擇器獲取DOM元素？

querySelector：只會返回根據(jù)指定選擇器找到的第一個(gè)元素，例子：

let oDiv=document.querySelector("div");

console.log("oDiv"); //輸出：<div></div>

querySelectorAll：會返回指定選擇器找到的所有元素，例如：

let oDivs=document.querySelectorAll("div");

console.log("oDivs"); //輸出：NodeList由所有div元素組成的為數(shù)組。

5、JavaScript如何獲取和設(shè)置元素內(nèi)容？

獲取元素內(nèi)容：

1）innerHTML獲取的內(nèi)容包含標(biāo)簽，innerText/textContent獲取的內(nèi)容不包含標(biāo)簽；

2）innerHTML/textContent獲取的內(nèi)容不會去除兩端的空格，innerText獲取的內(nèi)容會去除兩端的空格。

設(shè)置元素內(nèi)容：

共同點(diǎn)：無論通過innerHTML/innerText/textContent設(shè)置內(nèi)容，新的內(nèi)容都會覆蓋原有的內(nèi)容；

區(qū)別：1）通過innerHTML設(shè)置數(shù)據(jù)，數(shù)據(jù)中包含標(biāo)簽，會轉(zhuǎn)換成標(biāo)簽之后再添加；

2）通過innerText/textContent設(shè)置數(shù)據(jù)，數(shù)據(jù)中包含標(biāo)簽，不會轉(zhuǎn)換成標(biāo)簽，會當(dāng)做一個(gè)字符串直接設(shè)置。

6、什么是JavaScript中的事件？ 如何給元素綁定事件？

用戶和瀏覽器之間的交互行為被稱為事件，比如：鼠標(biāo)的點(diǎn)擊/移入/移出。

在JavaScript中所有的HTML標(biāo)簽都可以添加事件；

元素.事件名稱=function(){}；

當(dāng)對應(yīng)事件被觸發(fā)時(shí)候就會自動執(zhí)行function中的代碼。

掌握了以上JavaScript，就可以做某寶里面的輪播圖片了！

、javaScript介紹

JavaScript是一種基于對象和事件驅(qū)動的、并具有安全性能的腳本語言

(客戶端語言)

JavaScript特點(diǎn)

向HTML頁面中添加交互行為

腳本語言，語法和Java類似

解釋性語言，邊解釋邊執(zhí)行

JavaScript組成：ECMAScript 、DOM、BOM

基本結(jié)構(gòu)：

<script type="text/javascript">

<!—

JavaScript 語句;

—>

</script >

示例：

……

<title>初學(xué)JavaScript</title>

</head>

<body>

<script type="text/javascript">

document.write("初學(xué)JavaScript");

document.write("<h1>Hello，JavaScript</h1>");

</script>

</body>

</html>

注：<script>…</script>可以包含在文檔中的任何地方，只要保證這些代碼在被使用前已讀取并加載到內(nèi)存即可

執(zhí)行原理：

外部JS文件：

<script src="export.js" type="text/javascript"></script>

直接在HTML標(biāo)簽中使用：

<input name="btn" type="button" value="彈出消息框"

onclick="javascript：alert('歡迎你');"/>

二、基本常見語法：

1、核心語法：同時(shí)聲明和賦值變量

var catName="皮皮";

2、數(shù)據(jù)類型：

undefined:var width;

變量width沒有初始值，將被賦予值undefined;

null:表示一個(gè)空值，與undefined值相等；

number：var iNum=23; //整數(shù)

var iNum=23.0; //浮點(diǎn)數(shù)

boolean:true 和false;

string:一組被引號（單引號或雙引號）括起來的文本

var string1="This is a string";

3、typeof運(yùn)算符：

typeof檢測變量的返回值

typeof運(yùn)算符返回值如下函數(shù)

undefined：變量被聲明后，但未被賦值

string：用單引號或雙引號來聲明的字符串

boolean：true或false

number：整數(shù)或浮點(diǎn)數(shù)

object：javascript中的對象、數(shù)組和nul

4、String對象：

5、數(shù)組：

數(shù)組的常用屬性和方法

類別 名稱 描述

屬性 length 設(shè)置或返回?cái)?shù)組中元素的數(shù)目

方法 join( ) 把數(shù)組的所有元素放入一個(gè)字符串，通過一個(gè)的分隔符進(jìn)行分隔

sort() 對數(shù)組排序

push() 向數(shù)組末尾添加一個(gè)或更多 元素，并返回新的長度

6、邏輯控制語句：

if(條件)

{

//JavaScript代碼;

}