获取标签

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. spring mvc接收ajax提交的JSON数据,并反序列化为对象

    需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; ...

  2. Piggy-Bank 完全背包

    来源hdu1114 Problem Description Before ACM can do anything, a budget must be prepared and the necessar ...

  3. MySQL数据库导出

    因为业务需要,把MySQL查询的数据导出成csv文件,操作在Navicat中完成. 首选用SELECT语句查询数据,然后Navicat的导出,然后选csv,选路径,再加上首栏就可以了

  4. c++课设

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

  5. 泡泡一分钟:Cubic Range Error Model for Stereo Vision with Illuminators

    Cubic Range Error Model for Stereo Vision with Illuminators 带有照明器的双目视觉的三次范围误差模型 "链接:https://pan ...

  6. Vue中computed,methods 和watch

    Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...

  7. 实验二:MAL——简单后门 by:赵文昊

    实验二:MAL--简单后门 一.后门是什么? 哪里有后门呢? 编译器留后门 操作系统留后门 最常见的当然还是应用程序中留后门 还有就是潜伏于操作系统中或伪装为特定应用的专用后门程序. 二.认识netc ...

  8. VBA语法总结

    为了控制Excel,学了些VBA,总结下语法,下文分为五部分: 一.代码组织 二.常用数据类型 三.运算符 四.控制流 五.常用内置函数 一.代码组织 1.能写代码的地方有{模块,类模块}. 2.代码 ...

  9. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  10. vue中使用mui滑动条无法正常滑动

    需要引入 `mui.min.js`  引入之后浏览器会报错,mui.min.js中的'caller', 'callee', and 'arguments'是不严格模式的js,而webpack中是严格模 ...