文档对象模型(DOM)的基本方法

一.直接引用结点
1.document.getElementById(id);
--在文档里面通过id来找结点
2.document.getElementByTagName(tagName);
--返回一个数组,包含对这些结点的引用
--如:document.getElementByTagName("span");将返回所有类型为span的结点

二.间接引用结点
3.element.childNodes
--返回element的所有子结点,可以用element.childNodes[i]的方式来调用
--element.firstChild=element.childNodes[0];
--element.lastChild=element.childNodes[element.childNonts.length-1];
4.element.parentNode
--引用父结点
5.element.nextSibling; //引用下一个兄弟结点
element.previousSibling; //引用上一个兄弟结点

三.获得结点信息
6.nodeName属性获得结点名称
--对于元素结点返回的是标记名称,如:<a herf><a>返回的是"a"
--对于属性结点返回的是属性名称,如:class="test" 返回的是test
--对于文本结点返回的是文本的内容
7.nodeType返回结点的类型
--元素结点返回1
--属性结点返回2
--文本结点返回3
8.nodeValue返回结点的值

--元素结点返回null
--属性结点返回undefined
--文本结点返回文本内容
9.hasChildNodes()判断是否有子结点
10.tagName属性返回元素的标记名称
--这个属性只有元素结点才有,等同于元素结点的nodeName属性

四.处理属性结点
11.每个属性结点都是元素结点的一个属性,可以通过(元素结点.属性名称)访问
12.利用setAttribute()方法给元素结点添加属性
--elementNode.setAttribute(attributeName,attributeValue);
--attributeName为属性的名称,attributeValue为属性的值
13.使用getAttribute()方法获得属性值
--elementNode.getAttribute(attributeName);

五.处理文本结点
14.innerHTML和innerText属性,这两个方法相信大家都很熟悉,不介绍了,值得注意的是无论是ie还是firefox都容易把空格、换行、制表符等当成文本结点。所有一般通过element.childNodes[i]引用文本结点的时候,一般要处理:
<script language"javaScript" type="text/javascript">
function cleanWhitespace(element)
{
for(var i=0; i<element.childNotes.length; i++)
{
var node = element.childNodes[i];

if(node.nodeType == 3 && !/\S/.test(node.nodeValue))
{
node.parentNode.removeChild(node);
}
}
}
</script>

六.改变文档的层次结构
15.document.createElement()方法创建元素结点
--如:document.createElement("Span");
16.document.createTextNode()方法创建文本结点
--如:document.createTextNode(" "); //注:他不会通过html编码,也就是说这里创建的不是空格,而是字符串
17.使用appendChild()方法添加结点
--parentElement.appendChild(childElement);
18.使用insertBefore()方法插入子节点
--parentNode.insertBefore(newNode,referenceNode);
--newNode为插入的节点,referenceNode为将插入的节点插入到这之前
19.使用replaceChild方法取代子结点
--parentNode.replaceChild(newNode,oldNode);
--注:oldNode必须是parentNode的子结点,
20.使用cloneNode方法复制结点
--node.cloneNode(includeChildren);
--includeChildren为bool,表示是否复制其子结点
21.使用removeChild方法删除子结点
--parentNode.removeChild(childNode);

七.表格的操作
--注:ie中无法直接将一个完整的表格结点插入到文档中
22.添加行和单元格
var _table=document.createElement("table"); //创建表
table.insertRow(i); //在table的第i行插入行
row.insertCell(i); //在row的第i个位置插入单元格
23.引用单元格对象
--table.rows[i].cells[i];
24.删除行和单元格
--table.deleteRow(index);
--row.deleteCell(index);
25.交换两行获得两个单元格的位置
node1.swapNode(node2);
--这个方法在firefox中将出错
通用方法:
function swapNode(node1,node2)
{
var _parent=node1.parentNode;
var _t1=node1.nextSubling;
var _t2=node2.nextSubling;
if(_t1)parent.insertBefore(node2,_t1);
else _parent.appendChild(node2);
if(_t2)parent.insertBefore(node1,_t2);
else _parent.appendChild(node1);
}

时间: 2025-01-03 07:31:26

文档对象模型(DOM)的基本方法的相关文章

MDN 文档对象模型 (DOM) - DOM概述

在本文章中 什么是 DOM? DOM 和 JavaScript 如何访问 DOM? 重要的数据类型 DOM 接口 接口及对象 DOM中核心接口 测试DOM API 本节提供了一个简单的概念性的DOM介绍:DOM是什么, 它是如何组织 HTML 及 XML 文档,你要如何访问它,这个API提供了那些参考信息和实例.  什么是 DOM? 文档对象模型 (DOM) 是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和

Javascript文档对象模型(DOM)实例分析

基础知识回顾: DOM 即(Document Object Model),文档对象模型,DOM实际是把HTML当作XML文件来进行处理,用对象的眼光来打量HTML,可以说DOM是继HTML后Web的最有用的发明.   Some review of XML 网页教学网 SGML(基于标签的语言的普遍规范),在SGML被用于定义HTML的DTD时,发现HTML本身是很不规范的.主要表现在某些标签可以省略/没 有/不允许结束标签(</xxx>),标签互相嵌入而很不不规范,属性值的定义方法也不统一等等

什么是DOM(Document Object Model)文档对象模型_DOM

D:document 文档 浏览器加载的页面 DOM O:object 对象 页面及页面中的任何元素都是对象 M:module 模型 页面中的元素的组织形式 DOM被W3C组织设计为一种平台无关.语言无关的API,程序或脚本通过其动态访问.修改文档的内容.样式.结构. DOM是web 浏览器的运行规范,javascript借助DOM成就了其web标准语言的地位,在web领域实现了所谓"一次编写到处运行"的目标. 文档对象模型(Document Object Model,DOM)是一种用

JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给HTML增加动态功能. 几乎所有主流的语言都可以编译为JavaScript,进而能够在所有平台上的浏览器中执行,这也体现了JavaScript的强大性和在Web开发中的重要性.如Blade:一个Visual Studio扩展,可以将C#代码转

《HTML5 Canvas开发详解》——1.3 文档对象模型(DOM)和Canvas

1.3 文档对象模型(DOM)和Canvas 文档对象模型代表了在HTML页面上的所有对象.它是语言中立且平台中立的.它允许页面的内容和样式被Web浏览器渲染之后再次更新.可以通过JavaScript访问DOM,从20世纪90年代末以来它已经成为JavaScript.DHTML和CSS开发最重要的一部分. 画布元素本身可以通过DOM,在Web浏览器中经由Canvas 2D上下文访问,但是在Canvas中创建的单个图形元素是不能通过DOM访问的.正如本章前面讲到的,这是因为画布工作在即时模式,它并

JavaScript对传统文档对象模型的支持

         这篇文章主要介绍了简述JavaScript对传统文档对象模型的支持,是JS学习进阶中的重要知识,需要的朋友可以参考下             这是将其在JavaScript语言早期版本中引入的模型.大家都被所有浏览器都支持,但只允许访问文件的某些关键部分,如表单,表单元素和图像.         该模型提供了若干个只读属性,如标题,URL和上次更改提供关于文档整体的信息.除了有由该模型可用于设置和获取文档的属性值提供各种方法. 文档属性在传统DOM: 下面是文档属性,可以使用传

如何: 通过HTML文档对象模型访问文档中的ActiveX控件的属性 .

如何: 通过HTML文档对象模型访问文档中的ActiveX控件的属性   此文章的信息应用于: Microsoft Internet Explorer (编程) 版本4.0, 4.01, 4.01 SP1, 4.01 SP2, 5, 5.01, 5.5,6.0 概要 CSDN文档中心文章 用 MSHTML 的一点经验 111222(原作) 说明了如何访问在HTML文档对象模型中的网页的元素.内容.但是,有时候开发者实际上需要访问的是网页中ActiveX控件的属性.方法和事件.例如,你在网页载入之

金山wps文字型窗体的使用方法

  金山wps是不少网友都在使用的一款办公软件,不过,金山wps的很多功能确实用户都不知道的.比如金山wps的文字型窗体,相信很多网友看到这个功能都是一头雾水,那么,什么是金山wps文字型窗体呢,金山wps文字型窗体怎么使用呢?一起来看看今天的金山wps文字型窗体使用方法吧! 金山wps文字型窗体介绍: 文字型窗体域是最常用的窗体域类型.比如姓名.年龄单元格中,都可以使用此种窗体域.方法是,首先将光标置于相应的单元格,然后点击"窗体"工具栏中的"文字型窗体域"按钮,

bbs树型结构的实现方法(二)

树型结构 下面这种方法是大怪兽和怡红公子现在采用的方法 create table forum (ID int NOT NULL IDENTITY,/*帖子序列号*/rootID int NOT NULL, /*根帖子序列号*/parentID int NOT NULL default=0,/*双亲帖子序列号*/indent tinyint,/*缩进*/order tinyint,/*同主题帖子排序*/username varchar(40) NOT NULL,/*用户名*/time daytim