DOM 精簡知識教程

[原文]

先來看一張簡單的文件樹

this is a sample paragraph.

結果將會顯示"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.

另乙個:

this is a sample paragraph.

這個例子和上面並沒有什麼大的區別,僅僅是多了乙個空行,但是在ns中,會自動為空行加上乙個節點所以返回值是"undefined",而在ie中將跳過空行仍然指向p標籤。

更常用的方法:

this is a sample paragraph.

...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標籤種定義自己的屬性:

this is a sample paragraph.

...alert(document.getelementbyid("myparagraph").getattribute("myattribute"));

返回值將是"myvalue".但是請注意這裡必須使用getattribute,而不是attributename,因為有一些瀏覽器並不支援自定義屬性。

attributes也可以被輕易的從乙個元素中刪除,你可以使用removeattribute()或者將element.attributename指向乙個null值。

通過attributes我們就可以產生一些動態效果：

text in a paragraph element.

... code for the links ...

document.getelementbyid('sample1').setattribute('align', 'left');

document.getelementbyid('sample1').setattribute('align', 'right');

另一種:

text in a paragraph

element.

... 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:

先看一下例子：

this is the initial text.

... 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()訪問

看一下下面的結構也許會更明白一些：

可以看出通過document.getelementbyid('sample1').firstchild.nodevalue就可以讀取或者設定text nodes的值了。

另乙個更加複雜一點的例子：

this is theinitialtext.

它的文件結構

在這裡通過document.getelementbyid('sample1').firstchild.nodevalue講僅僅改變"this is the"

而initialtext.將不會改變.在這裡大家應該看到了它和innerhtml的不同了.當然你也可以這樣用：

document.getelementbyid('sample3').firstchild.nodevalue =

'onceupon a time...';

document.getelementbyid('sample3').firstchild.nodevalue =

'...in a galaxy far, far away';

其中的html**將不會被解釋,瀏覽器將把他們當成普通的文本來顯示。

建立和刪除text nodes:

var mytextnode = document.createtextnode("my text");

通過上面的**你可以建立乙個新的text node,但是它並不是文件樹的一部分,要讓它顯示在頁面上就必須讓它成為文件樹中某乙個節點的child,因為

text nodes不能有兒子,所以你不能將它加入到乙個text nodes中,attribute也不屬於文件樹的一部分,這條路也不行,現在只剩下elements nodes

了,以下的例子展示了如何新增和刪除乙個text node：

initial text within a paragraph element.

DOM 精簡知識教程

DOM 精簡知識教程

dom精簡教程

shtml精簡教程

DOM 精簡知識教程

DOM 精簡知識教程

dom精簡教程

shtml精簡教程

相關推薦