JavaScript中對DOM操作

2021-08-22 15:12:40 字數 2440 閱讀 7217

1:element,元素

2:attribute,屬性

3:text,文字

var node1 = document.createelement(『div』); 

var node2 = document.createtextnode(『hello world!』);

// 返回當前文件中第乙個類名為 「myclass」 的元素 

var el = document.queryselector(「.myclass」);

// 返回乙個文件中所有的class為」note」或者 「alert」的div元素

var els = document.queryselectorall(「div.note, div.alert」);

// 獲取元素

var el = document.getelementbyid(『***』);

var els = document.getelementsbyclassname(『highlight』);

var els = document.getelementsbytagname(『td』);

element也提供了很多相對於元素的dom導航方法:

// 獲取父元素、父節點

var parent = ele.parentelement;

var parent = ele.parentnode;//唯讀,沒有相容性問題

var offsetparent=ele.offsetparent;//唯讀,找到最近的有定位的父節點。//沒有定位父級時,預設是body;但在ie7以下,如果當前元素沒有定位屬性,返回body,如果有,返回html;//如果當前元素某個父級觸發了haslayout,則返回觸發了haslayout這個元素。

// 獲取子節點,子節點可以是任何一種節點,可以通過nodetype來判斷

var nodes = ele.children;//標準下、非標準下都只含元素型別,但對待非法巢狀的子節點,處理方式與childnodes一致。

var nodes = ele.childnodes;//非標準下:只包含元素型別,不會包含非法巢狀的子節點。

//標準下:包含元素和文字型別,會包含非法巢狀的子節點。

//獲取元素屬性列表

var attr = ele.attributes;

// 查詢子元素

var els = ele.getelementsbytagname(『td』);

var els = ele.getelementsbyclassname(『highlight』);

// 當前元素的第乙個/最後乙個子元素節點

var el = ele.firstchild;//對待標準和非標準模式,如childnods

var el = ele.lastchild;

var el = ele.firstelementchild;//非標準不支援

var el = ele.lastelementchild;

var el = ele.nextsibling;

var el = ele.previoussibling;

var el = ele.nextelementsibling;

var el = ele.previouselementsibling;

相容的獲取第乙個子元素節點方法:

var first=ele.firstelementchild||ele.children[0];

// 新增、刪除子元素 

ele.removechild(el);

// 替換子元素

ele.replacechild(el1, el2);

// 插入子元素

parentelement.insertbefore(newelement, referenceelement);

//轉殖元素

ele.clonenode(true) //該引數指示被複製的節點是否包括原節點的所有屬性和子節點

// 獲取乙個的陣列 

var attrs = el.attributes;

// 獲取、設定屬性

var c = el.getattribute(『class』);

el.setattribute(『class』, 『highlight』);

// 判斷、移除屬性

el.hasattribute(『class』);

el.removeattribute(『class』);

// 是否有屬性設定

el.hasattributes();

JavaScript中的DOM操作

更新dom 1.直接修改標籤的innerhtml屬性 修改該屬性不僅可以修改文字內容,還可以修改標籤內部的子節點 2.修改innertext或者textcontent屬性 只能修改節點的文字內容,不能新增子節點 3.使用style屬性獲取或者設定對應屬性 插入dom 1.如果在乙個空的dom節點中進...

JavaScript中基礎的DOM操作

getelementid id 通過id獲取元素 id為乙個元素的id,因為id是唯一的,所以可以通過id找到元素 object getelementid id 來獲取物件 innerheml屬性 獲取或者替換html中的內容 object.innerhtml 獲取元素中的內容 object.sty...

javascript中獲取dom元素的高度和寬度

本身的寬高 width height padding clientwidth clientheight 本身的寬高 width height padding border offsetwidth offsetheight 距離左側和上部的距離,相對於視窗 offsetleft offsettop 獲...