javascript DOM 獲取節點

2021-07-09 07:34:16 字數 1915 閱讀 3597

1.獲取元素節點:

1.1)通過元素節點的id屬性獲取:

語法:document.getelementbyid("元素id屬性的值");

例如:

1.2)根據元素的名稱獲取,獲取的是所有為該名稱的元素節點組成的陣列,可以用陣列的方法操作該節點陣列:

語法:document.getelementsbytagname("元素名稱");

例如:

結果:

1.3)根據元素節點的name屬性獲取,獲取的也是乙個由具有相同name屬性值得元素組成的陣列,可以用運算元組的方式操作:

語法:document.getelementsbyname("name屬性的值");

示例:

顯示結果一次為:

1.4)三種方法比較:

1.4.1)getelementbyid是document的方法,用於獲取整個文件特定id的元素

1.4.2)而getelementsbytagname和getelementsbyname是node介面的方法,任何節點都具有該方法,都可以使用該方法

1.4.3)示例:

結果一次為:

2.獲取屬性節點:獲取屬性節點的目的就是操作元素的屬性(讀或者寫),屬性節點即元素節點的屬性,所以可以像操作屬性一樣去操作屬性節點

2.1)方法:先獲取對應的元素節點(此處表示為el,再用el.屬性節點名稱或者el["屬性節點名稱"]

2.2)注意:在獲取元素節點的class屬性節點時,要寫為el.classname

2.3)示例

3.獲取元素節點的子節點:

3.1)獲取元素節點的所有子節點:採用元素的childnodes方法

3.1.1)示例:

3.2)獲取元素節點的指定子節點,採用元素的getelementbytagname("標籤名稱"):

3.2.1)示例:

3.3)獲取元素節點的第乙個和最後乙個子節點,採用元素的firstchild方法和lastchild方法:

3.3.1)示例:

4.獲取文字節點:

4.1)獲取文字節點主要就是對文字進行讀寫操作

4.2)方法:

4.2.1)由於文字節點是元素節點的子節點,所以可以採用獲取元素節點的子節點的方法獲取,具體採用哪個方法,視情況而定,通過該方法得到的還是節點。

4.2.1.1)示例:

結果:

4.2.2)如果想要讀寫文字節點的內容,還可以採用元素的nodevalue方法,獲取到節點的內容

4.2.2.1)示例:

javaScript DOM程式設計

1.獲取dom樹的根節點 2.getelementbyid 根據標籤的id獲取標籤元素和getelementsbytagname根據標籤名獲取標籤,返回的是陣列的形式 3.getelementsbynames 根據標籤的name屬性獲取標籤,返回的是陣列形式 有兩個input標籤,因此列印結果是2 ...

JavaScript DOM程式設計

dom document objective model 文字物件模型 例子 clickme 例子 先獲取某一指定的元素節點 再讀指定元素節點的屬性 設定指定元素節點的屬性的值 例子 你喜歡那個城市?你喜歡哪款單擊遊戲?name 先獲取某節點。用childnodes方法獲取指定元素節點的所有子節點。...

javascript DOM基本操作

1.用指定id選取元素 document.getelementbyid id div div document.getelementbyid div 2.用指定名字選取元素 document.getelementsbyname 一些html元素擁有name屬性 比如 和等 非唯一,所以多個元素可能有...