一. 什么是DOM对象

定义：DOM(Document Object Mode，文档对象模型)是一套web标准，定义了访问HTML文档的一套属性、方法和事件
本质：网页与脚本语言沟通的桥梁。脚本语言通过DOM对象来访问html页面，从而改变文档的结构、样式和内容
当浏览器载入HTML文档，它就会成为doument 对象
HTML DOM独立于平台和编程语言，它可被任何编程语言，如Java、JavaScript和VBScript使用

二. DOM对象

1. 在HTML DOM中：

文档对象：整个HTML文档
节点对象：所有的HTML元素是元素节点
属性对象：依附于元素节点，所有节点的属性都是节点
文本对象：HTML元素内的文本是文本节点

2. 两个顶级节点：

Window：表示当前打开的浏览器窗口
Document：表示窗口中显示的当前html页面(文档)

　　当浏览器载入 HTML 文档, 它就会成为 Document 对象

　　Document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）

　　Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

　　提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

三. HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点

四. 节点的父、子、同胞关系

节点树中的节点彼此拥有层级关系，常用父(parent)、子(child)、同胞(sibling)等术语来描述这些关系：父节点拥有子节点，同级的子节点被称为同胞

在节点树中，顶端节点被称为根(root)
每个节点都有父节点、除了根(它没有父节点)
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点

这些关系如下图所示：

五. Document 对象属性和方法

document对象的属性和方法:

属性/方法	描述
document.title	返回当前文档的标题
document.URL	返回当前文档完整的URL
document.forms	返回对文档中所有Form对象引用
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为NodeList对象
document.getElementById()	返回对拥有指定id的第一个对象的引用
document.getElementsByName()	返回带有指定名称的对象集合
document.getElementsByTagName()	返回带有指定标签名的对象结合
document.images	返回对文档中所有image对象引用
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll()是HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

实例1：document.title

<!DOCTYPE html>
<html>
<head>
    <title>My title</title>
</head>
<body>
    The title of the document is:
    <script type="text/javascript">
    document.write(document.title)
    </script>
</body>
</html>

结果：

实例2：document.URL

<!DOCTYPE html>
<html>
<head>
    <title>My title</title>
</head>
<body>
    The URL of the document is:
    <script type="text/javascript">
    document.write(document.URL)
    </script>
</body>
</html>

结果：

实例3：document.forms

<!DOCTYPE html>
<html>
<head>
    <title>My title</title>
</head>
<body>
    <form name="Form1"></form>
    <form name="Form2"></form>
    <form name="Form3"></form>

    <script type="text/javascript">
    document.write("This document contains: ")
    document.write(document.forms.length + " forms.")
    </script>
</body>
</html>

结果：

实例4：document.getElementsByClassName()

<!DOCTYPE html>
<html>
<head>
    <title>My title</title>
</head>
<body>
    请输入你的名字: <input type="text" class="name" />
    <br>
    请输入他的名字: <input type="text" class="name" />
    <br>
    <button onclick="myFunction()">点我</button>
    <script type="text/javascript">
    function myFunction(){
        var i
        var x = document.getElementsByClassName("name")
        for (i=0; i<x.length; i++) {
            x[i].style.backgroundColor = "blue";
        }
    }
    </script>
</body>
</html>

结果：

实例5：document.getElementById()

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function getValue(){
            var x = document.getElementById("myHeader");
            alert(x.innerHTML);
        }
    </script>
</head>
<body>
    <h1 id="myHeader" onclick="getValue()">This is a header</h1>
    <p>Click on the header to alert its value</p>
</body>
</html>

结果：

实例6：document.getElementsByName()

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function getElements(){
            var x = document.getElementsByName("myInput");
            alert(x.length);
        }
    </script>
</head>
<body>
    <input name="myInput" type="text" size="20" /><br/>
    <input name="myInput" type="text" size="20" /><br/>
    <input name="myInput" type="text" size="20" /><br/>
    <br/>
    <input type="button" onclick="getElements()" value="How many elements named 'myInput'?" />
</body>
</html>

结果：

实例7：document.getElementsByTagName()

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function getElements(){
            var x = document.getElementsByTagName("input");
            alert(x.length);
        }
    </script>
</head>
<body>
    <input name="myInput" type="text" size="20" /><br/>
    <input name="myInput" type="text" size="20" /><br/>
    <input name="myInput" type="text" size="20" /><br/>
    <br/>
    <input type="button" onclick="getElements()" value="How many input elements?" />
</body>
</html>

结果：

实例8：document.getElementsByTagName()

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function getElements(){
            var x = document.getElementsByTagName("input");
            alert(x.length);
        }
    </script>
</head>
<body>
    <input name="myInput" type="text" size="20" /><br/>
    <input name="myInput" type="text" size="20" /><br/>
    <input name="myInput" type="text" size="20" /><br/>
    <br/>
    <input type="button" onclick="getElements()" value="How many input elements?" />
</body>
</html>

结果：

六. Element 对象

在HTML DOM中，元素对象：一个HTML元素，即一个HTML标签对

元素对象：

可以有子节点、父节点
可以有属性
有节点名称、节点类型、节点值

七. Element 对象的属性和方法:

属性/方法	描述
element.attributes	返回一个元素的属性数组
element.childNodes	返回元素的一个子节点的数组
element.ClassName	设置或返回元素的class属性
element.getAttribute()	返回指定元素的属性值
element.getAttributeNode()	返回指定属性节点
element.getElementsByTagName()	返回指定标签名的所有子元素集合
element.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为NodelList对象
element.nodeName	返回元素的标记名(大写)
element.nodeType	返回元素的节点类型，元素节点的nodeType属性值是1，属性节点的属性值是2，文本节点的属性值是3
element.nodeValue	返回元素的节点值

实例1：element.attributes

<!DOCTYPE html>
<html>
<body>
    <p>点击按钮来查看 button 元素拥有多少属性</p>
    <button id="myBtn" onclick="myFunc()">试一下</button>
    <p id="demo"></p>
    <script>
        function myFunc() {
            var x = document.getElementById("myBtn").attributes.length;
            document.getElementById("demo").innerHTML = x;
        }
    </script>
</body>
</html>

结果：

实例2：element.childNodes，注意：元素中的空格被视为文本，而文本被视为节点

<html>
<body>
    <p id="demo">请点击按钮来获得 body 元素子节点的相关信息</p>
    <button onclick="myFunc()">试一下</button>
    <script>
    function myFunc() {
        var txt = "";
        var c = document.body.childNodes;
        for (i=0; i<c.length; i++) {
            txt = txt + c[i].nodeName + "<br>";
        };
        var x = document.getElementById("demo");
        x.innerHTML = txt;
    }
    </script>
</body>
</html>

结果：

实例3：element.className

<!DOCTYPE html>
<html>
<body id="myid" class="mystyle">
    <script>
        var x = document.getElementsByTagName("body")[0];
        document.write("Body class name is: " + x.className);
    </script>
</body>
</html>

结果：

实例4：element.getAttribute()

<!DOCTYPE html>
<html>
<body>
    请阅读 <a href="http://www.baidu.com" target="_blank">百度一下</a>
    <p id="demo">请点击按钮来显示上面这个链接的 target 属性值</p>
    <button onclick="myFunc()">试一下</button>
    <script>
        function myFunc() {
            var a = document.getElementsByTagName("a")[0];
            document.getElementById("demo").innerHTML = a.getAttribute("target");
        }
    </script>

</body>
</html>

结果：

实例5：element.getAttributeNode()

<!DOCTYPE html>
<html>
<body>
    请阅读 <a href="http://www.baidu.com" target="_blank">百度一下</a>
    <p id="demo">请点击按钮来显示上面这个链接的 target 属性值</p>
    <button onclick="myFunc()">试一下</button>
    <script>
        function myFunc() {
            var a = document.getElementsByTagName("a")[0];
            var x = document.getElementById("demo");
            x.innerHTML = a.getAttributeNode("target").value;
        }
    </script>
</body>
</html>

结果：

实例6：element.getElementsByTagName()

<!DOCTYPE html>
<html>
<body>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
    </ul>
    <p id="demo">请点击按钮来改变某个列表项的文本</p>
    <button onclick="myFunc()">试一下</button>
    <script>
    function myFunc() {
        var list = document.getElementsByTagName("UL")[0];
        list.getElementsByTagName("LI")[0].innerHTML = "Milk";
    }
    </script>
</body>
</html>

结果：

实例7：element.getElementsByClassName()

<!DOCTYPE html>
<html>
<body>
    <ul>
        <li class="drink">Coffee</li>
        <li>Tea</li>
    </ul>
    <p id="demo">请点击按钮来改变某个列表项的文本</p>
    <button onclick="myFunc()">试一下</button>
    <script>
    function myFunc() {
        var list = document.getElementsByClassName("drink")
        alert(list[0].innerHTML)
    }
    </script>
</body>
</html>

结果：

实例8：element.nodeName 得到的元素节点名是大写

<!DOCTYPE html>
<html>
<body>
    <p id="demo">请点击按钮来获得 body 元素子节点的节点名</p>
    <button onclick="myFunc()">试一下</button>
    <script>
        function myFunc() {
            var txt = "";
            var c = document.body.childNodes;
            for (i=0; i<c.length; i++) {
                txt = txt + c[i].nodeName + "<br>";
            };
            var x = document.getElementById("demo");
            x.innerHTML = txt;
        }
    </script>
</body>
</html>

结果：

实例9：element.nodeType

<!DOCTYPE html>
<html>
<body>
    <p id="demo">请点击按钮来获得 body 元素子节点的节点类型</p>
    <button onclick="myFunc()">试一下</button>
    <script>
        function myFunc() {
            var txt = "";
            var c = document.body.childNodes;
            for (i=0; i<c.length; i++) {
                txt = txt + c[i].nodeType + "<br>";
            };
            var x = document.getElementById("demo");
            x.innerHTML = txt;
        }
    </script>
</body>
</html>

结果：

实例10：element.nodeValue

<!DOCTYPE html>
<html>
<body>
    <p id="demo">请点击按钮来获得 button 元素的节点值</p>
    <button onclick="myFunc()">试一下</button>
    <script>
        function myFunc() {
            var c = document.getElementsByTagName("button")[0];
            var x = document.getElementById("demo");
            x.innerHTML = c.childNodes[0].nodeValue;
        }
    </script>
</body>
</html>

结果：

八. DOM事件

1. 我们可以再事件发生时执行Javascript，比如当用户在 HTML 元素上点击时

如需在用户点击某个元素时执行代码，请向一个HTML事件属性添加 Javascript 代码：

onclick = action...

一般等号后面是js的函数名，比如onclick = "myFunc()"

2. DOM事件分类

键盘事件
鼠标事件
框架/对象 (Frame/Object)事件
表单事件
拖动事件

3. HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

4. 常用事件

onclick：点击事件
onload：加载事件
onmousemove：鼠标被移动
onmousedown：鼠标按钮被按下
onmouseup：鼠标按钮被松开
onmouseout：鼠标从某元素移开
onmouseover：鼠标移到某元素上
onsubmit：确认按钮被点击

参考文章

http://www.w3school.com.cn/h.asp

http://www.runoob.com/html/html-tutorial.html

web自动化：DOM对象的更多相关文章

POPTEST培训：web自动化测试之DOM
POPTEST培训:web自动化测试之DOM poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq ...
Web自动化测试三 ----- DOM对象和元素查找
一.DOM对象 DOM(Document Object Model文档对象模型):将HTML的各种元素映射为JS可访问的对象.HTML文档中的所有内容都是节点,这些东西在HTML中我们称为元素. 整个 ...
Web自动化之Headless Chrome编码实战
API 概览 && 编码Tips 文档地址 github Chrome DevTools Protocol 协议本身的仓库有问题可以在这里提issue github debugger ...
爬虫实战：爬虫之 web 自动化终极杀手 ( 上）
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:陈象导语: 最近写了好几个简单的爬虫,踩了好几个深坑,在这里总结一下,给大家在编写爬虫时候能给点思路.本次爬虫内容有:静态页面的爬 ...
WEB自动化(Python+selenium)的API
在做Web自动化过程中,汇总了Python+selenium的API相关方法,给公司里的同事做了第二次培训,分享给大家 ...
Web自动化必会知识：「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」
1.web 基础-html.dom 对象.js 基本语法 Dom 对象里面涉及元素定位以及对元素的修改.因为对元素操作当中涉及的一些 js 操作,js 基本语法要会用.得要掌握前端的基本用法.为什么要 ...
【python+selenium的web自动化】- 元素的常用操作详解(一)
如果想从头学起selenium,可以去看看这个系列的文章哦! https://www.cnblogs.com/miki-peng/category/1942527.html 本篇主要内容:1.元素 ...
HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)
1.jQuery对象就是通过jQuery包装DOM对象后产生的对象. 2.jQuery对象和DOM对象的相互转换. 良好的书写风格: var $input=$("input" ...

随机推荐

父类virtual和overload，子类reintroduce; overload;
如果函数在父类中既是虚拟方法也是重载方法,那么:TBase=class(TObject)function DisappearRoutinel: String; overload; virtual;fu ...
Python中何时使用断言（转）
原文:http://blog.jobbole.com/76285/ 本文由伯乐在线 - 贱圣OMG 翻译.未经许可,禁止转载!英文出处:python maillist.欢迎加入翻译小组. 这个问题是 ...
web测试策略
一.输入框二.搜索功能三.添加功能四.修改功能五.删除功能六.注册.登陆模块七.上传图片测试八:文件导出九.文件下载页面十.查询结果列表十一.cookie 一.输入框 1 字 ...
Django为什么要跳转到不同的页面来实现不同的功能
其实是不同将信息提交给不同的页面交给不同的页面去处理同一个数据库,不同的模块实现不同的功能,当要实现某一个功能的时候直接跳转到那一个功能下面的url,可以把要实现的功能区分开,以python面向对象的 ...
mysql分组查询
有一张学生选课表 Table: Subject_Selection Subject Semester Attendee --------------------------------- ITB001 ...
requirejs源码分析: requirejs 方法–2. context.require(deps, callback, errback);
上一篇 requirejs源码分析: requirejs 方法–1. 主入口中的return context.require(deps, callback, errback); 调用的是make ...
LeetCode：杨辉三角【118】
LeetCode:杨辉三角[118] 题目描述给定一个非负整数 numRows,生成杨辉三角的前 numRows 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 5 输出: ...
C# TreeView,递归循环数据加载到treeView1中
TblAreaBLL bll = new TblAreaBLL(); private void button1_Click(object sender, EventArgs e) { LoadData ...
VC6.0中添加库文件和头文件
附加头文件包含 VC6.0中: VC6.0默认include包含路径:Tools>Options>Directories>Include files. 对于特定项目的头文件包含,在“ ...
PPA（Personal Package Archives）简介、兴起、使用
1.简介 PPA是Personal Package Archives,个人软件包文档,是默认情况下并未被包含在Ubuntu中的软件的一个集合.通常这些存储库的侧重点是单个的程序,不过他们也可以包含更多 ...

web自动化：DOM对象