个载入浏览器的HTML文档都会成为Document对象，Document对象，是所有Anchor、Applet、Area、Form、Image、Link、Plugin等对象的祖先对象。

Document 对象使我们可以从脚本（例如javascript）中对 HTML 页面中的所有元素进行访问，比如通过标签操作元素。

一起来看看javascript（以下简称js）是如何操作Document对象及通过Document方法操作其他对象的。

Document方法列表

以chrome浏览器为例，js对document对象及其子对象常用操作方法列表如下（按字母顺序排列）。

表1 Document常用方法

Document常用方法

获取对象集合

1)获取全局性对象方法

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

anchors：返回对文档中所有 Anchor 对象的引用

body：返回文档的body元素

documentElement：返回文档的根节点

样例1

以51testing网页为例，使用chrome的开发者工具console面板，anchors、body和documentElement方法用法示例如下：

图1anchors、body、documentElement方法举例

forms：返回对文档中所有Form对象引用

样例2

forms方法举例。如下图所示，使用document.forms显示出document中所有form对象的引用，并以0、1……序号排列，点击可跳转到element面板中对应的元素位置。

图2 forms方法举例

images：返回对文档中所有 Image 对象引用

links：返回对文档中所有 Area 和 Link 对象引用

referrer：返回载入当前文档的文档的 URL

title：返回当前文档的标题

URL：返回文档完整的URL

样例3

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

图3images、links、referrer、title、URL方法举例

2)获取某类或某个对象

getElementById、getElementByClassName、getElementByName、getElementByTagName等。

getElementById：通过id标签获取定位元素。

样例4

如下图所示，使用document.getElementById定位id=’su’的搜索按钮，将鼠标悬停在输出结果上时会在网页上显示出对应的元素。

图4 getElementById方法举例

getElementByClassName：通过class标签获取定位元素。

样例5

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

图5 getElementByClassName方法举例

getElementByName：通过name标签获取定位元素。

样例6

通过getElementByName方法如下。

图6 getElementByName方法举例

getElementByTagName：通过标签获取定位元素，例如<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">元素，标签为input；<span class="soutu-btn"></span>标签为span。

值得注意的是，通过getElementByTagName获取的元素往往是一个集合。

如下图所示，试图通过input标签定位name=’wd’,id=’kw’的元素，结果返回的是一个集合，name=’wd’,id=’kw’的元素在集合中的第一位。

样例7

通过getElementByTagName方法如下。

图7 getElementByTagName方法举例

说到这里，大家可能对获取元素对象或元素对象集合有了一定认识，也知道了相应的方法。

但不知道你是否发出过这样的疑问：我们都知道元素定位不止css、name、id这些常见定位方法，还有xpath定位方法等等。为什么不说？

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

拓展：js的xpath定位

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

evaluate用于计算一个 XPath 表达式，格式为evaluate(xpathText,contextNode,namespaceURLMapper,resultType,result)。

其中：

xpathText为要计算的 XPath 表达式的字符串，例如“//*[@id="s_kw_wrap"]/span[1]”；

contextNode表示对应要计算的表达式的节点，例如body；

namespaceURLMapper表示把一个命名空间前缀映射为一个全称命名空间 URL 的函数，如果不需要或者不知道，就为 null；

resultType为指定了期待作为结果的对象的类型，使用 XPath 转换来强制结果类型，类型的可能的值是 XPathResult 对象所定义的常量，例如snapshotItem；

result表示一个复用的 XPathResult 对象，如果你要创建一个新的 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可设置对象背景和前景颜色，详细用法可见样例10。

样例10

通过bgColor可设置body背景和前景颜色

图10 bgColor方法举例

操作对象

对Document对象和其子对象的操作，我们熟知的有：如点击（click），键盘敲击回车键（Enter）等等。

这些操作行为可统称为元素的事件，事件通常与函数结合使用，即事件出发后引起的下一步反应。

对象事件主要可以分为：鼠标事件、键盘事件、框架事件、表单事件等等。在此我们就聊聊常见的、常用的鼠标事件和键盘事件。

1)鼠标事件

鼠标与Document对象及其子对象交互时发生的事件属于鼠标事件。

常用的监听鼠标事件方法有onclick（当用户单击元素时发生此事件）、ondblclick（当用户双击元素时发生的事件）、onmousedown（当用户在元素上按下鼠标按钮时，发生此事件）、onmousedenter（当指针移动到元素上时，发生此事件）、onmouseleave（当指针从元素上移出时，发生此事件）等。

操作对象触发绑定在对象上的事件，可以使用第1节中提到的获取对象方法，如getElementById、getElementByName等方法精准定位元素，并在元素上使用触发事件方法。

2)键盘事件

键盘事件操作方法有onkeydown（当用户正在按下键时，发生此事件），onkeypress(当用户按下键时，发生此事件)，onkeyup（当用户松开键时，发生此事件）等。

对测试人员来说，值得注意的是这些事件方法一般都为开发所用，绑定在元素上，当在该元素上进行相应的鼠标操作或键盘操作时被触发。

那么，js是如何触发这些事件的呢？

如对样例4中的百度搜索按钮使用click操作，方法为：document.getElementById("su").click()。

样例11：以百度搜索输入“51testing”搜索关键字，点击/按下搜索按钮“百度一下“为例。js语句如下图所示：

图11 鼠标事件、键盘事件方法举例

小结

为什么要讲讲js和Document呢？也许有人会有这样的问题。

从测试角度来说，前端自动化测试难免会和Document交互，了解js和Document的一些常识和基本方法能够有助于我们在测试过程中，对前端测试有更清晰地认识。希望这篇小文章能对你有所帮助~

文末福利——推荐一个《Python自动化测试学习交流群》给大家：

请关注+私信回复："测试" 就可以免费拿到软件测试学习资料，同时进入群学习交流~~

、什么是JavaScript中的window？

JavaScript中window是一个全局对象，代表浏览器中一个打开的窗口，每个窗口都是一个window对象。

2、什么是document？

document是window的一个属性，这个属性是一个对象；

document代表当前窗口中的整个网页；

document对象保存了网页上所有的内容，通过document对象就可以操作网页上的内容。

3、什么是JavaScript中的DOM？

DOM定义了访问和操作HTML文档(网页)的标准方法；

DOM全称：Document Object Model，即文档模型对象；

学习DOM就是学习如何通过document对象操作网页上的内容。

4、JavaScript中如何通过选择器获取DOM元素？

querySelector：只会返回根据指定选择器找到的第一个元素，例子：

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

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

querySelectorAll：会返回指定选择器找到的所有元素，例如：

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

console.log("oDivs"); //输出：NodeList由所有div元素组成的为数组。

5、JavaScript如何获取和设置元素内容？

获取元素内容：

1）innerHTML获取的内容包含标签，innerText/textContent获取的内容不包含标签；

2）innerHTML/textContent获取的内容不会去除两端的空格，innerText获取的内容会去除两端的空格。

设置元素内容：

共同点：无论通过innerHTML/innerText/textContent设置内容，新的内容都会覆盖原有的内容；

区别：1）通过innerHTML设置数据，数据中包含标签，会转换成标签之后再添加；

2）通过innerText/textContent设置数据，数据中包含标签，不会转换成标签，会当做一个字符串直接设置。

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

用户和浏览器之间的交互行为被称为事件，比如：鼠标的点击/移入/移出。

在JavaScript中所有的HTML标签都可以添加事件；

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

当对应事件被触发时候就会自动执行function中的代码。

掌握了以上JavaScript，就可以做某宝里面的轮播图片了！

、javaScript介绍

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言

(客户端语言)

JavaScript特点

向HTML页面中添加交互行为

脚本语言，语法和Java类似

解释性语言，边解释边执行

JavaScript组成：ECMAScript 、DOM、BOM

基本结构：

<script type="text/javascript">

<!—

JavaScript 语句;

—>

</script >

示例：

……

<title>初学JavaScript</title>

</head>

<body>

<script type="text/javascript">

document.write("初学JavaScript");

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

</script>

</body>

</html>

注：<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

执行原理：

外部JS文件：

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

直接在HTML标签中使用：

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

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

二、基本常见语法：

1、核心语法：同时声明和赋值变量

var catName="皮皮";

2、数据类型：

undefined:var width;

变量width没有初始值，将被赋予值undefined;

null:表示一个空值，与undefined值相等；

number：var iNum=23; //整数

var iNum=23.0; //浮点数

boolean:true 和false;

string:一组被引号（单引号或双引号）括起来的文本

var string1="This is a string";

3、typeof运算符：

typeof检测变量的返回值

typeof运算符返回值如下函数

undefined：变量被声明后，但未被赋值

string：用单引号或双引号来声明的字符串

boolean：true或false

number：整数或浮点数

object：javascript中的对象、数组和nul

4、String对象：

5、数组：

数组的常用属性和方法

类别 名称 描述

属性 length 设置或返回数组中元素的数目

方法 join( ) 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔

sort() 对数组排序

push() 向数组末尾添加一个或更多 元素，并返回新的长度

6、逻辑控制语句：

if(条件)

{

//JavaScript代码;

}