JS之DOM操作元素

2021-10-01 20:24:31 字數 1927 閱讀 5935

獲得id名稱是inp1物件節點


var inp1=document.


getelementbyid


("inp1");


方式一： 獲得元素的屬性


var ty=inp1.type;


var va=inp1.value;


var na=inp1.name;


操作元素的屬性


inp1.type=


"button"


;inp1.value=


"測試改變"


;方式二： 獲得元素的屬性


var ty1=inp1.


getattribute


("type");


獲得屬性的預設值


var va2=inp1.


getattribute


("value");


操作元素的屬性


inp1.


setattribute


("type"


,"button"


);
獲得id名稱是div1的物件


var div =document.


getelementbyid


("div1");


獲得css樣式 只是支援行內樣式的css


var wi=div.style.width;


var hi=div.style.height;


操作元素的css樣式 對於background-color格式


樣式在js中需要使用駝峰規則進行改變


div.style.width=


"300px"


;div.style.height=


"300px"


;div.style.backgroundcolor=


"red"


;通過操作類操作元素樣式


通過增加class類來增加對應的css樣式 注意：classname


div.classname=


"div2"


;
獲得div1的物件


var div=document.


getelementbyid


("div1");


獲得元素的文字內容


會獲得裡面的html中的內容


var inn=div.innerhtml;


只會獲得文字的資訊


var inn2=div.innertext;


會識別html資訊


div.innerhtml=


""不會識別html的資訊


div.innertext+=


""
建立節點的方法

document.


createelement


(「div")：
加入節點的方法:

一、末尾追加方式插入節點

parentnode.


(childelement)：末尾追加方式插入節點
二、在指定節點前插入新節點

parentnode.


insertbefore


(newnode,beforenode)：在


指定節點前插入新節點
刪除節點的方法

parentnode.


removechild


(childnode)


p.remove()


;
替換節點的方法

parentnode.


replacechild


(newnode, oldnode)

js操作DOM元素

document.createelement document.getelementbyid 返回對擁有指定 id 的第乙個物件的引用。document.getelementbyname 返回帶有指定名稱的物件集合。document.getelementbytagname 返回帶有指定標籤名的物件集...

ExtJS之 操作DOM元素

選擇器 ext.select 樣式表選擇器 ext.query 引數可以使 元素,屬性,偽類,css樣式 返回值 是 符合條件的節點的陣列 alert ext.query font 0 id alert ext.query aaaa 0 id alert ext.query s 0 id alert...

Dom元素操作

把建立的p元素新增到父元素box裡 btn1.onclick function 移除父元素裡的p元素 插入元素 insertbefore 被插入的元素，參照元素 var dom document.getelementbyid dom var newdom document.createelement...