[转]使用Javascript和DOM Interfaces来处理HTML
本文概述了一些强大的,基本的DOM 级别一中的方法以及如何在JavaScript中使用它们。你将会学习到如何动态地创建,访问,控制以及移除HTML元素。这里提到的DOM方法,并非是HTML专有的;它们在XML中同样适用。这里所有的示例,在任何全面支持DOM level1 的浏览器里都能正常工作;例如Mozilla浏览器或者其他基于Mozilla的浏览器,像网景公司的下一代导航者(Navigatior)浏览器等。这里的示例代码在IE5中也能正常工作。
这里所提到的DOM方法是文档对象模型规范(级别一)的核心的一部分。DOM 级别一包括对文档进行访问和处理的方法(DOM 1 核心)和专门为HTML文档定义的方法。
javaScript DOM方法与属性摘要
1 createElement(element)
创建一个指定标签名创建一个新的元素节点,返回值为指向新建元素节点的引用指针。
eg) var para = document.createElement("p");
document.body.appendChild(para);
2 createTextNode()
创建一个包含着给定文本的新文本节点,返回一个指向新建文本节点的引用指针:
reference = document.createTextNode()
参数为新建文本节点所包含的文本字符串
eg)
var message = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(message);
document.body.appendChild(container);
3 cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本,参数为 true 或者 false,true 表示同时复制该节点的子节点,false 则不复制任何子节点。
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);
4 appendChild()
reference = node.appendChild(newChild);
插入节点,例子参考前面。
5 insertBefore()
reference = element.insertBefore(newNode,targetNode)
将一个给定节点插入到一个给定元素节点的给定子节点的前面,返回一个指向新增子节点的引用指针。
eg)
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);
6 removeChild()
reference = element.removeChild(node)
将从一个给定元素利删除一个子节点,返回一个指向已被删除的子节点的引用指针。
当某个节点被 removeChild()删除后,此节点所有子节点都被删除。
7 replaceChild()
reference = element.replaceChild(newChild,oldChild)
把一个给定父元素里的一个子节点替换为另外一个节点,oldChild 节点必须是 element 元素的一个子节点,返回值是一个指向已被替换的那个
子节点的引用指针。
eg)
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);
8 setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性
9 getAttribute
attributeValue = element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。
10 getElementById()
element = document.getElementById(ID)
寻找一个有着给定 id 属性值的元素,返回一个元素节点
11 getElementByTagName()
用于寻找有着给定标签名的所有元素:
elements = document.getElementsByTagName(tagName)
返回一个节点集合。
12 hasChildNodes
用来检查一个给定元素是否有子节点
booleanValue = element.hasChildNodes
返回 true 或 false。
13 DOM属性
节点的属性
nodeName 属性将返回一个字符串,其内容是给定节点的名字。
如果节点是元素节点,返回这个元素的名称;
如果是属性节点,返回这个属性的名称;
如果是文本节点,返回一个内容为#text 的字符串;
nodeType 属性将返回一个整数,这个数值代表给定节点的类型
nodeValue 属性将返回给定节点的当前值
如果节点是元素节点,返回null;
如果是属性节点,返回这个属性的名称;
如果是文本节点,返回文本节点的内容;
遍历节点树
childNodes 该属性返回一个数组,这个数组由给定元素节点的子节点构成
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
nextSibling 返回给定节点的下一个子节点
parentNode 返回一个给定节点的父节点
previousSibling 返回给定节点的下一个子节点??
14 setTimeout
javaScript 函数,能够让某个函数在经过一段预定的时间之后才开始执行,函数有两个参数,第一个参数是将要执行的那个函数的名字;
第二个参数是一个数值,以毫秒为单位设定了需要经过多长时间才开始执行由第一个参数所给出的函数:
setTimeout("function",interval);
- ·AJAX跨域问题解决办..
- ·ajax问题总结
- ·jQuery dataType指定..
- ·ajax+asp.net+mssql..
- ·ajax无刷新上传文件..
- ·ajax对象abort方法
- ·JavaScript代码,变..
- ·fckeditor编辑器在F..
- flash/flex/fcs/AIR(752)
- Asp.Net/C#/WCF(598)
- 操作系统及应用软件(376)
- JavaScript/Ajax(330)
- SQL及数据库(134)
- 黑客技术(115)
- Asp/VBScript(111)
- HTML/WML/CSS兼容/XML(102)
- PHP/apache/Perl(96)
- 网站排名及优化(94)
- 其他(75)
- showbo日志(66)
- lucene.net/分词技术(33)
- 计算机网络(26)
- 机械重工(26)
- C#设计模式(25)
- Google Maps开发(17)
- 日语学习(15)
- Canvas/VML/SVG(13)
- linux(11)
- 游戏开发(8)
- 正则表达式(5)
- Jsp/Java(4)
- ·javascript实现html..
- ·Javascript风格要素..
- ·Javascript风格要素
- ·动态加载JavaScript
- ·JavaScript陷阱
- ·ajax技巧
- ·IE对CSS样式表的限制..
- ·什么是Javascript匿..
