JavaScript 節點分類與獲取元素的方法

2021-09-10 09:17:10 字數 1817 閱讀 2912

節點:

在dom中有許多不同型別的節點。主要分為三類:元素節點,文字節點,屬性節點。

元素節點:

像,,之類的元素。

文字節點:

像this is an example

.其中this is an example 是乙個文字節點。文字節點總是被包含在元素節點的內部。

屬性節點:

屬性節點用來對元素做出更具體的描述。例如,幾乎所有的元素都有乙個title屬性,

其中title="an example"是乙個屬性節點。

獲取元素的方法:

1.getelementbyid:

這個方法將返回乙個與那個有著特定id屬性值的元素節點對應的物件。使用形式如下:

doucument.getelementbyid(id);

2.getelementsbytagname:

getelementsbytagname 方法返回乙個物件陣列,每個物件分別對應著文件裡有著給定標籤的乙個元素。類似於getelementbyid,這個方法也是只有乙個引數的函式,它的引數是標籤的名字.使用形式如下:

document.getelementsbytagname("li");

3.getelementsbyclassname:

這個方法讓我們能夠通過class屬性中的類名來訪問元素。這個方法的返回值也與getelementbyclassname類似,都是乙個具有相同類名的元素的陣列。使用形式如下:

document.getelementsbyclassname(class);

獲取和設定屬性:

1.getattribute:

getattribute 是乙個函式。它只有乙個引數--你打算查詢的屬性的名字:

object.getattribute(attribute);

2.setattribute:

setattribute()允許我們對屬性節點的值做出修改:

object.setattribute(attribute,value);

3.childnodes:

在一棵節點樹上,childnodes屬性可以用來獲取任何乙個元素的所有子元素,它是乙個包含這個元素全部子元素的陣列:

element.childnodes

4.nodetype:

每乙個節點都有nodetype屬性,這個屬性可以讓我們知道自己正在與哪一種節點打交道,差勁的一點是nodetype的值並不是英文。使用形式如下:

node.nodetype;

nodetype屬性總共有12種可取值,但其中僅有3種具有實用價值。

元素節點的nodetype屬性值是1.

屬性節點的nodetype屬性值是2.

文字節點的nodetype屬性值是3.

5.nodevalue:

如果想改變乙個文字節點的值,那就使用dom提供的nodevalue屬性,它用來得到(和設定)乙個節點的值。

node.nodevalue.

6.firstchild和lastchild:

firstchild表示的是childnodes的第乙個元素,lastchild表示的是childnode的最後乙個元素。

JavaScript獲取節點

可以把html中的每個標籤看成乙個節點,那麼可以通過js將這些節點獲取出來,可以使用js的乙個內建物件 物件有自己的屬性和方法 取得這些節點並且進行操作 修改,刪除,替換其內容 該物件是乙個內建物件叫作document,內建物件就是已經建立好的物件,我們可以直接使用。瀏覽器標題欄 title 引用外...

JavaScript操作節點

之前我們能取得的節點物件,但是僅僅是取得而沒有做其他操作,那麼我們也可以建立乙個節點然後動態的插入到dom節點樹種 獲取div節點 var div document.getelementsbytagname div 0 建立文字節點 var textnode document.createtextn...

JavaScript 節點的屬性

節點的屬性 序號屬性名稱 功能childnodes 得到節點的所有子節點,已陣列的形式儲存 firstchild 得到節點的第乙個子節點 等價於 childnodes 0 lastchild 得到節點的最後乙個子節點 parentnode 得到節點的父節點 nextsibling 得到後乙個兄弟節點...