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) ...
随机推荐
- iOS使用CoreImage处理图像40中可用的滤镜名称
NSString* localPath = [[NSBundle mainBundle] pathForResource:@"1" ofType:@"jpg"] ...
- sdut 6-2 多态性与虚函数
6-2 多态性与虚函数 nid=24#time" title="C.C++.go.haskell.lua.pascal Time Limit1000ms Memory Limit ...
- Java--调试--单步调试,断言,单元测试
单步调试:主要查看变量内容的变化 1.设置断点位置,设置在可能出现问题的代码 2.以Debug as方式运行 程序 3.F5 --> step into 进入方法内部进行调试 F6 ...
- Visual Studio跨平台开发实战(2) - Xamarin.iOS基本控制项介绍
原文 Visual Studio跨平台开发实战(2) - Xamarin.iOS基本控制项介绍 前言 在上一篇文章中, 我们介绍了Xamarin 以及简单的HelloWorld范例, 这次我们针对iO ...
- Android DES加密的CBC模式加密解密和ECB模式加密解密
DES加密共有四种模式:电子密码本模式(ECB).加密分组链接模式(CBC).加密反馈模式(CFB)和输出反馈模式(OFB). CBC模式加密: import java.security.Key; i ...
- [Web Chart系列之五] 6. 实战draw2d之ConnectionRouter
前言 ConnectionRouter 的作用是定义连线的展示样式. 是直线连接还是曲线连接(好像也是基于Bezier曲线) 位于包: draw2d.layout.connection 下. 常见的有 ...
- 【剑指offer】面试题26:复制的复杂链条
def copyRandomList(self, head): if None == head: return None phead = head while phead: pnext = phead ...
- Cocos2d-x 脚本语言Lua中的面向对象
Cocos2d-x 脚本语言Lua中的面向对象 面向对象不是针对某一门语言,而是一种思想.在面向过程的语言也能够使用面向对象的思想来进行编程. 在Lua中,并没有面向对象的概念存在,没有类的定义和子类 ...
- Ubuntu下用NdisWrapper安装网卡驱动
下面是一个简单全面的使用NdisWrapper的指南.这是从Beginning Ubuntu Linux, Second Edition中提炼出来的. 这份指南是第8章的一部分.该章给出了在Ubunt ...
- 【原创】poj ----- 3009 curling 2 解题报告
题目地址: http://poj.org/problem?id=3009 题目内容: Curling 2.0 Time Limit: 1000MS Memory Limit: 65536K Tot ...