一. 什么是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对象的更多相关文章

  1. POPTEST培训：web自动化测试之DOM

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

  2. Web自动化测试 三 ----- DOM对象和元素查找

    一.DOM对象 DOM(Document Object Model文档对象模型):将HTML的各种元素映射为JS可访问的对象.HTML文档中的所有内容都是节点,这些东西在HTML中我们称为元素. 整个 ...

  3. Web自动化之Headless Chrome编码实战

    API 概览 && 编码Tips 文档地址 github Chrome DevTools Protocol 协议本身的仓库 有问题可以在这里提issue github debugger ...

  4. 爬虫实战：爬虫之 web 自动化终极杀手 ( 上）

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:陈象 导语: 最近写了好几个简单的爬虫,踩了好几个深坑,在这里总结一下,给大家在编写爬虫时候能给点思路.本次爬虫内容有:静态页面的爬 ...

  5. WEB自动化(Python+selenium)的API

    在做Web自动化过程中,汇总了Python+selenium的API相关方法,给公司里的同事做了第二次培训,分享给大家                                         ...

  6. Web自动化必会知识：「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」

    1.web 基础-html.dom 对象.js 基本语法 Dom 对象里面涉及元素定位以及对元素的修改.因为对元素操作当中涉及的一些 js 操作,js 基本语法要会用.得要掌握前端的基本用法.为什么要 ...

  7. 【python+selenium的web自动化】- 元素的常用操作详解(一)

    如果想从头学起selenium,可以去看看这个系列的文章哦! https://www.cnblogs.com/miki-peng/category/1942527.html ​ 本篇主要内容:1.元素 ...

  8. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  9. 锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)

    1.jQuery对象就是通过jQuery包装DOM对象后产生的对象.   2.jQuery对象和DOM对象的相互转换.   良好的书写风格: var $input=$("input" ...

随机推荐

  1. 【转】PowerVM 的主要组成部分及概念

    PowerVM 是在基于 IBM POWER 处理器的硬件平台上提供的具有行业领先水平的虚拟化技术家族.它是 IBM Power System 虚拟化技术全新和统一的品牌(逻辑分区,微分区,Hyper ...

  2. MySQL中InnoDB存储引擎中的哈希算法

    InnoDB存储引擎使用哈希算法来对字典进行查找,其冲突机制采用链表方式,哈希函数采用除法散列方式.对于缓冲池页的哈希表来说,在缓冲池中的Page页都有一个chain指针.它指向相同哈希函数值的页的. ...

  3. 内置函数： filter 和 map

    内置函数———filter和map filter filter() 函数用于过滤序列,过滤掉不符合条件的元素,返回由符合条件元素组成的新列表.接收两个参数,第一个为函数,第二个为序列,序列的每个元素作 ...

  4. 我的Android进阶之旅------>修改Android签名证书keystore的密码、别名alias以及别名密码

    转载于:http://blog.k-res.net/archives/1229.html  和 http://blog.k-res.net/archives/1671.html ADT允许自定义调试用 ...

  5. PAT 1066. 图像过滤(15)

    图像过滤是把图像中不重要的像素都染成背景色,使得重要部分被凸显出来.现给定一幅黑白图像,要求你将灰度值位于某指定区间内的所有像素颜色都用一种指定的颜色替换. 输入格式: 输入在第一行给出一幅图像的分辨 ...

  6. celery的安装和使用

    celery是python开发的分布式任务调度模块,接口简单,开发容易,五分钟就写出一个异步发送邮件的服务,celery本身不含消息服务,它使用第三方消息服务来传递任务,目前,celery支持的消息服 ...

  7. iOS UIFont 的学习与使用

    通常,我们使用字体 都是系统默认的字体. 有时候 从阅读体验,美观度 设计师都会考虑用一些 更高大尚的字体. 系统字体库 给英文 各种style的发挥空间很大,但是 中文则不然. 但是苹果 给使用中文 ...

  8. $《第一行代码：Android》读书笔记——第13章 Android高级技巧

    (一)全局获取Context 1.创建ApplicationUtil类继承自Application类: public class ApplicationUtil extends Application ...

  9. 用blastn比对自己建立的数据库

    自己感兴趣的一些序列作为数据库,然后用blastn把测序的read比对到自己建立的数据库中. 1.用fasta文件创建blast数据库 makeblastdb -in input_file -inpu ...

  10. awk的逻辑运算符

    运算符 描述 赋值运算符 = += -= *= /= %= ^= **= 赋值语句 逻辑运算符 || 逻辑或 && 逻辑与 正则运算符 ~ ~! 匹配正则表达式和不匹配正则表达式 关系 ...