DOM精简教程


Posted in Javascript onOctober 03, 2006

先来看一张简单的文档树
DOM精简教程
很明显树的顶层节点是NodeA节点,接下来可以通过指定的合适节点移动到树中的任何点,结合以下的代码你可以更好的了解这棵树节点间的相互关系:
NodeA.firstChild = NodeA1
NodeA.lastChild = NodeA3
NodeA.childNodes.length = 3
NodeA.childNodes[0] = NodeA1
NodeA.childNodes[1] = NodeA2
NodeA.childNodes[2] = NodeA3
NodeA1.parentNode = NodeA
NodeA1.nextSibling = NodeA2
NodeA3.prevSibling = NodeA2
NodeA3.nextSibling = null
NodeA.lastChild.firstChild = NodeA3a
NodeA3b.parentNode.parentNode = NodeA

DOM定义对操作一个文档对象的节点结构提供了实用的方法,它提供了像执行对象插入,更新,删除,克隆等这些常用的方法。
insertBefore()--在参考子节点之前插入一个新的子节点.如果参考的子节点为null,则新的子节点将作为调用节点的最后一个子节点插入。
replaceChild()--在childNodes集合种使用指定的newChild来代替oldChild;如果代替成功,则返回oldChild;如果newChild是null,则只需删除oldChild即可。
removeChild()--从节点的ChildNodes集合中删除removeChild指定的节点,如果删除成功,则返回删除的子节点。
appendChild()--添加一个新节点到childNodes集合的末尾,如果成功,则返回新节点。
cloneNode()--创建一个新的、复制的节点,并且如果传入的参数是true时,还将复制子节点,如果节点是一个元素,那么还将复制相应属性,返回新的节点。

为了在一棵文档树中访问或者建立一个新的节点,可以用下面这些方法:
getElementById()
getElementsByTagName()
createElement()
createAttribute()
createTextNode()
注意:在一个页面中只有一个文档对象,除了getElementsByTagName()外,其它方法均只能通过document.methodName()调用。

再看一下下面这个例子:
<html>
<head>
<title></title>
</head>
<body>
<p>This is a sample paragraph.</p>
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(document.documentElement.lastChild.firstChild.tagName);
//-->
</SCRIPT>
</body>
</html>
结果将会显示"P",下面是一些解释
document.documentElement - gives the page's HTML tag.
lastChild - gives the BODY tag.
firstChild - gives the first element in the BODY.
tagName - gives that element's tag name, "P" in this case.
另一个:
<html>
<head>
<title></title>
</head>
<body>

<p>This is a sample paragraph.</p>
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(document.documentElement.lastChild.firstChild.tagName);
//-->
</SCRIPT>
</body>
</html>
这个例子和上面并没有什么大的区别,仅仅是多了一个空行,但是在NS中,会自动为空行加上一个节点所以返回值是"undefined",而在IE中将跳过空行仍然指向P标签。

更常用的方法:
<p id="myParagraph">This is a sample paragraph.</p>
...
alert(document.getElementById("myParagraph").tagName);
这种方法你不用关心节点在文档树的哪一个地方,而只要保证在页面中它的ID号是唯一的就可以了。

接下来一种访问元素节点的方法是document.getElementsByTagName(),它的返回值是一个数组,例如你可以通过下面的例子改变整个页面的连接:
var nodeList = document.getElementsByTagName("A");
for (var i = 0; i < nodeList.length; i )
nodeList[i].style.color = "#ff0000";

attribute和attributes
attribute对象和元素相关,但是却没有被认为是文档树的一部分,因此属性不能作为子节点集合的一部分来使用。
有三种方法可以为元素建立新的属性
1.
var attr = document.createAttribute("myAttribute");
attr.value = "myValue";
var el = document.getElementById("myParagraph");
el.setAttributeNode(attr);
2.
var el = document.getElementById("myParagraph");
el.setAttribute("myAttribute", "myValue");
3.
var el = document.getElementById("myParagraph");
el.myAttribute = "myValue";
你可以在html标签种定义自己的属性:
<p id="myParagraph" myAttribute="myValue">This is a sample paragraph.</p>
...
alert(document.getElementById("myParagraph").getAttribute("myAttribute"));
返回值将是"myValue".但是请注意这里必须使用getAttribute,而不是AttributeName,因为有一些浏览器并不支持自定义属性。

attributes也可以被轻易的从一个元素中删除,你可以使用removeAttribute()或者将element.attributeName指向一个null值。
通过attributes我们就可以产生一些动态效果:
<p id="sample1" align="left">Text in a paragraph element.</p>
... code for the links ...
document.getElementById('sample1').setAttribute('align', 'left');
document.getElementById('sample1').setAttribute('align', 'right');
另一种:
<p id="sample2" style="text-align:left;">Text in a paragraph
element.</p>
... code for the links ...
document.getElementById('sample2').style.textAlign = 'left';
document.getElementById('sample2').style.textAlign = 'right';
跟上面的例子一样,展示了可用通过元素修改style中的属性,甚至是class中的.唯一要提到的是textAlign是从style中的text-align中演变而来的,有一条基本规律,就是style中的属性如果出现-则在dom中将会被去掉并且随后的一个字母将改为大写,还有一点就是如果即使元素中没有style属性,上述例子同样可以使用。

text nodes:
先看一下例子:
<p id="sample1">This is the initial text.</p>
... code for the links ...
document.getElementById('sample1').firstChild.nodeValue =
'Once upon a time...';
document.getElementById('sample1').firstChild.nodeValue =
'...in a galaxy far, far away';
首先text nodes并没有像elements那样具有id属性,所有它并不能直接通过document.getElementById()或者document.getElementsByTagName()访问
看一下下面的结构也许会更明白一些:
DOM精简教程
可以看出通过document.getElementById('sample1').firstChild.nodeValue就可以读取或者设置text nodes的值了。

另一个更加复杂一点的例子:
<p id="sample2">This is the <b>initial</b> text.</p>
它的文档结构
DOM精简教程
在这里通过document.getElementById('sample1').firstChild.nodeValue讲仅仅改变"This is the"
initial text.将不会改变.在这里大家应该看到了它和innerHTML的不同了.当然你也可以这样用:
document.getElementById('sample3').firstChild.nodeValue =
'<b>Once</b> upon a time...';
document.getElementById('sample3').firstChild.nodeValue =
'...in a galaxy <i>far, far</i> away';
其中的html代码将不会被解释,浏览器将把他们当成普通的文本来显示。

创建和删除text nodes:
var myTextNode = document.createTextNode("my text");
通过上面的代码你可以创建一个新的text node,但是它并不是文档树的一部分,要让它显示在页面上就必须让它成为文档树中某一个节点的child,因为
text nodes不能有儿子,所以你不能将它加入到一个text nodes中,attribute也不属于文档树的一部分,这条路也不行,现在只剩下elements nodes
了,以下的例子展示了如何添加和删除一个text node:
<p id="sample1">Initial text within a paragraph element.</p>
... code to add a text node ...
var text = document.createTextNode(" new text " ( counter1));
var el = document.getElementById("sample1");
el.appendChild(text);
... code to remove the last child node ...
var el = document.getElementById("sample1");
if (el.hasChildNodes())
el.removeChild(el.lastChild);
增加文本是很容易的,上面的代码建立了一个新的text node并且通过appendChild()方法将其加入到childNodes数组的末尾,并设置了一个counter1的全局变量,利于观察
hasChildNodes()的返回值是true or false;用来判断当前节点是否还有child,以阻止当其没有child的时候调用removeChild()产生的错误。

创建element nodes
有了上面的基础,应该更容易理解了,先看一下下面的代码
<div id="sample1">This text is in a DIV element.</div>
... code for the link ...
var paraEl, boldEl;
paraEl = document.createElement("p");
boldEl = document.createElement("b");
paraEl.appendChild(document.createTextNode("This is a new paragraph with "));
boldEl.appendChild(document.createTextNode("bold"));
paraEl.appendChild(boldEl);
paraEl.appendChild(document.createTextNode(" text added to the DIV"));
document.getElementById("sample1").appendChild(paraEl);
你还可以直接为新加的element nodes设置attribute,以下两种都可以:
boldEl.style.color = "#ffff00";
paraEl.appendChild(boldEl);
或者:
paraEl.appendChild(boldEl);
boldEl.style.color = "#ffff00";

Javascript 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
微信小程序实现倒计时功能
Nov 19 Javascript
js作用域及作用域链工作引擎
Jul 07 Javascript
JavaScript去除空格的几种方法
Oct 03 #Javascript
让您的菜单不离网站
Oct 03 #Javascript
为数据添加append,remove功能
Oct 03 #Javascript
Array对象方法参考
Oct 03 #Javascript
一个对于Array的简单扩展
Oct 03 #Javascript
滚动经典最新话题[prototype框架]下编写
Oct 03 #Javascript
图片自动更新(说明)
Oct 02 #Javascript
You might like
第二节--PHP5 的对象模型
2006/11/16 PHP
PHP音乐采集(部分代码)
2007/02/14 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python中pika模块问题的深入探究
2018/10/13 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Python代码注释规范代码实例解析
2020/08/14 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
股指期货心得体会
2014/09/13 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
企业文化学习心得体会
2016/01/21 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
详解MindSpore自定义模型损失函数
2021/06/30 Python
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
Go语言入门exec的基本使用
2022/05/20 Golang