分享
 
 
 

DOM 精简知识教程

王朝other·作者佚名  2007-01-26
窄屏简体版  字體: |||超大  

先来看一张简单的文档树

[/url]

很明显树的顶层节点是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.previousSibling= 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()访问

看一下下面的结构也许会更明白一些:

[url=http://www.98xj1.com/dom/img/nodes2.gif]

可以看出通过document.getElementById('sample1').firstChild.nodeValue就可以读取或者设置text nodes的值了。

另一个更加复杂一点的例子:

<p id="sample2">This is the <b>initial</b> text.</p>

它的文档结构

在这里通过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";

注:此文主要来自于一些英文资料和身边的一些参考书,如果有错误大家请指出,一起讨论,DOM我一点也不熟。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有