老老鼠

博客园 首页 新随笔 联系 订阅 管理

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     应用于元素的样式名称

 

 

posted on 2010-04-26 22:35  大老鼠  阅读(2398)  评论(0编辑  收藏  举报