操作DOM元素 1

js操作dom元素**的編寫

dom樹

傳統的html文件順序是:document->html->(head,body)

根據 dom，html 文件中的每個成分都是乙個節點。

整個文件是乙個文件節點

每個 html 標籤是乙個元素節點

包含在 html 元素中的文字是文字節點

每乙個 html 屬性是乙個屬性節點

注釋屬於注釋節點

一、document物件(dom核心物件)

1、dom屬性

title 返回或設定當前文件的標題

url 返回當前文件的url

bgcolor 設定文件的背景色

fgcolor 設定文件的前景色(設定文字顏色)

alert(document.title)
document.title="helloworld";
alert(document.url)
alert(location.href)
document.bgcolor="red";
document.fgcolor="blue";

2.dom獲取節點方法

getelementbyid() 返回擁有指定id的（第乙個）物件的引用

getelementsbytagname() 返回帶有指定標籤名的物件的集合

getelementsbyname() 返回帶有指定name指定名稱的物件的集合，主要是適用於表單

getelementsbyclassname() 返回帶有指定classname指定名稱的物件的集合

write() 缺點 1.浪費記憶體 2.邏輯性不強。一般通過節點之間的關係屬性獲取節點

var div1=document.getelementbyid("one");
var div2=document.getelementsbytagname("div");
var div3=document.getelementsbyname("name1");
var div4=document.getelementsbyclassname("classname");

二、節點三屬性:

文件中的每個成分都是乙個節點.(包括文字也是節點)，節點三個屬性：

1. nodename : 節點的名稱

2. nodevalue ：節點的值

3. nodetype ：節點的型別

節點的屬性

a. nodename（節點名稱）

元素節點的 nodename 是標籤名稱

屬性節點的 nodename 是屬性名稱

文字節點的 nodename 永遠是 #text

文件節點的 nodename 永遠是 #document

b. nodevalue（節點值）

1. 元素節點的 nodevalue 是 undefined 或 null

2. 文字節點的 nodevalue 是文字自身

3. 屬性節點的 nodevalue 是屬性的值

1、innerhtml可以作為獲取文字的方法也可以作為修改文字內容的方法 element.innerhtml 會直接返回element節點下所有的html化的文字內容 document.body.innerhtml //返回"文字文字"; 同樣逆向的： document.body.innerhtm="文字 "會生成！注意 innerhtml方法只能作用於元素節點呼叫；文字節點並不能使用這個方法返回undefined！ 2、nodevalue是乙個html dom的物件屬性；同樣的可以通過 nodevalue設定節點的文字內容也可以直接返回文字內容直接用節點物件呼叫就都可以： document.getelementsbytagname(div)[0].childnodes[0].nodevalue //返回「文字」另外 nodevalue 屬性並不只存在於文字節點下元素節點和屬性節點物件也都具有nodevalue屬性 3、textcontent 與innerhtml方法類似會返回物件節點下所有的文字內容但是區別為 textcontent返回的內容只有去html化的文字節點的內容如上例： document.body.textcontent //返回"文字文字" ！注意在dom中標籤換行產生的空白字元會計入dom中作為文字節點另外ie8以前不支援textcontent屬性 4、innertext方法與textcontent方法類似並且和innerhtml一樣也是作用於元素節點上但是瀏覽器對於這兩種方法解析空白字元的機制不一樣；不是很常用類似的還有outtext outhtml等類似操作文字相關的方法，不是很常用不介紹了；

123

4

c. nodetype（節點型別） : nodetype 屬性可返回節點的型別。　　

節點型別　　　節點名字　　　　節點值

nodetype(數值)　nodename　　　nodevalue

元素節點　　　1　　　　　標籤名　　　　　null

屬性節點　　　2　　　　　屬性名　　　　　屬性值

文字節點　　　3　　　　　#text　　　　　　文字

注釋節點　　　8　　　　#comment　　　　注釋的文字

文件節點　　　9　　　　#document　　　　 null

節點名稱：li

節點的值：null

節點型別：1

節點名稱：li

節點的值：null

節點型別：1

節點名稱：li

節點的值：null

節點型別：1

三、節點的關係屬性

物件.parentnode 獲得父節點的引用

物件.childnodes 獲得子節點的集合

物件.firstchild 獲得第乙個子節點

物件.lastchild 獲得第乙個子節點

物件.nextsibling 獲得下乙個兄弟節點的引用

物件.previoussibling 獲得上乙個兄弟節點的引用

缺點:相容性不好。

通過一些屬性可以來遍歷節點樹：

1、parentnode//獲取所選節點的父節點

var son= document.getelementbyid("son");
document.write(son.parentnode);

2、childnodes //獲取所選節點的子節點們

var father= document.getelementbyid("father");
document.write(father.childnodes );

3、firstchild //firstchild 屬性返回『childnodes』陣列的第乙個子節點。如果選定的節點沒有子節點，則該屬性返回 null。

var father= document.getelementbyid("father");
document.write(father.firstchild );

4、lastchild //lastchild 屬性返回『childnodes』陣列的最後乙個子節點。如果選定的節點沒有子節點，則該屬性返回 null。

var father= document.getelementbyid("father");
document.write(father.lastchild );

5、nextsibling //獲取所選節點的後乙個兄弟節點列表中最後乙個節點的nextsibling屬性值為null

var son= document.getelementbyid("son");
document.write(son.nextsibling );

6、previoussibling //獲取所選節點的前一兄弟節點列表中第乙個節點的previoussibling屬性值為null

var son= document.getelementbyid("son");
document.write(son.previoussibling );

操作DOM元素 1

Dom元素操作

DOM元素的操作

操作dom元素（3）

操作DOM元素 1

Dom元素操作

DOM元素的操作

操作dom元素（3）

相關推薦