web自动化_dom

作者: testerPM | 来源:发表于2020-01-08 20:49 被阅读0次

web自动化_dom
第十九单元 web端自动化基础篇
安装Appium
python爬虫之selenium获取网页
Web自动化测试（全网最给力自动化教程）
如何使用Selenium集成的WebDriver对元素进行定位
Web自动化之Headless Chrome概览
python自动化测试工具有哪些？
从面试题看考察知识点(三)
SSM框架遇到的问题

js不能直接操作html元素，比如要修改元素的样式，需要通过dom对象操作html元素
js ->dom对象->调用js提供的方法修改元素

dom（文档对象模型）是用于访问html元素的正式W3标准
当网页被加载时，浏览器会创建页面的文档对象模型
通过html dom，可以使用javaScript 访问html文档的所有元素
通过可编程的对象模型,javaScript可以：
1.改变页面HTML元素
2.改变页面HTML属性
3.改变页面CSS样式对页面中的所有事件做出反应

window:
1. 表示浏览器中打开的窗口
2.JavaScript层级中的顶层对象
3.windown是document的父节点

document:
1.代表窗口中显示的当前文档（页面）
2.通过document节点可以遍历到文档里所有子节点

-------------------------------编写js代码------------------------------------------------
f12->Console控制台编写js代码

document.getElementById("su");
<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">
document
#document
var element=document.getElementById("su");
undefined
element.setAttribute("value","重置");
undefined

(1)找到百度一下这个按钮

document.getElementById("su");

（2）定义变量，接收返回结果

var element=document.getElementById("su");

（3）调用setAttribute("value","重置");将百度一下更新为重置

element.setAttribute("value","重置");

image.png

(4)获取元素属性值

>element.value
>"重置"
>

(5)获取元素间的文本值 innerText

>document.getElementById("ah");
<a href="http://www.baidu.com" id="ah">百度一下</a>
>document.getElementById("ah").innerText;
"百度一下"
>

-------------------------------------html dom事件------------------------------------

（1） onload()--当网页加载完成时触发此事件 ----下面这段js代码要放在<script></script>

<script type="text/javascript">
    window.onload=function(){
    alert("网页已加载完毕才触发functon弹出的我");
}

</script>

（2)失去焦点---onblur

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道</title>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById("su").onblur=function（）{
            alert("光标要定位在input,否则我就失去了焦点喽")
        }

    
}
  
</script>  
    
</head>
<body>
   <input type="text" name="" id="su">
</body>
</html>

疑问：上面代码没有实现失去焦点的效果

（3）得到焦点---onfocus

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道</title>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById("su").onfocus=function（）{
            alert("得到焦点")
        }

    
}
  
</script>  
    
</head>
<body>
   <input type="text" name="" id="su">
</body>
</html>

(4)onchange-----改变文本值，当元素的值发生改变，就会触发function()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道</title>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById("su").onchange=function（）{
            alert("元素的value发生了改变")
        }

    
}
  
</script>  
    
</head>
<body>
   <input type="text" name="" id="su">
</body>
</html>

(5)onclick--单击触发

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道</title>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById("su").onclick=function（）{
            alert("元素被单击")
        }

    
}
  
</script>  
    
</head>
<body>
   <input type="text" name="" id="su">
</body>
</html>

（6）ondblclick()---双击触发

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道</title>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById("su").ondblclick=function（）{
            alert("元素被双击")
        }

    
}
  
</script>  
    
</head>
<body>
   <input type="text" name="" id="su">
</body>
</html>

(7) onmouseover---当鼠标移动到某元素上时触发

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道</title>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById("su").onmouseover=function（）{
            alert("鼠标移动上来了")
        }

    
}
  
</script>  
    
</head>
<body>
   <input type="text" name="" id="su">
</body>
</html>

                   -----------------------------------作业------------------------------------------

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道</title>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById("clear").onclick=function(){
             document.getElementById("user").setAttribute("value","")
             document.getElementById("pw").value=""
            
        }
       document.getElementById("log").onclick=function(){
             alert(document.getElementById("user").value)
             alert(document.getElementById("pw").value)
       }
    
}
  
</script>  
    
</head>
<body>
 
   用户名:<input type="text" name="username"  value="韬哥" id="user"><br>
   密码：<input type="password" name="pwd"  value="123456" id="pw"><br>
         <input type="button" name="login" value="登录" id="log">
         <input type="button" name="reset" value="重置" id="clear"><br>
   性别： <input type="radio" name="sex"  value="0">男
         <input type="radio" name="sex"  value="1">女<br>

   头像：<input type="file" name=""><br>
   住址：<select>
         <option>广东</option>省
        </select>
        <select>
            <option>深圳</option>市
        </select><br>

   爱好：<input type="checkbox" name="">篮球
        <input type="checkbox" name="">足球
        <input type="checkbox" name="">看书<br>

  备注信息：<textarea rows="50" cols="20">这是我的第一个网页</textarea>


</body>
</html>

疑问：
1 document.getElementById("user").setAttribute("value","")
document.getElementById("pw").value=""
区别：

2 alert(document.getElementById("user").value)
alert(document.getElementById("pw").value)
两个alert？
3 html不需要语句结束符？