获取标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 直接获取标签
 
document.getElementById('i1'); //获取id为i1的标签
 
document.getElementsByTagName('div'); //根据标签名称获得标签数组
 
document.getElementsByClassName('c1'); //根据class属性获取标签的数组
 
document.getElementsByName('dsx'); //根据name属性获取标签数组
 
// 间接获取标签
 
var tmp=document.getElementById('h-test');
 
tmp.parentElement; // 父节点标签元素
 
tmp.children; //所有子标签
 
tmp.firstElementChild; //第一个子标签元素
 
tmp.lastElementChild; // 最后一个子标签元素
 
tmp.nextElementSibling; //下一个兄弟标签元素
 
tmp.previousElementSibling; //上一个兄弟标签元素

操作标签

文本内容操作

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
innerHTML与innerText
 
tmp.innerText; // 获取标签中的文本内容
 
tmp.innerText='老铁双击666'; //更改标签内文本内容
 
tmp.innerHTML; // 获取标签中的所有内容,包含html代码
 
tmp.innerHTML = '<a href="http://www.imdsx.cn">大师兄</a>' // innerHTML 可以将含有HTML代码的字符串变为标签
 
input、textarea标签
 
tmp.value; //获取input、textarea参数
 
tmp.value = '内容' // 对input、textarea的内容进行赋值
 
select标签
 
tmp.value; //获取select标签的value参数
 
tmp.value = '选项' // 修改select选项
 
tmp.selectedIndex; // 获取select标签的选项下标
 
tmp.selectedIndex = 1 // 通过下标更改select的选项

操作样式

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
tmp.className = 'c1'; // 更改标签class属性 只能有一个class属性
 
tmp.classList;// 获取样式数组
 
tmp.classList.add('aaa'); //添加样式 数组
 
tmp.classList.remove('aaa'); //删除样式
 
tmp.checked; //获取checkbox的状态 true为勾选
 
操作单独样式
 
style.xxx //操作样式的粒度更加细化,操作单个样式属性,相当于在标签中增加一个style属性
 
style.backgroundColor // 例:在css中样式可以通过【-】进行连接,在JavaScript中,所有的【-】都被去掉,【-】后面的第一个字符大写

操作属性

1
2
3
4
5
setAttribute(key,value) //设置属性,在标签中添加属性或自定义属性
 
removeAttribute(key) //删除属性,在标签中删除指定属性
 
attributes //获取标签的所有属性

创建标签

对象方式创建标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
createElement(tagName) //通过DOM创建一个标签对象
 
appendChild(tagObj) //在父级标签内添加一个子标签对象
 
 
字符串方式创建标签
 
insertAdjacentHTML(where, tagStr) //父级标签内或外添加一个子、兄标签
 
beforeBegin //插入到获取到标签的前面
 
afterBegin //插入到获取到标签的子标签的前面
 
beforeEnd //插入到获取到标签的子标签的后面
 
afterEnd //插入到获取到标签的后面

UI自动化(五)dom的更多相关文章

  1. Airtest 网易 UI 自动化工具 Airtest 浅用记录

    一 使用目的 该工具主要是面向游戏UI测试基于图像识别,如游戏框架unity,Cocos-js以及网易内部的游戏框架同时也支持原生Android App 的基于元素识别的UI自动化测试.本文主要使用目 ...

  2. 网易 UI 自动化工具 Airtest 浅用记录

    一 使用目的 该工具主要是面向游戏UI测试基于图像识别,如游戏框架unity,Cocos-js以及网易内部的游戏框架 同时也支持原生Android App 的基于元素识别的UI自动化测试. 本文主要使 ...

  3. POPTEST培训:web自动化测试之DOM

    POPTEST培训:web自动化测试之DOM   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq ...

  4. 小心!做 UI 自动化一定要跨过这些坑

    一 .引子 UI自动化,在移动互联网时代的今天,一直都是在各大测试社区最为火爆的一个TOPIC.甚至在测试同行面前一提起自动化,大家就会自然而然的问:“恩,你们是用的什么框架?appium?还是rob ...

  5. 如何做ui自动化---步骤详解

    第一步: 得到功能测试的常规用例,查看是否可以进行自动化,要明确,自动化不是为了自动化而自动化,自动化是节省人力,主要做回归测试,如果变动性特别大,不建议做自动化,具体可查看其它文章“什么适合做自动化 ...

  6. ui自动化笔记 selenium_webdriver,ui自动化框架(web)

    Selenium学习笔记 selenium webdriver是业界公认ui自动化测试的标准,其封装的api可以对浏览器的任何地方进行操作 selenium2.0和selenium3.0的区别? 3. ...

  7. UI自动化之三种等待

    UI自动化中常用三种等待 目录 1.强制等待 2.隐式等待 3.显示等待 1.强制等待 执行到某一条语句后,然后sleep(3),等待3秒后,才会继续执行后面的语句 2.隐式等待 隐式等待只需要声明一 ...

  8. (appium+python)UI自动化_09_unittest批量运行测试用例&生成测试报告

    前言 上篇文章[(appium+python)UI自动化_08_unittest编写测试用例]讲到如何使用unittets编写测试用例,并执行测试文件.接下来讲解下unittest如何批量执行测试文件 ...

  9. UI自动化技术在高德的实践

    一.背景汽车导航作为ToB业务,需要满足不同汽车厂商在功能和风格上体现各自特色的需求.针对这种情况,传统的UI开发方式,基本上是一对一的特别定制.但是这种方式动辄就要500~600人日的工作量投入,成 ...

  10. 基于PO和单例设计模式用python+selenium进行ui自动化框架设计

    一)框架目录的结构 二)config包当中的config.ini文件主要是用来存项目的绝对路径,是为了后续跑用例和生成测试报告做准备然后目前的配置文件大都会用yaml,ini,excel,还有.py也 ...

随机推荐

  1. poj1696

    没看题解,搜了一下都是什么叉积凸包,根本没有必要用吧.. 显然这个题我们找夹角就可以了,根据高中的公式 a·b=|a|*|b|*cos<a,b> 所以用点积找一个 cos<a,b&g ...

  2. ajax 上传文件,监听进度(progress)

    mdn 前端代码 github <body class="m-2"> <label for="a" class="btn btn-p ...

  3. spring-boot(三) HowTo

    Spring Boot How To 1. 简介 本章节将回答一些常见的"我该怎么做"类型的问题,这些问题在我们使用spring Boot时经常遇到.这绝不是一个详尽的列表,但它覆 ...

  4. 怎么在Centos7 下让我的mariadb开机启动?(已解决)

    以前我经常使用syscemctl工具在开机后执行 systemctl start mariadb (哈哈,打得可6,只是有点儿麻烦), 如果能开机自启动mariadb就好了. 所以,我想百度下看什么命 ...

  5. c++课设

    #include <stdio.h>#include <time.h>#include <math.h>#define C 60000;struct Student ...

  6. 9 个用于移动APP开发的顶级 JavaScript 框架【申明:来源于网络】

    9 个用于移动APP开发的顶级 JavaScript 框架[申明:来源于网络] 地址:http://www.codeceo.com/article/9-app-javascript-framework ...

  7. GC垃圾回收器

    java与C++之间有一堵由内存动态分配和垃圾收集技术所围成的“高墙”.jvm解决的两个问题:给对象分配内存以及回收分配给对象的内存.GC:将内存中不再被使用的对象进行回收.GC的作用域是JVM运行时 ...

  8. Codeforces 1072 - A/B/C/D - (Done)

    链接:http://codeforces.com/contest/1072/ A - Golden Plate - [计算题] #include<bits/stdc++.h> using ...

  9. js 限制输入框只能输入数字的问题

    常规情况下,input设置为 type=‘number’  可以避免汉字,字符,字母,空格的输入,但是不能避免小减号 以及小键盘的减号-,加号+的输入, 可以考虑 监控 输入框的oninput事件,方 ...

  10. Intellij IDEA注册激活破解

    1.2017年适用(2016.3.5到2017.2.4版均生效) 安装IntelliJ IDEA 最新版 启动IntelliJ IDEA 输入 license时,选择输入 [License serve ...