您现在的位置是:首页 > Javascript
当前栏目
javascript之DOM技术(一)
2023-03-09 22:21:04 时间
![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高级程序设计》
相关文章
- PHP vs Node.js 深入讨论
- 看看各大科技公司都是如何使用CSS的
- 来携程第一次当面试官的一点儿感想(面试前端)
- HTML中创建优雅表格八大JS工具不能缺
- Java UrlRewrite 实现网站URL重写过程实录
- WebViewJavascriptBridge-Obj-C和JavaScript互通消息的桥梁
- 从架构演进的角度聊聊Spring Cloud都做了些什么?
- SELinux 入门
- 如何快速部署Node.js项目
- 早该知道的7个JavaScript技巧
- 详解JavaScript中的this
- 可视化分析WEB访问:logstalgia
- 防御XSS攻击的七条原则
- 比较不同的 PaaS 平台上的 Node.js 支持
- 一些达成共识的JavaScript编码风格约定
- Spring Boot 整合 Mybatis Annotation 注解的完整 Web 案例
- 网站盗链是什么?盗链与广告流量问题及如何防止
- 柏林纪行(中):Node.js Collaboration Summit
- 柏林纪行(下):JSConf EU
- jQuery技术内幕:深入解析jQuery架构设计与实现原理1