整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          讓前端測試更進(jìn)一步:看看javascript是如何操

          讓前端測試更進(jìn)一步:看看javascript是如何操作Document對象?

          個(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代碼;

          }


          主站蜘蛛池模板: 精品无码人妻一区二区三区不卡| 国产成人av一区二区三区不卡| 国产午夜精品免费一区二区三区 | 欧洲亚洲综合一区二区三区| 亚洲一区二区三区在线| 久久一区二区三区精品| 无码人妻AⅤ一区二区三区| 无码人妻精品一区二区三区东京热 | 国产拳头交一区二区| 午夜视频一区二区| 精品乱码一区二区三区在线| 一级毛片完整版免费播放一区| aⅴ一区二区三区无卡无码| 中文字幕一区二区免费 | 伊人精品视频一区二区三区| 在线观看国产一区| 色偷偷一区二区无码视频| 无码一区二区三区| 亚洲色一区二区三区四区| 波多野结衣AV一区二区三区中文 | 久久国产午夜一区二区福利| 国产日韩精品一区二区三区在线 | 亚洲第一区在线观看| 国产精品区一区二区三| 中文字幕av一区| 亚洲一区二区三区无码国产| 日本欧洲视频一区| 亚洲福利视频一区| 精品欧洲av无码一区二区| 亚洲一区二区久久| 色欲AV蜜臀一区二区三区| 3d动漫精品成人一区二区三| 国产情侣一区二区| 国内精品一区二区三区在线观看| 蜜臀AV无码一区二区三区| 正在播放国产一区| 色精品一区二区三区| 国产伦精品一区二区三区视频金莲 | 精品久久国产一区二区三区香蕉| 亚洲片一区二区三区| 国产成人无码AV一区二区|