JavaScript Dom

来源:互联网 发布:微邦软件 编辑:程序博客网 时间:2024/04/30 21:14

JavaScript Dom

首先需要理解的一点是,DOM是针对XML的基于树的API,它的实现有很多(各语言基本都有自己的实现),我们讨论的是javascript中或者说xhtml(html)对DOM的实现。

一、使用DOM

1.访问节点:
访问html元素:var oHtml=document.documentElement;
获取head元素:var oHead=oHtml.firstChild;
获取body元素:var oBody=oHtml.lastChild; 或者 var oBody=document.body;

也可以通过childNodes来做同样的工作:
var oHead=oHtml.childNodes[0] 或者 oHtml.childNodes.item(0);
var oBody=oHtml.childNodes[1] 或者 oHtml.childNodes.item(1);


2.检测节点类型:
通过节点的nodeType属性来检验节点类型:
alert(document.nodeType);  //输出9
需要注意的是,DOM兼容的浏览器(以FF2.0为例),拥有Node.DOCUMENT_NODE、Node.ELEMENT_NODE等常量。
   
   

名词:DHTML简介
1、DHTML 就是动态的html,是多个技术的综合
 html: 封装的数据对象
 css:  对数据对象进行修饰
 dom:  提供对数据对象访问的方法
 javascript: 实现对对象的灵活操作,是“粘合剂”
 
BOM的概念
BOM browser object model 窗口对象模型
|--document 文档对象
|--history  历史对象
|--location 地址对象
|--screen   屏幕对象
...

---------------------------------------------
dom 访问的几种方法
1、document.getElementById("对象的id");       id=""
   独立访问某一个对象的时候使用

2、document.getElementsByName("对象的name");  name=""
   返回的是一个对象数组(节点的列表)

3、document.getElementsByTagName("标签名称");  a p span div
   返回的也是一个对象数组
   

如何使用Dom获取网页中所有的对象呢?

我们使用document.all (获取网页中所有的对象)

注意:
 1、在获取网页所有的对象时,第一个节点会获取一个 "!" 它是网页的w3c规范声明
 
 2、在获取table对象的时候,我们会获取到一个tbody节点,它是属于表格的。


我们可以使用document.all.id 获取指定id的对象
但是注意 ,如果我们获取的id有多个对象,则返回的是一个节点列表


可以通过document.all(下标)的方式获取指定网页对象

还有一些常用获取集合的方法

anchors 获取所有带有 name 和/或 id 属性的 a 对象的集合。此集合中的对象以 HTML 源顺序排列。
applets 获取文档中所有 applet 对象的集合。
childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
embeds 获取文档中所有 embed 对象的集合。
forms 获取以源顺序排列的文档中所有 form 对象的集合。
frames 获取给定文档定义或与给定窗口关联的文档定义的所有 window 对象的集合。
images 获取以源顺序排列的文档中所有 img 对象的集合。
links 获取文档中所有指定了 HREF 属性的 a 对象和所有 area 对象的集合。
namespaces 获取 namespace 对象的集合。
scripts 获取文档中所有 script 对象的集合。
styleSheets 获取代表与文档中每个 link 或 style 对象的实例相对应的样式表的styleSheet 对象的集合。


     


原创粉丝点击