DOM 獲取標籤文字及屬性操作

innertext和innerhtml屬性都是用來獲取和設定標籤的內容的。但是二者還是有區別的。

innerhtml可以用於獲取和設定標籤的所有內容，包括標籤和文字內容

// innerhtml:內部的html // 獲取標籤內容的時候，不管標籤還是文字，都能獲取到

// innerhtml設定內容的時候，覆蓋原來內容，標籤也能生效，瀏覽器能解析這個標籤。

innertext可以用於獲取和設定標籤的文字內容，會丟棄掉標籤

//innertext:內部文字 // 獲取標籤內容的時候，只會獲取文字，標籤扔掉了

// 設定標籤內容的時候，覆蓋原來內容，對標籤進行轉義（目的：把標籤直接當文本來用）

二者的區別：

常見的表單屬性有：disabled、type、value、checked、selected

對於disabled、checked、selected三個屬性來說，比較特殊。

在標籤中，只要指定了disabled屬性，無論有值沒值，都代表這個input是被禁用的。注意，標籤的disabled僅僅是預設值。

在dom物件中，disabled的屬性是乙個布林型別的屬性，值只有true或者false

獲得焦點與失去焦點案例

onfocus:獲得焦點時觸發

onblur:失去焦點時觸發

【案例：**全選案例.html】

標籤不僅可以通過class屬性操作樣式，還可以通過style屬性操作樣式。同樣的dom物件可以通過classname操作樣式，也可以通過style屬性操作樣式。

//1. style屬性是乙個物件，裡面儲存了所有行內樣式對應的鍵值對。 //2. 如果樣式的名字帶了-，比如background-color,到了style物件中，變成了駝峰命名法，backgroundcolor（因為-在js中不是乙個合法的識別符號）

//3. style屬性只能獲取和設定行內樣式，在類樣式中定義的樣式通過style獲取不到。

style設定的樣式是行內樣式，因此優先順序要高於classname設定的樣式

1. document.body : body比較常用，並且在頁面中時唯一的，因此可以使用document.body直接獲取。 2. document.documentelement : 可以獲取html元素 3. document.head : 可以直接獲取head元素

4. document.title : 可以直接獲取title的文字

//引數：元素的id
//返回值：乙個元素，如果id不存在，返回null
document.
getelementbyid
("id"
);

//引數：標籤名
//返回值：偽陣列，無論有幾個元素，返回都是偽陣列
document.
getelementsbytagname
("tagname");
box.
getelementsbytagname
("tagname"
);

//引數：字串型別的類名 //返回值：偽陣列 document. getelementsbyclassname ("class"

)

注意：這個方法ie678不支援

//只適用於表單元素
var ps = document.
getelementsbyname
("aa"
);

//引數：是乙個css選擇器，，如果是類選擇器， .demo 如果是id選擇器： #aa //返回值：只會返回乙個物件，如果有很多個，會返回第乙個 document. queryselector() ;//引數：是乙個css選擇器 //返回值：會返回偽陣列，不管有多少個，都會返回偽陣列 document. queryselectorall()

;

我們之前討論的屬性，都是html規範中，標籤本來就有的屬性，對於標籤自定義的一些屬性，比較特殊。

在html頁面中，定義乙個自定義屬性

"box"
aa="bb"
>
div>

在對應的dom物件中是不存在的，在dom物件中只會存在固定的那些屬性。

var box = document.
getelementbyid
("box");
console.
log(box.aa)
;//undefined

attribute方法

attribute系列方法用於設定標籤的屬性，不管是自定義的還是固有的屬性。

jquery中通過attr()和prop()拿屬性，prop()適合拿布林值型別屬性，比如表單的checked、disabled等等

jquery中通過data()拿data-開頭的屬性。

//獲取標籤的屬性
box.getattribute(name);
//設定標籤的屬性
box.setattribute(name, value);
//移除標籤的屬性
box.removeattribute(name);

DOM 獲取標籤文字及屬性操作

DOM 獲取標籤

dom物件選擇，獲取和設定標籤屬性及自定義屬性

DOM標籤屬性和物件屬性

DOM 獲取標籤文字及屬性操作

DOM 獲取標籤

dom物件選擇，獲取和設定標籤屬性及自定義屬性

DOM標籤屬性和物件屬性

相關推薦