DOM2核心和DOM2 HTML
2010-04-26 22:35
190 查看
DOM不是JavaScript,它是文档
=======================================================================
众所周知,网页是一种结构化的文档,使用一组预定义的XML或HTML标签进行标记。当浏览器接收到网页文档时,会根据文档类型(doctype)和关联的样式表对其进行解析,然后以可视化形式显示在屏幕上。在与W3C标准兼容的浏览器中,网页文档也可以在遵循DOM规范的指导方针下使用JavaScript对象来引用。这些JavaScript对象可以通过脚本获得,而且提供了一种标准的、不针对特定浏览器的文档交互方式。
DOM是一组用来描述脚本怎样与结构化文档进行交互和访问的WEB标准。DOM定义一系列对象、方法和属性,用于访问、操纵和创建文档中的内容、结构、样式以及行为
DOM是由W3C开发的一组规范,这些规范规定了JavaScript这样的语言为符合标准需要实现的对象、方法和属性。通过建立并遵守规范,可以保证你编写的JavaScript代码在不同的操作环境(比如不同的浏览器)中具有一致的行为和相同的预期效果
DOM跟DHTML也不是一回事,这个概念描述的是添加到早期浏览器中与今天的DOM方式类似的操纵文档、样式和行为的特性。DOM背后的思想确实结合了DHTML的概念,但DHTML包含在浏览器间存在的差异的非标准对象。
核心Node对象
DOM2核心和DOM2 HTML中几乎每一个对象的基础都是Node对象,对于文档中的Element对象,可以使用nodeName属性取得胜于区分节点的标签名称。document.getElementById('a1').nodeName,如果a1为一A元素,则返回值为A
============================================================
对象 返回值
============================================================
Elements.nodeName 元素的名称,大写
Attr.nodeName 属性的名称,小写
Text.nodeName #text
============================================================
你可能会认为,要取得node关联的值,可以使用nodeValue属性。事实上nodeValue属性只适用于少数DOM对象,尤其是Attr、ProcessingInstrutions、Comments、Text和CDATASection。除此之外,其它对象的nodeValue属性值都返回null
父节点、子节点、同辈节点
=======================================================
var list = document.getElementById('list');
list.parentNode 直接父节点
list.childNodes 所有子元素数组
list.firstChild 第一个子节点
list.lastChild 最后一个子节点
list.previousSibling 前一个同辈节点
list.nextSibling 后一个同辈节点
节点属性(节点的属性包含在相应节点的attributes成员的一个NamedNodeMap对象中):
for(var i = 0;i < list.attribuets.length; i++){
var attribname = list.attributes.item(i).nodeName;
var attribvalue = list.attributes.item(i).nodeValue;
}
与NodeList对象类似,NamedNodeMap对象中的项也可以使用方括号语法来访问,如下也是合法的:
list.attributes.nodeName
但是,与NodeList对象不同的是,NamedNodeMap对象还具有一些便捷方法var link = list.attributes.getNamedItem('href').nodeValue这可以获得list中的href属性值。这方法与Element对象的getAttribute()方法类似,不过attributes.getNamedItem()方法在任何节点上都是有效的
节点的ownerDocument属性
一个节点的ownerDocument属性类似于指向节点所属根文档的引用,多数情况下,都可以通过它在作用域引用Document,或者window.document
检测节点属性
list.hasChildNode() //true表示有子节点,false没有子节点
list.hasAttribuets() //true表示有属性,false没有属性
操纵DOM节点树
//向列表末尾添加节点
var newchild = document.createElement('li');
newchild.appendChild(document.createTextNode('a new list item!'));
list.appendChild(newchild);
//向指定节点前添加节点(在list中倒数第二个元素位置插入节点)
list.insertBefore(newchild,list.lastChild);
//替换节点
var list1 = document.getElementById('list1');
list.parentNode.replaceChild(list1,list);
//删除节点
list.parentNode.removeChild(list);
核心Element对象
为了简化对attributes的处理,Element对象中包含了很多种用来操纵基础的Node对象的attributes属性的方法
var anchor = document.getElementById('a1');
var href = anchor.getAttribute('href'); //获得href属性值
anchor.setAttribute('title', 'new title'); //设置title属性值
anchor.removeAttribute('title'); //删除title属性值
//在Element对象中,getElementByTagName()方法返回一个NodeList对象
var list = document.getElementById('list');
var anchors = list.getElementsByTagName('*');
for(var i = 0; i < anchors.length; i++){
alert(anchors.nodeName);
}
核心Document对象
JavaScript的全局对象是window对象,而对于DOM,我们要讨论的是window.document,DOM核心规范中的Document对象本身也扩展自Node对象,因此Node对象的属性和方法也适用于Document对象,document.documentElement属性是文档根元素的快捷方式,对于浏览器呈现的HTML文档而言,就是<html>标签。
使用Document对象的方法创建节点
createElement(tagName) 创建Element节点
createAttribute(name) 创建Attr节点
createCDATASection(data) 创建CDATASection节点
createComment(data) 创建Comment节点
createDocumentFragment() 创建DocumentFragment节点
createEntityReference(name) 创建EntityReference节点
createProcessingInstruction(target,data) 创建ProcessingInstruction节点
createTextNode(data) 创建Text节点
多数情况下,你会使用createElement()和createAttribute()方法
虽然Document对象的getElementByTagName()方法与Element对象的同名方法功能相同,不过从技术上讲,它们并不是同一个函数。Document对象虽然不继承自Element对象,但它却包含了功能相同的getElementByTagName()方法,因而可以查询整个文档
DOM2 HTML的HTMLDocument对象
当HTML文档呈现在浏览器中时,window.document中的DOM文档对象实际上是HTMLDocumnent对象的一个实例,HTMLDocument对象从核心Document对象继承了所有成员,还添加了一些自己的属性和方法:
title 包含位于<title>标签中的字符串
referrer 包含链接到当前页面的前一页面的URL
domain 包含当前站点的域名
URL 包含浏览器在查看当前页面时地址栏中的URL
body 引用从<body>节点开始的DOM树
images 包含当前文档所有<img>标签的数组
applets 包含当前文档所有<applet>标签对应的DOM节点的数组
links 包含当前文档所有<link>标签对应的DOM节点数组
forms 包含当前文档所有<form>标签对应的DOM节点数组
anchors 包含当前文档所有<a>标签对应的DOM节点数组
cookie 包含当前页面所有cookie信息的字符串
=========================================================
open() 打开一个文档以便接受write()或writeln()方法的输出
close() 关闭当前文档
write(data) 将输入写入文档中
writeln(data) 将输入写入文档同时写入一个换行符
getElementByName(elementName) 按name值查找Element对象
var newdocument = document.open("text/html");
var markup = '<html>'
+ '<head><title>write example</title></head>'
+ '<body>hello world</body></html>';
newdocument.write(markup);
newdocument.close();
DOM2 HTML的HTMLElement对象
继承自核心Element对象的HTMLElement对象,同样添加自己的一些属性
id 包含供document.getElementById('idvalue')方法使用的id="idvalue"
title 用于进一步对元素进行语义化描述和悬停工具条
lang 是在RFC 1766中为节点语言定义的语言代码
dir 表示节点中文本的方向(默认是表示"从左向右"的ltr)
className 应用于元素的样式名称
=======================================================================
众所周知,网页是一种结构化的文档,使用一组预定义的XML或HTML标签进行标记。当浏览器接收到网页文档时,会根据文档类型(doctype)和关联的样式表对其进行解析,然后以可视化形式显示在屏幕上。在与W3C标准兼容的浏览器中,网页文档也可以在遵循DOM规范的指导方针下使用JavaScript对象来引用。这些JavaScript对象可以通过脚本获得,而且提供了一种标准的、不针对特定浏览器的文档交互方式。
DOM是一组用来描述脚本怎样与结构化文档进行交互和访问的WEB标准。DOM定义一系列对象、方法和属性,用于访问、操纵和创建文档中的内容、结构、样式以及行为
DOM是由W3C开发的一组规范,这些规范规定了JavaScript这样的语言为符合标准需要实现的对象、方法和属性。通过建立并遵守规范,可以保证你编写的JavaScript代码在不同的操作环境(比如不同的浏览器)中具有一致的行为和相同的预期效果
DOM跟DHTML也不是一回事,这个概念描述的是添加到早期浏览器中与今天的DOM方式类似的操纵文档、样式和行为的特性。DOM背后的思想确实结合了DHTML的概念,但DHTML包含在浏览器间存在的差异的非标准对象。
核心Node对象
DOM2核心和DOM2 HTML中几乎每一个对象的基础都是Node对象,对于文档中的Element对象,可以使用nodeName属性取得胜于区分节点的标签名称。document.getElementById('a1').nodeName,如果a1为一A元素,则返回值为A
============================================================
对象 返回值
============================================================
Elements.nodeName 元素的名称,大写
Attr.nodeName 属性的名称,小写
Text.nodeName #text
============================================================
你可能会认为,要取得node关联的值,可以使用nodeValue属性。事实上nodeValue属性只适用于少数DOM对象,尤其是Attr、ProcessingInstrutions、Comments、Text和CDATASection。除此之外,其它对象的nodeValue属性值都返回null
父节点、子节点、同辈节点
=======================================================
var list = document.getElementById('list');
list.parentNode 直接父节点
list.childNodes 所有子元素数组
list.firstChild 第一个子节点
list.lastChild 最后一个子节点
list.previousSibling 前一个同辈节点
list.nextSibling 后一个同辈节点
节点属性(节点的属性包含在相应节点的attributes成员的一个NamedNodeMap对象中):
for(var i = 0;i < list.attribuets.length; i++){
var attribname = list.attributes.item(i).nodeName;
var attribvalue = list.attributes.item(i).nodeValue;
}
与NodeList对象类似,NamedNodeMap对象中的项也可以使用方括号语法来访问,如下也是合法的:
list.attributes.nodeName
但是,与NodeList对象不同的是,NamedNodeMap对象还具有一些便捷方法var link = list.attributes.getNamedItem('href').nodeValue这可以获得list中的href属性值。这方法与Element对象的getAttribute()方法类似,不过attributes.getNamedItem()方法在任何节点上都是有效的
节点的ownerDocument属性
一个节点的ownerDocument属性类似于指向节点所属根文档的引用,多数情况下,都可以通过它在作用域引用Document,或者window.document
检测节点属性
list.hasChildNode() //true表示有子节点,false没有子节点
list.hasAttribuets() //true表示有属性,false没有属性
操纵DOM节点树
//向列表末尾添加节点
var newchild = document.createElement('li');
newchild.appendChild(document.createTextNode('a new list item!'));
list.appendChild(newchild);
//向指定节点前添加节点(在list中倒数第二个元素位置插入节点)
list.insertBefore(newchild,list.lastChild);
//替换节点
var list1 = document.getElementById('list1');
list.parentNode.replaceChild(list1,list);
//删除节点
list.parentNode.removeChild(list);
核心Element对象
为了简化对attributes的处理,Element对象中包含了很多种用来操纵基础的Node对象的attributes属性的方法
var anchor = document.getElementById('a1');
var href = anchor.getAttribute('href'); //获得href属性值
anchor.setAttribute('title', 'new title'); //设置title属性值
anchor.removeAttribute('title'); //删除title属性值
//在Element对象中,getElementByTagName()方法返回一个NodeList对象
var list = document.getElementById('list');
var anchors = list.getElementsByTagName('*');
for(var i = 0; i < anchors.length; i++){
alert(anchors.nodeName);
}
核心Document对象
JavaScript的全局对象是window对象,而对于DOM,我们要讨论的是window.document,DOM核心规范中的Document对象本身也扩展自Node对象,因此Node对象的属性和方法也适用于Document对象,document.documentElement属性是文档根元素的快捷方式,对于浏览器呈现的HTML文档而言,就是<html>标签。
使用Document对象的方法创建节点
createElement(tagName) 创建Element节点
createAttribute(name) 创建Attr节点
createCDATASection(data) 创建CDATASection节点
createComment(data) 创建Comment节点
createDocumentFragment() 创建DocumentFragment节点
createEntityReference(name) 创建EntityReference节点
createProcessingInstruction(target,data) 创建ProcessingInstruction节点
createTextNode(data) 创建Text节点
多数情况下,你会使用createElement()和createAttribute()方法
虽然Document对象的getElementByTagName()方法与Element对象的同名方法功能相同,不过从技术上讲,它们并不是同一个函数。Document对象虽然不继承自Element对象,但它却包含了功能相同的getElementByTagName()方法,因而可以查询整个文档
DOM2 HTML的HTMLDocument对象
当HTML文档呈现在浏览器中时,window.document中的DOM文档对象实际上是HTMLDocumnent对象的一个实例,HTMLDocument对象从核心Document对象继承了所有成员,还添加了一些自己的属性和方法:
title 包含位于<title>标签中的字符串
referrer 包含链接到当前页面的前一页面的URL
domain 包含当前站点的域名
URL 包含浏览器在查看当前页面时地址栏中的URL
body 引用从<body>节点开始的DOM树
images 包含当前文档所有<img>标签的数组
applets 包含当前文档所有<applet>标签对应的DOM节点的数组
links 包含当前文档所有<link>标签对应的DOM节点数组
forms 包含当前文档所有<form>标签对应的DOM节点数组
anchors 包含当前文档所有<a>标签对应的DOM节点数组
cookie 包含当前页面所有cookie信息的字符串
=========================================================
open() 打开一个文档以便接受write()或writeln()方法的输出
close() 关闭当前文档
write(data) 将输入写入文档中
writeln(data) 将输入写入文档同时写入一个换行符
getElementByName(elementName) 按name值查找Element对象
var newdocument = document.open("text/html");
var markup = '<html>'
+ '<head><title>write example</title></head>'
+ '<body>hello world</body></html>';
newdocument.write(markup);
newdocument.close();
DOM2 HTML的HTMLElement对象
继承自核心Element对象的HTMLElement对象,同样添加自己的一些属性
id 包含供document.getElementById('idvalue')方法使用的id="idvalue"
title 用于进一步对元素进行语义化描述和悬停工具条
lang 是在RFC 1766中为节点语言定义的语言代码
dir 表示节点中文本的方向(默认是表示"从左向右"的ltr)
className 应用于元素的样式名称
相关文章推荐
- DOM--3 DOM核心和DOM2 HTML(3)
- DOM2核心和DOM2 HTML
- DOM--3 DOM核心和DOM2 HTML(2)
- DOM--3 DOM核心和DOM2 HTML(1)
- HTML核心标签之表格标签(二)
- HTML 5核心内容
- CSS 设计彻底研究(一)(X)HTML与CSS核心基础
- HTML 5将成IE9核心 将向第三方开发者开放
- document的集合属性哪些是Dom2 HTML标准,你了解多少?
- php生成html原理核心代码
- HTML核心标签之表格标签(一)
- HTML 5核心内容
- HTML 5 Web SQL核心三叉戟
- (6)html的核心元素与特性组
- 深入解析HTML、CSS中的核心知识点
- jQuery 核心函数:jQuery(html,[ownerDocument])动态创建DOM元素
- html 5 本地数据库(二)-- Web Sql Database核心方法openDatabase、transaction、executeSql 详解
- 《CSS设计彻底研究》读书笔记 第01章 (X)HTML和CSS核心基础
- ASP.NET 3.5核心编程学习笔记(5):HTML控件
- jquery核心 02 jQuery(html,[ownerDocument])