JavaScript小介绍
众所周知JS是一门轻量级的脚本语言，我们可以将它们插入HTML页面中，在插入HTML后，所有的现代浏览器都可以执行它们。
我们可以在HTML中使用JS编写函数、处理数据，还可以改变HTML中的元素、元素属性、元素样式等等。
JavaScript用法
在HTML中要使用JS，是极其简单的事情，只需要在HTML中插入一个<script>标签，将你的JS代码放置在<script>和</script>中间即可。对于代码的位置，既可以放置于<head>标签内，也可以是<body>标签内，其具体位置可以视执行位置而定。
一个小的示例：
alert("My First JavaScript");
document.write("<h1>This is a heading</h1>");
当然为了让JS能与HTML进行分离，也可以将代码放入单独的文件中，引入方法如下（此处外部JS文件名为：myScript.js）：
JS的语法跟许多C系编程（C、C++、Java、Python等）非常类似，所以芒果就不做过多的介绍,大家可以在w3schools进行学习。
JavaScript操作DOM
在知道JS的用法之后，我们一起来看看JS到底是怎么HTML元素的。
当网页被加载时，浏览器就会创建页面的文档对象模型DOM(Document Object Model),JS就是利用DOM来访问HTML中所有的元素。
HTML DOM被构造为如下所示对象树——HTML DOM树：
通过DOM，JS 可以获得创建动态 HTML 的权限，包括改变页面中的所有 HTML 元素、改变页面中的所有 HTML 属性、改变页面中的所有 CSS 样式、删除或添加HTML 元素和属性、对页面中所有已有的 HTML 事件作出反应、 能在页面中创建新的 HTML 事件。
一个改变页面元素属性的示例：
Hello World!
document.getElementById("p1").innerHTML="New text!";
JavaScript在自动化中的一个小运用
在对JS有了基本的认识之后，我们来看一个在UI自动化过程的小运用。我们在做web UI自动化的过程中经常会遇到能够定位元素，但是却无法对于元素进行操作的情况。
比如下例中，就是由于被操作元素有readonly属性，所以无法使用webdriver提供的方法对于输入框进行赋值，所以我们可以通过使用JS来删除该属性后，再进行输入操作。
操作元素代码如下：
使用JS进行处理，以及后续赋值操作Python代码如下：
#使用JS操作DOM来删除readonly属性
str_js ="var setDate=document.getElementById('train_date');setDate.removeAttribute('readonly');"
driver.execute_script(str_js)
#使用JS操作DOM来清空输入框
str_js1 ="var setDate=document.getElementById('train_date');setDate.value='';"
driver.execute_script(str_js1)
#使用webdriver定位输入框，并输入内容
date_element = driver.find_element_by_id("train_date")
date_element.send_keys("2019-06-30")
总结
在前文中，跟大家一起对JS进行了一个小的学习，也利用了一个小的例子，带大家领略了前端知识之后，在自动化测试方面的小便捷，希望大家能有所收获哟~
如果是想学习更多的关于本文的知识，可以学习交流可以加我微信：xiang520and 或者QQ群：243771258一起探讨学习完整的前端基础（HTML+CSS+JS，包括BootStrap、Angular、React、Vue）的学习哟。
网友评论