DOM element 特性的讀取總結

2022-03-31 01:06:35 字數 3455 閱讀 6963

html 元素標準的屬性:

id  元素在文件中的唯一識別符號

title   附加說明資訊

lang    元素內容的** 很少使用

classname  與元素的class 特性對應

dir  語言的方向 很少使用

1,取得特性 

getattribute() 給定名稱的特性不存在時 返回null

2,設定特性

setattrbuite() 接受兩個引數 要設定的特性名和值(該方法既可以操作html特性也可操作自定義特性),通過該方法設定的特性名會被統一轉化為小寫形式

如果特性已經存在,setattribute()會以指定的值替換現有的值;如果特性不存在 setattribute()則建立該屬性並設定相應的值

如:div.setattribute("class","ft") (在ie8之前的版本通過該方法設定class和style是沒有任何效果的,事件處理程式特性時也一樣)

注意:像下面這樣為dom元素新增乙個自定義的屬性,該屬性並不會自動成為特性

div.mycolor="red";

alert(div.getattribute("mycolor")) // null (ie除外)

同樣的 為dom元素設定乙個自定義特性 該特性也不會成為屬性

var div = document.getelementbyid("div");

console.log(div.mycolor);

console.log(div.getattribute('mycolor'));

div.setattribute('mycolor1', 'aaa');

console.log(div.mycolor1);

console.log(div.getattribute('mycolor1'));

3,刪除特性

removeattribute() 徹底刪除元素的特性(ie6及以前版本不支援該方法)

4,attributes(js高程-267)

先大概的介紹下該屬性:element型別是使用attrbutes屬性的唯一乙個dom節點型別。attributes屬性中包含乙個namenodemap,與nodelist類似,也是乙個"動態"的集合。元素的每乙個特性都由乙個attr節點表示,每個節點都儲存在namednodemap物件中。namednodemap物件擁有下列方法。

① getnameditem(name) 返回nodename屬性等於name的節點

② removenameditem(name) 從列表中移除nodename等於name的節點

③ setnameditem(node)  向列表中新增節點 以節點的nodename屬性為索引

④ item(pos) 返回位於pos位置處的數字

attributes屬性中包含一系列節點,每個節點的nodename就是特性的名稱,而節點的nodevalue就是特性的值。要取得元素的id特性可以:

var id=element.attributes.getnameditem("id").nodevalue;

var id=element.attributes["id"].value; (.nodevalue也可以) 

也可通過上述兩種方法來設定特性的值,即先取得特性的節點,然後再將其nodevalue設定為新值

div.attributes.getnameditem("id").nodevalue = 'acc';

呼叫removenameditem()方法與在元素上呼叫removeattribute()的效果相同:直接刪除具有給定名稱的特性 

如 :  var oldattr = div.attributes.removenameditem("id");返回的是被刪除特性的attr節點

最後,setnameditem()是乙個很不常用的方法,通過這個方法可以為元素新增乙個新特性,為此需要傳入特性節點,如下所示。

element.attributes.setattrbuite(newattr');

每個特性節點都有乙個名為"specified"的屬性 值為true 則表示是**指定的還是系統預設的

主要用途:遍歷元素的特性

5,檢測是否含有某個特性:

element.hasattribute()

前面三種為:(當然也可取標準的特性)

var div = document.getelementbyid('abc');

var attr = document.createattribute('mycolor');

attr.value = 'red';

//add

div.setattribute('mycolor','red');

div.setattributenode(attr);

div.attributes.setnameditem(attr);

console.log(div.getattributenode('mycolor'));

//get and update

div.getattribute('mycolor');

div.getattributenode('mycolor').nodevalue;

div.attributes.getnameditem('mycolor').nodevalue== div.attributes['mycolor'].nodevalue;

//delete

div.removeattribute('mycolor');

div.removeattributenode(div.getattributenode('mycolor'));  返回的是被刪除的物件

div.attributes.removenameditem('mycolor');  返回的是被刪除的物件

對比發現  div.getattributenode('mycolor') 和 div.attributes.getnameditem('mycolor')  這兩個是同乙個物件

alert(div.getattributenode('mycolor') === div.attributes.getnameditem('mycolor'));   // true

最後一種為html5的新特性 data-

var div = document.getelementbyid('abc');

var data = div.dataset;

console.log(data.max);   //'ssss'

最後一種是規範的自定義特性,比較推薦的

C 反射讀取類定製特性資訊

先來屢屢思路 此專案又分為3個小專案 1.whatsnewattributes類庫檔案 用於定義定製特性類,標示跟新資訊 2.myclass類庫檔案 使用whatsnew定製特性標記的類 3.checker控制台應用程式 用反射讀取myclass中的公共成員方法,以及定製特性 因此 myclass類...

從螢幕讀取變數資料 變數的儲存特性

1.資料的輸入可利用cin物件結合 運算子完成 語法 cin 變數1 變數2 變數n eg.int age cout input your age endl cin age 2.變數的儲存特性 資料在記憶體中儲存的方法,c 中提供靜態變數 自動變數 暫存器變數 外部變數4種 a.自動變數 動態分配儲...

C 反射技術之二讀取Attribute特性

我們可以通過乙個類的type的getcustomattributes方法來讀取這個類上所附加的特性。class keyattribute attribute 定義特性 標籤 keyattribute 打上特性 標籤 public int key讀取到類所對應的表的特性了,接下來我們該讀取類裡包含的屬...