javascript之DOM技术(一)

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

一、使用DOM

考虑一个html文件:

<html>
<head><title>测试</title></head>
<body>
<p>测试</p>
</body>
</html>

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);

判断节点间关系:

alert(oHead.parentNode==oHtml); 
alert(oBody.previousSibling==oHead);
alert(oHead.nextSibling==oBody);
alert(oHead.ownerDocument==document);

2.检测节点类型:

通过节点的nodeType属性来检验节点类型:

alert(document.nodeType); //输出9

需要注意的是,DOM兼容的浏览器(以FF2.0为例),拥有Node.DOCUMENT_NODE、Node.ELEMENT_NODE等常量。各常量名称与数值对照表如下:

ELEMENT_NODE                 1
ATTRIBUTE_NODE              2
TEXT_NODE                     3
CDATA_SECTION_NODE         4
ENTITY_REFERENCE_NODE      5
ENTITY_NODE                   6
PROCESSING_INSTRCTION_NODE    7
COMMENT_NODE               8
DOCUMENT_NODE              9
DOCUMENT_TYPE_NODE        10
DOCUMENT_FRAGMENT_NODE  11
NOTATION_NODE               12

IE6不支持,不过你可以自定义一个JS对象Node。

时间: 2024-08-28 03:21:43

javascript之DOM技术(一)的相关文章

Javascript中DOM技术的的简单学习

第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树).    DOM是一种与浏览器,平台及语言无关的接口,能够以编程方式    访问和操作文档    1.DOM是Document Object Model(文档对象模型)的简称    2.提供了访问,操作该模型的API    2:DOM的分层结构    在DOM中,文档的层次结构被表示为树形结构

javascript之DOM技术(二)

一.样式编程 1.页面中的每一个元素都具有一个style对象,此对象管理元素的CSS样式.这是在IE4.0引入的,后来作为DOM标准被接受.使用方法: var oDiv=document.getElementById("div1"); alert(oDiv.style.backgroundColor); style对象拥有一个cssText属性,返回描述元素样式的CSS字符串. 2.样式对象style的方法(IE6并不支持这些方法): (1)getPropertyValue(prope

JavaScript事件委托技术实例分析_javascript技巧

本文实例分析了JavaScript事件委托技术.分享给大家供大家参考.具体分析如下: 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差. 其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的. 事件委托: 对事件处理程序过多的问题解决的方案就是事件委托技术. 事件委托技术利用了事件冒泡.只需指定一个事件处理程序. 我们可以为某个

你所不了解的javascript操作DOM的细节知识点(一)_javascript技巧

一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节点的类型,节点类型在Node类型中有以下几种: Node.ELEMENT_NODE(1); 元素节点 Node.ATTRIBUTE_NODE(2); 属性节点 Node.TEXT_NODE(3); 文本节点 Node.DOCUMENT_NODE(9); 文档节点 其实还有很多种,但是那些都不是很常用,所以就来理解这其中4种就可以了,我们先来看看节点类型,比如如

浅谈JavaScript中面向对象技术的模拟

javascript|对象 一.引言 在C#和Java语言中,面向对象是以类的方式实现的,特别是继承这个特性,类的方式继承表现出了强大的功能,而且也易于学习.JavaScript不是纯的面向对象的语言,而是基于对象的语言,对象的继承是以原型函数的形式继承的,很多初学者刚开始接触的时候不太理解,但是JavaScript这种以原型函数的形式实现面向对象技术,不仅是可行的,而且还为面向对象技术提供了动态继承的功能,本文主要讨论了JavaScript的面向对象技术.二.原型对象概述 每个JavaScri

Javascript遍历DOM结构和对象结构

在实际工作中,记住浏览器中对象的属性.方法几乎是件不可能完成的任务,保持一份资料或网址是个好办法.但是查阅资料也是要花费不少时间,如果能有个脚本将对象的结构打印出来,将会加速开发进程. 下面是我编写的查看对象结构例子,请下载附件获取可执行代码: //Animal是一个对象 Animal = { createNew: function( bundle ) { var animal = {}; var protect = bundle || {};//bundle传递的是指针,修改protect时外

你所不了解的javascript操作DOM的细节知识点(一)

这篇文章主要介绍了你所不了解的javascript操作DOM的细节知识点的相关资料,需要的朋友可以参考下 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节点的类型,节点类型在Node类型中有以下几种: Node.ELEMENT_NODE(1); 元素节点 Node.ATTRIBUTE_NODE(2); 属性节点 Node.TEXT_NODE(3); 文本节点 Node.DOCUMENT_NODE(9); 文

javascript基于DOM实现省市级联下拉框的方法

  本文实例讲述了javascript基于DOM实现省市级联下拉框的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 <html xmlns="http://www.w

javascript中DOM复选框选择用法实例

  本文实例讲述了javascript中DOM复选框选择用法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 <html xmlns="http://www