GBase 8a Gtester平台相关前端知识（一） —— Dom操作相关

GBase 8a MPP Cluster 是大数据时代成熟的分析型MPP数据库。最新 GBase 8a MPP Cluster V9版本的虚拟集群适用于系统的规划建设多套集群，可以实现各个集群业务的独立规划和统一管理，虚拟集群包括数据管理集群、用户管理集群和集群版本管理集群，各个逻辑子集群间可实现透明的数据迁移、数据关联和数据共享。

为了更有效的测试集群功能、更便捷的管理测试机器和执行测试用例，开发了Gtester平台，该平台主要用于测试机器的管理、用例集的管理和执行任务等。本文章主要针对GBase 8a Gtester平台的前端知识点中的DOM操作相关进行展开讲解。

DOM介绍

DOM定义

DOM全称为Document Object Model，即文档对象模型。DOM把死板的标签变成可以通过方法调用的对象，对象里面囊括了页面里的所有元素、功能。通过Dom提供的调用方式，来操纵这个页面当中的元素。类似于对象，它可以调用里面任何的东西。

DOM节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
文档：一个页面就是一个文档，DOM中使用document表示；
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示；
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示。
文档树如下图所示：

获取元素

在前端开发中，有时需要获取页面元素的数据或者根据需要更改页面元素的属性。本节讲解几种获取元素的方法，可以根据开发中遇到的情况进行选用。

通过id获取页面元素

语法	document.getElementById('id')
作用	根据id获取元素对象
参数	id：字符串（区分大小写）
返回值	元素对象或者null

简单案例分析

获取页面某个div标签的属性并打印该标签长宽。如下所示：
 

通过标签名获取元素

语法	document.getElementsByTagName('标签名')
作用	根据标签名获取元素对象
参数	标签名
返回值	元素对象集合

简单案例分析

获取页面ul标签元素。如下所示：
 

通过类名获取元素

语法	document.getElementsByClassName('类名')
作用	根据类名获取元素对象
参数	类名
返回值	元素对象集合

简单案例分析

获取页面类名为“divClass”的元素集合。如下所示：
 

通过选择器获取元素

语法	document.querySelector('.选择器')
作用	根据选择器获取第一个符合的元素对象
参数	.选择器（注意参数前加'. '）
返回值	第一个符合的元素对象

语法	document.querySelectorAll('.选择器')
作用	根据选择器获取所有符合的元素对象
参数	.选择器（注意参数前加'. '）
返回值	所有符合的元素对象

简单案例分析

获取页面选择器为“divClass”的第一个和所有元素对象集合，如下所示：
 

操作元素

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。

操作元素内容

元素的内容主要用到innerText和innerHTML。如下所示：
 

 

可以看出两种方式的内容替换存在区别：

innerText会去掉空格，但是不会识别HTML标签，标签内容被原样展示在页面。
innerHTML会保留空格并且识别换行符和HTML标签，innerHTML识别到<p>标签、<br>换行符和<p>标签中的style样式。

操作样式属性

可以通过JavaScript修改元素的大小、颜色、位置等样式。如下所示：
 

创建元素和属性

可以通过JavaScript向页面创建元素或属性。

4.1 创建元素

本小节以页面有一个div标签元素为基础，通过JavaScript增加一个P标签元素，步骤如下：
首先通过语法document.createElement()创建一个元素。

const pAppend = document.createElement('P')创建一个P标签元素。

然后通过语法document.createTextNode()创建一个文本节点，例如：

const text = document.createTextNode('123')

接着将文本节点增加到P标签元素上，语法如下：

pAppend.appendChild(text)

最后将P标签增加到页面存在的div标签中，语法如下：

div.appendChild(pAppend)  

（div是通过id属性获取到div的元素属性），代码和效果图如下所示：

创建属性

本小节以页面有一个div标签元素为基础，通过JavaScript为该div增加style属性，步骤如下：
首先通过语法document.createAttribute()创建一个属性，例如：

const attr = document.createAttribute('style')创建一个style属性。

然后通过.value给style属性赋值，如下所示：

attr.value = 'height:200px;background-color:pink;color:white'

最后将该属性设置到div标签上，语法如下：

div.setAttributeNode(attr) 

（div是通过id属性获取到div的元素属性），代码和效果图如下所示：
 

 

可以看出通过JS给div设置了高度、粉色背景和白色字体。

事件

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，可以在用户点击某按钮时产生一个事件，然后去执行某些操作。本文简单罗列一些常见的鼠标事件，如下所示：

onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus  	获取鼠标焦点触发
onblur	        失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发