web自动化:DOM对象
一. 什么是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
最新文章
- ODBC,OLEDB,ADO,ADO.net,JDBC 理解
- 【模式匹配】Aho-Corasick自动机
- 如何删除github里面的文件夹?
- SmartWiki开发日记之Laravel缓存扩展
- js如何获取一个月的天数 data javascript
- COJ 0503 比赛
- mybatis使用时org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):的错误
- mxGraph改变图形大小重置overlay位置
- Android:OpenFire 相关API (持续更新)
- 网络性能测试工具Iperf/Jperf解读
- python web开发之django
- mqtt实现自动监听服务器消息
- Dom4J配合XPath解析schema约束的xml配置文件问题
- 为什么要花钱学 Python,自学不好吗?
- [Swift]LeetCode76. 最小覆盖子串 | Minimum Window Substring
- python提取浏览器Cookie
- Netty网络聊天(一) 聊天室实战
- 改变html元素
- Shell变量while循环内改变无法传递到循环外
- iOS应用管理(优化)
热门文章
- Display BLOBs and CLOBs (DB2可视化工具AQT )
- 父类virtual和overload,子类reintroduce; overload;
- Python 是怎么火起来的?
- make编译二
- Oracle学习笔记—数据库,实例,表空间,用户、表之间的关系
- Happy Hours, Happy Days
- javascript语言基础知识
- 流量分析系统---flume(测试flume+kafka)
- JQuery Div层滚动条控制(模拟横向滚动条在最顶端显示)
- 计算机网络概述 传输层 TCP流量控制