DOM的理解和操作

2021-09-16 14:28:32 字數 3094 閱讀 6192

document object model的縮寫,就是以層次化的模式來描述網頁的方式。

dom是針對html和xml文件的乙個api(應用程式程式介面)。

dom描繪了乙個層次化的節點樹(節點關係)。

它允許開發人員查詢、新增、修改、刪除頁面的某一部分。

nodename ——節點的名字;

nodetype —— 返回乙個整數,代表這個節點的型別,1-元素節點,2-屬性節點,3-文字節點;

nodevalue —— 返回乙個字串,這個節點的值;

childnodes —— 返回乙個陣列,陣列由元素節點的子節點構成;

firstchild —— 返回第乙個子節點;

lastchild —— 返回最後乙個子節點;

nextsibling —— 返回目標節點的下乙個兄弟節點,如果目標節點後面沒有同屬於乙個父節點的節點,返回null;

previoussibling —— 返回目標節點的前乙個兄弟節點,如果目標節點前面沒有同屬於乙個父節點的節點,返回null;

parentnode —— 返回的節點永遠是乙個元素節點,因為只有元素節點才有可能有子節點,document節點將返回null;

nodetype屬性返回節點型別的常數值。不同的型別對應不同的常數值,12種型別分別對應1到12的常數值

元素節點 —— node.element_node(1)

屬性節點 —— node.attribute_node(2)

文字節點 —— node.text_node(3)

cdata節點 —— node.cdata_section_node(4)

實體引用名稱節點 —— node.entry_reference_node(5)

實體名稱節點 —— node.entity_node(6)

處理指令節點 —— node.processing_instruction_node(7)

注釋節點 —— node.comment_node(8)

文件節點 —— node.document_node(9)

文件型別節點 —— node.document_type_node(10)

文件片段節點 —— node.document_fragment_node(11)

dtd宣告節點 —— node.notation_node(12)

方法描述

栗子注意

createelement()

建立元素節點

var node = document.createelement('div');

建立的節點不會被自動新增到文件document裡

createtextnode()

建立文字節點

var val = document.createtextnode('text');

建立的節點不會被自動新增到文件document裡

插入節點到最後

insertbefore()

插入節點到目標節點的前面

node.insertbefore(_span, _p);

clonenode(boolean)

複製節點

node.clonenode(true);/node.clonenode(false)

引數true,複製整個節點和裡面的內容;false,只複製節點不要裡面的內容,複製後的新節點不會被自動插入到文件。

removechild()

刪除節點

node.removechild(_p);

getattribute()

獲取節點屬性

node.getattribute('title');

setattribute()

設定節點屬性

node.setattribute('title','我是個美少女');

class屬性不能這樣設定。

haschildnodes

判斷元素是否有子節點

node.haschildnodes;

返回布林值。

replacechild()

替換子節點

var returnnode = ul.replacechild(li,lis[1]); //用建立的li替換原來的第二個li

用於替換節點,接受兩個引數,第一引數是要插入的節點,第二個是要替換的節點,返回被替換的節點

document.getelementbyid()

返回帶有指定id的元素

var element=document.getelementbyid("intro");

document.getelementsbytagname()

返回包含帶有指定標籤名稱的所有元素的節點列表(集合/節點陣列)。

var element=document.getelementsbytagname('p');

獲取的是所有的p標籤

document.getelementsbyclassname()

返回包含帶有指定類名的所有元素的節點列表。

var element=document.getelementsbyclassname('_p');

獲取的是所有的含有『_p』類名的元素

document.getelementsbyname()

返回帶有指定名稱的物件的集合

var x=document.getelementsbyname('***'); alert(x.length);

查詢元素的 name 屬性,比如單選框它有一組一樣的name值,所以返回的是乙個元素的陣列,而不是乙個元素。

document.queryselector

返回匹配的第乙個元素

var obj = document.queryselector("#id"); var obj = document.queryselector(".classname"); var obj = document.queryselector("div");

如果沒有匹配項,返回null。

document.queryselectorall

返回匹配的元素集合

同上如果沒有匹配項,返回空的nodelist(節點陣列)。

Dom樹結構和dom操作

element 文件中的元素 attr parentnode.insertbefore a,b 在parentnode元素中的 b元素之前插入a元素 且b必須已經在dom結構中 插入a在b之前 返回得結構為靜態快照並不會隨之改變,其座標相對於視口 offsetwidth offsetheight 常...

DOM和表單操作

dom 建立節點和插入節點 建立節點 方法 描述 createelement 建立乙個新的節點,需要傳入節點的標籤名稱,返回建立的元素物件 createtextnode 建立乙個文字節點,可以傳入文字內容 innerhtml 也能達到建立節點的效果,直接新增到指定位置了 間接查詢節點 方法 屬性 描...

jquery操作DOM和事件

1.jquery操作dom的屬性 attr 1.1 獲得節點的屬性 jquery物件.attr 屬性名 eg 獲得節點物件的屬性 alert d1 attr src 1.2 設定節點的一對屬性 jquery物件.attr 屬性名 屬性值 eg 設定節點物件的一對屬性 1.3 設定節點的多對屬性 jq...