個(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代碼;
}
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。