javascript之DOM技术(一)
JavaScript技术 dom
2023-09-11 14:16:03 时间
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
IE6不支持,不过你可以自定义一个JS对象Node。
3.处理特性
处理特性可以使用标准的NameNodeMap中的方法:
getNamedItem(name) removeNamedItem(name) setNamedItem(node) item(pos)
比如: p id="test" 测试 /p
假设变量oP是上面的p节点的引用,我们要访问oP的id属性:
var sId=oP.attributes.getNamedItem("id").nodeValue;
这些方法用起来很累赘,所以DOM又定义了三个方法来简化:
getAttribute(name) ——返回名称为name的属性的值
setAttribute(name,value) ——顾名思义
removeAttribute(name) ——顾名思义
上面的例子可以改写为:
var sId=oP.getAttribute("name");
4.访问指定节点:
熟知的getElementByTagName(name),getElementByName(name),getElementById(id)三个方法,不再展开。
5.创建和操作节点:
(1)创建新节点,一张IE(6.0)和FF对DOM Level1的创建新节点方法支持的对照表:
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
下面介绍常用的几个方法
(2)createElement(),createTextNode(),appendChild()
例子:
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![ExpandedBlockStart.gif](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![ExpandedBlockEnd.gif](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
在页面载入后,创建节点oP,并创建一个文本节点oText,oText通过appendChild方法附加在oP节点上,为了实际显示出来,将oP节点通过appendChild方法附加在body节点上。此例子将显示Hello World!
(3)removeChild(),replaceChild()和insertBefore()
从方法名称就知道是干什么的:删除节点,替换节点,插入节点。需要注意的是replaceChild和insertBefore两个参数都是新节点在前,旧节点在后。
(4)createDocumentFragment()
此方法主要是为了解决大量添加节点时,速度过慢。通过创建一个文档碎片节点,将要添加的新节点附加在此碎片节点上,然后再将文档碎片节点append到body上面,替代多次append到body节点。
例子:
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![ExpandedBlockStart.gif](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockEnd.gif](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
![ExpandedBlockEnd.gif](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![None.gif](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
二、HTML DOM的特征功能
HTML DOM的特性和方法不是标准的DOM实现,是专门针对HTML同时也让一些DOM操作变的更加简便。
1.让特性像属性一样
访问某元素的特性需要用到getAttribute(name)方法,HTML DOM扩展,可以直接使用同样名称的属性来获取和设置这些值:
比如 img src="test.jpg"/
假设oImg是此元素的引用
(oImg.getAttribute("src")可以直接写成:oImg.src,设置值简化为:
oImg.src="test2.gif";
唯一特殊的class属性,因为class是ECMAScript的保留字,所以替代的属性名是className.
2.table的系列方法:
为了简化创建表格,HTML DOM提供了一系列的表格方法,常用几个:
cells ——返回 /tr 元素中的所有单元格
rows ——表格中所有行的集合
insertRow(position) ——在rows集合中指定位置插入新行
deleteRow(position) ——与insertRow相反
insertCell(position) ——在cells集合的指定位置插入一个新的单元格
deleteCell(position) ——与insertCell相反
三。遍历DOM
DOM的遍历是DOM Level2中提出的标准,IE6没有实现,Mozilla和Safari已经实现,最新IE7不清楚是否实现。不再展开,具体请见《JavaScript高级程序设计》
带你彻底学会JS DOM技术之删除,复制,替换元素 参数obj表示被复制的元素,而参数bool是一个布尔值,取值如下。 1或true:表示复制元素本身以及复制该元素下的所有子元素。 0或false:表示仅仅复制元素本身,不复制该元素下的子元素。
带你彻底学会JS DOM技术之创建,插入元素 1.创建元素 在JavaScript中,我们可以使用createElement()来创建一个元素节点,也可以使用createTextNode()来创建一个文本节点,然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”
带你彻底学会JS DOM技术之获取元素 1.DOM概述 DOM对象 DOM,全称是“Document Object Model(文档对象模型)”,它是由W3C定义的一个标准。 在实际开发中,我们有时候需要实现这样的效果:鼠标移到元素上改变元素的颜色,或者动态添加新元素及删除元素等。这些效果就是通过DOM提供的方法来实现的。 简单地说,DOM里面有很多方法,我们可以通过它提供的方法来操作一个页面中的某个元素,如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。 DOM结构 DOM采用的是“树形结构”,用“树节点”的形式来表示页面中的每一个元素。我们先看下面的一个例子。
【jQuery入门】为JavaScript而生,简化JavaScript操作的神技术 之前我们学习了这个JSON热门技术,在之后的学习中都会多多少少的牵扯到JSON相关的知识的,好多技术中也会用到JSON,所以如果你还不知道JSON建议先去看一下我的上一篇博客。
相关文章
- [转] JavaScript 单例模式
- [ Javascript ] JavaScript中的定时器(Timer) 是怎样工作的!
- JavaScript调试技巧
- JavaScript插件 图片裁剪photoClip
- 26dwr - DWR中的JavaScript(创造一个与 Java 对象匹配的 Javascript 对象)
- 【JavaScript】Javascript中的函数声明和函数表达式
- JavaScript 评测代码运行速度的几种方法
- Java中的JavaScript技术
- 《深入理解JavaScript》——1.16 正则表达式
- 《众妙之门——JavaScript与jQuery技术精粹》——1.5 匿名函数和模块模式
- 《众妙之门——JavaScript与jQuery技术精粹》——2.5 协作代码复查
- 《众妙之门——JavaScript与jQuery技术精粹》——2.6 JavaScript代码复查实例
- 《JavaScript机器人编程指南》——1.1 理解JS机器人技术、NodeBots和Johnny-Five
- Javascript Promise技术
- TypeScript 的优缺点及与 JavaScript 的比较
- javascript: Convert special characters to HTML
- 【javascript】Javascript中"||"的妙用
- JavaScript异步并发请求问题