dom 规划(html和xml)
html dom与xml dom关联:
什么是 DOM?
DOM 是 W3C(万维网联盟)的标准。
DOM 定义了訪问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它同意程序和脚本动态地訪问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对不论什么结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
DOM 是 Document Object Model(文档对象模型)的缩写。
什么是 XML DOM?
XML DOM 定义了全部 XML 元素的对象和属性,以及訪问它们的方法。
什么是 HTML DOM?
HTML DOM 是:
HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准
HTML DOM 定义了全部 HTML 元素的对象和属性。以及訪问它们的方法。
换言之,HTML DOM 是关于怎样获取、改动、加入或删除 HTML 元素的标准。
HTML DOM 节点树
HTML DOM 将 HTML 文档视作树结构。这样的结构被称为节点树:
注意:假设是像一些段落格式标签,比方div,p,这些标签想要设置里面的内容则须要内嵌标签。由于这些标签没有文本节点,仅仅能使用innerHTML设置内部标签。
通过 HTML DOM,树中的全部节点均可通过 JavaScript 进行訪问。全部 HTML 元素(节点)均可被改动,也能够创建或删除节点。
DOM 节点
依据 W3C 的 HTML DOM 标准,HTML 文档中的全部内容都是节点:
整个文档是一个文档节点
每一个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每一个 HTML 属性是属性节点
凝视是凝视节点
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父(parent)、子(child)和同胞(sibling)等术语用于描写叙述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
在节点树中,顶端节点被称为根(root)
每一个节点都有父节点、除了根(它没有父节点)
一个节点可拥有随意数量的子
同胞是拥有同样父节点的节点
以下的图片展示了节点树的一部分,以及节点之间的关系:
HTML DOM 方法
方法是我们能够在节点(HTML 元素)上运行的动作。
编程接口
可通过 JavaScript (以及其它编程语言)对 HTML DOM 进行訪问。
全部 HTML 元素被定义为对象。而编程接口则是对象方法和对象属性。
方法是您可以运行的动作(比方加入或改动元素)。
属性是您可以获取或设置的值(比方节点的名称或内容)。
HTML DOM 对象 - 方法和属性
DOM 属性
innerHTML 属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容非常实用。
nodeName 属性
nodeName 属性规定节点的名称。
nodeName 是仅仅读的
元素节点的 nodeName 与标签名同样
属性节点的 nodeName 与属性名同样
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
凝视:nodeName 始终包括 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
nodeType 属性
nodeType 属性返回节点的类型。
nodeType 是仅仅读的。
比較重要的节点类型有:
元素类型 | NodeType |
---|---|
元素 | 1 |
属性 | 2 |
文本 | 3 |
凝视 | 8 |
文档 | 9 |
HTML DOM 訪问
getElementById() 方法
getElementById() 方法返回带有指定 ID 的元素:
node.getElementById("id");
getElementsByTagName() 方法
getElementsByTagName() 返回带有指定标签名的全部元素。
node.getElementsByTagName("tagname");
getElementsByClassName() 方法
假设您希望查找带有同样类名的全部 HTML 元素,请使用这种方法:
document.getElementsByClassName("intro");
上面的样例返回包括 class="intro" 的全部元素的一个列表:
凝视:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。
HTML 事件的样例:
当用户点击鼠标时
当网页已载入时
当图片已载入时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时
onload 和 onunload 事件
当用户进入或离开页面时。会触发 onload 和 onunload 事件。
onload 事件可用于检查訪客的浏览器类型和版本号。以便基于这些信息来载入不同版本号的网页。
onload 和 onunload 事件可用于处理 cookies。
<body onload="checkCookies()">
onchange 事件
onchange 事件经常使用于输入字段的验证。
以下的样例展示了怎样使用 onchange。
当用户改变输入字段的内容时,将调用 upperCase() 函数。
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的所有过程。首先当某个鼠标button被点击时,触发
onmousedown 事件,然后。当鼠标button被松开时,会触发 onmouseup 事件。最后。当鼠标点击完毕时,触发
onclick 事件。
用于处理XML文档的DOM元素属性
属性名 |
描写叙述 |
childNodes |
返回当前元素全部子元素的数组 |
firstChild |
返回当前元素的第一个下级子元素 |
lastChild |
返回当前元素的最后一个子元素 |
nextSibling |
返回紧跟在当前元素后面的元素 |
noedValue |
指定表示元素值的读/写属性 |
parentNode |
返回元素的父节点 |
previousSibling |
返回紧邻当前元素之前的元素 |
用于遍历XML文档的DOM元素方法
属性名 |
描写叙述 |
getElementById(id) (document) |
获取有指定唯一ID属性值文档中的元素 |
getElementsByTagName(name) |
返回当前元素中指定标记名的子元素的数组 |
hasChildNodes() |
返回一个布尔值,指示元素是否有子元素 |
getAttribute(name) |
返回元素的属性值。属性由name指定 |
动态创建内容时所用的W3C DOM属性和方法
属性/方法 |
描写叙述 |
document.createElement(tagName) |
文档对象上的createElement方法能够创建由tagName指定的元素,假设以串div作为方法參数,就会生成一个div元素 |
document.createTextNode(text) |
文档对象的createTextNode方法会创建一个包括静态文本的节点 |
<element>.appendChild(childNode) |
appendChild方法将指定的节点添加到当前元素的子节点列表(作为一个新的子节点)。比如,能够添加一个option元素,作为select元素的子节点 |
<element>.getAttriture(name) |
这些方法分别获得和设置元素中name属性的值 |
<element>..setAttritube(name,value) |
|
<element>.insertBefore(newNode,targetNode) |
这种方法将节点newNode作为当前元素的子节点插到targetNode元素前面 |
<element>.removeAttribute(name) |
这种方法从元素中删除属性name |
<element>.removeChild(childNode) |
这种方法从元素中删除子元素childNode |
<element>.replaceChild(newNode,oldNode) |
这种方法将节点oldNode替换为节点newNode |
<element>.hasChildnodes() |
这种方法返回一个布尔值。指定元素是否有子元素 |
dom中全部的对象的属性及方法请參考w3cschool
Browser 对象參考手冊
点击下面链接,能够获得下面对象的很多其它信息,包括它们的集合、属性、方法以及事件。当中包括大量实例!
对象 | 描写叙述 |
---|---|
Window | JavaScript 层级中的顶层对象。表示浏览器窗体。 |
Navigator | 包括client浏览器的信息。 |
Screen | 包括client显示屏的信息。 |
History | 包括了浏览器窗体訪问过的 URL。 |
Location | 包括了当前 URL 的信息。 |
HTML DOM 对象參考手冊
请点击以下的链接,学习很多其它有关对象及其集合、属性、方法和事件的知识。
当中包括大量实例!
对象 | 描写叙述 |
---|---|
Document | 代表整个 HTML 文档,可被用来訪问页面中的全部元素 |
Anchor | 代表 <a> 元素 |
Area | 代表图像映射中的 <area> 元素 |
Base | 代表 <base> 元素 |
Body | 代表 <body> 元素 |
Button | 代表 <button> 元素 |
Event | 代表某个事件的状态 |
Form | 代表 <form> 元素 |
Frame | 代表 <frame> 元素 |
Frameset | 代表 <frameset> 元素 |
Iframe | 代表 <iframe> 元素 |
Image | 代表 <img> 元素 |
Input button | 代表 HTML 表单中的一个button |
Input checkbox | 代表 HTML 表单中的复选框 |
Input file | 代表 HTML 表单中的文件上传 |
Input hidden | 代表 HTML 表单中的隐藏域 |
Input password | 代表 HTML 表单中的password域 |
Input radio | 代表 HTML 表单中的单选button |
Input reset | 代表 HTML 表单中的重置button |
Input submit | 代表 HTML 表单中的确认button |
Input text | 代表 HTML 表单中的文本输入域(文本框) |
Link | 代表 <link> 元素 |
Meta | 代表 <meta> 元素 |
Object | 代表 <Object> 元素 |
Option | 代表 <option> 元素 |
Select | 代表 HTML 表单中的选择列表 |
Style | 代表单独的样式声明 |
Table | 代表 <table> 元素 |
TableData | 代表 <td> 元素 |
TableRow | 代表 <tr> 元素 |
Textarea | 代表 <textarea> 元素 |
版权声明:本文博主原创文章,博客,未经同意不得转载。
dom 规划(html和xml)的更多相关文章
- Android使用DOM生成和输出XML格式数据
Android使用DOM生成和输出XML格式数据 本文主要简单解说怎样使用DOM生成和输出XML数据. 1. 生成和输出XML数据 代码及凝视例如以下: try { DocumentBuilderFa ...
- PHP中利用DOM和simplxml读取xml文档
实例 用DOM获取下列xml文档中所有金庸小说的书名,该xml文档所在位置为 ./books.xml: <?xml version="1.0" encoding=" ...
- Python minidom模块(DOM写入和解析XML)
一.DOM写XML文件 #导入minidom from xml.dom import minidom # 1.创建DOM树对象 dom=minidom.Document() # 2.创建根节点.每次都 ...
- python XML文件解析:用xml.dom.minidom来解析xml文件
python解析XML常见的有三种方法: 一是xml.dom.*模块,是W3C DOM API的实现,若需要处理DOM API则该模块很合适, 二是xml.sax.*模块,它是SAX API的实现,这 ...
- Dom方法,解析XML文件
Dom方法,解析XML文件的基本操作 package com.demo.xml.jaxp; import java.io.IOException; import javax.xml.parsers.D ...
- Dom,pull,Sax解析XML
本篇随笔将详细讲解如何在Android当中解析服务器端传过来的XML数据,这里将会介绍解析xml数据格式的三种方式,分别是DOM.SAX以及PULL. 一.DOM解析XML 我们首先来看看DOM(Do ...
- Android SAX、DOM、Pull解析xml文件剖析与案例讲解
XML介绍 XML(Extensible Markup Language) 即可扩展标记语言,与HTML一样,都是SGML(Standard Generalized Markup Language,标 ...
- 使用dom解析器对xml文档内容进行增删查改
直接添代码: XML文档名称(one.xml) <?xml version="1.0" encoding="UTF-8" standalone=" ...
- dom 编程(html和xml)
html dom与xml dom关系: 什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了訪问 HTML 和 XML 文档的标准: "W3C 文档对象模型 (DOM) ...
随机推荐
- Linux通过使用pdb简单调试python计划
python自带的调试工具库:pdb # -*- coding:utf-8 -*- def func(num): s = num * 10 return s if __name__ == '__mai ...
- 使用SharePoint管理中心管理服务
使用SharePoint管理中心管理服务 为了管理服务应用程序.场管理员要么使用管理中心,要么使用PowerShell. 管理服务应用程序页面列出了场上执行的服务.你能够管理他们. 很多服务都有自己的 ...
- 解决.net的堆碎片化带来的内存占用过大的问题
场景 使用WCF开发的服务端在多个客户端登录后,其服务器的内存占用不断增加. 分析 使用Windbg分析得到内存碎片化严重,其中包含了非常大的空闲空间,最大的一块竟然有150M,真正使用的空间其实很小 ...
- 递归算法的数据结构和算法 C++和PHP达到
递归算法:它是一种间接的方法调用本身,直接或. 实施过程:按功能或子程序完成.在函数编写代码或子程序直接或间接拥有被称为.你可以完成递归. (相同类型的问题,子问题到最小问题有已知条件,然后来求解,然 ...
- chain pattern
16.4 纯与不纯的职责链模式 职责链模式可分为纯的职责链模式和不纯的职责链模式两种: (1) 纯的职责链模式 一个纯的职责链模式要求一个具体处理者对象只能在两个行为中选择一个:要么承担 ...
- C++程序代写实现HashSet class
C++程序代写实现HashSet class 专业程序代写(QQ:928900200) Implement a HashSet class for elements of type string.It ...
- HDOJ 4687 Boke and Tsukkomi 一般图最大匹配带花树+暴力
一般图最大匹配带花树+暴力: 先算最大匹配 C1 在枚举每一条边,去掉和这条边两个端点有关的边.....再跑Edmonds得到匹配C2 假设C2+2==C1则这条边再某个最大匹配中 Boke and ...
- 冒泡排序java
先对冒泡排序做一个简单的解释,然后是代码的实现.解释出资<java的数据结构和算法>,大家可以看看. 排序类: package com.dxx.order; public class Bu ...
- SQL Server数据库视图
1:什么是视图 2:视图和查询的区别 3:视图的优点 4:如何创建和管理视图 5:如何通过视图修改基本表的数据 6:如何通过视图实现数据的安全性 A:什么是视图: 视图(view):从一个或几个基本表 ...
- MFC 将文件拖进对话框获得文件信息
非常多软件都支持直接将文件拖进去进行处理的功能,详细一点如暴风影音,将视频或者音频文件拖进去就会自己主动開始播放,那么这个功能在MFC上面怎么实现的呢?事实上非常easy,过程例如以下: 第一步:将对 ...