DOM標籤屬性和物件屬性

2022-09-14 04:57:11 字數 1790 閱讀 5496

dom元素的屬性分為兩種

(1)標籤屬性  直接寫在標籤上的屬性

(2)物件屬性  由於所有的dom元素都是object型別,所以我們可以通過物件的方式為dom元素設定屬性

1.標籤屬性

(1)設定標籤屬性

elem.setattribute(屬性名,屬性值);

注意:(1)屬性名單詞之間通常用"    -     "連線, 並且不使用駝峰式     例如    div-one

(2)屬性值必須為小寫字串

(3)可以通過標籤屬性獲取元素      例如:   document.queryselector("[abc='123']");

(2)獲取標籤屬性值,並返回

elem.getattribute(屬性名);

var str=div.getattribute("abc"); 

console.log(str);    //列印結果:  123

(3)刪除標籤屬性

elem.removeattribute(屬性名);

div.removeattribute("abc");

console.log(div); //列印結果:

(4)標籤的單屬性

屬性值和屬性名相同

示例:

//寫法1 和寫法2  都會使核取方塊被選中

1.物件屬性(1)設定物件屬性  使用點語法

elem.屬性名=屬性值;

獲取物件屬性值:

elem.屬性名    

var div = document.queryselector("div");  //

獲取div1

div.abc="123"; //

為div新增abc屬性 屬性值為 123

console.log(div); //

列印div

console.log(div.abc); //

獲取並列印div的 abc屬性值

這時我們發現物件屬性並不會顯示在標籤上

(2)物件屬性優先順序高於標籤屬性

dom屬性
(3)標籤屬性  與   對應的物件屬性

(a) checked   id   title  等  標籤屬性有對應的物件屬性   自定義屬性沒有

(b)class較為特殊,對應的物件屬性為  classname

input.classname="check1";

console.log(input);

//列印結果:

(4)style屬性   

每個元素都有style屬性

可以通過字串新增修改行內樣式

可用設定隊形屬性設定方式,新增修改行內樣式

通常用物件的寫法

示例: 建立標籤並設定樣式

function

ce(type, style)

console.log(

typeof (div));

//用法: ce(標籤名,樣式)

var div = ce("div", {

標籤屬性 物件屬性

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title head div1 title qqqqq 123123 div checkbox name id ck 標籤屬性 物...

節點屬性(DOM物件)

在文件物件模型 dom 中,每個節點都是乙個物件。dom 節點有三個重要的屬性 1.nodename 節點的名稱 2.nodevalue 節點的值 3.nodetype 節點的型別 一 nodename 屬性 節點的名稱,是唯讀的。1.元素節點的 nodename 與標籤名相同 2.屬性節點的 no...

DOM 物件的方法和屬性

一些常用的 html dom屬性 innerhtml 節點 元素 的文字值 parentnode 節點 元素 的父節點 childnodes 節點 元素 的子節點 attributes 節點 元素 的屬性節點方法 描述getelementbyid 返回帶有指定 id 的元素。getelementsb...