JavaScriptの中のAttributeに関する内容紹介

4650 ワード

回転:夢を叶えてくれるCSDNブログ
 
Attributeは属性という意味の文章です.部分互換IEとFFのAttributeに関する紹介だけです.
atributes:属性をオブジェクトとして取得します.
get Attribute:ある属性の値を取得します.setAttribute:属性を作成し、同時に属性に値createAttributeをセットします.属性は一つだけを作成します.removeAttribute:属性は一つ削除します.
get AttributeNode:ノードをオブジェクトとして取得します.ノードremoveAttributeNodeを作成します.ノードを削除します.
atributesは、オブジェクトの一つの属性を取得し、オブジェクトとして呼び出すことができます.ここでは「[]」を使用することに注意して、IEはここで「()」を使用してもいいです.互換性の問題を考慮して「[]」を使用します.atributes属性の使い方については、IEとFFの大きな違いがあります.ここではあまり紹介しません.
atributesの使用方法:(IEとFFは共通)
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body> 
<script>
var d = document.getElementById("sss").attributes["value"];
document.write(d.name);
document.write(d.value);
//  value aaa
</script>
 
get Attribute、set Attribute、createAttribute、removeAttributeの4兄弟の概念は比較的に理解しやすくて、使用方法も比較的に簡単で、唯一注意する必要があります.
1、createAttributeは使う時対象に基づく必要がなくて、document.create()でいいです.
2、setAttribute、createAttributeは使う時にname、type、valueなどの単語を使わないでください.IEは全部FFの反応がおかしいです.
3、createAttributeは名前だけを定義したら、d.nodeValue=「hello」がありません.ステートメントの定義値は、FFが空の文字列と考えています.IEはundefinedと考えています.これに注意すればいいです.
get Attributeの使用方法:
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 <script>
var d = document.getElementById("sss").getAttribute("value");
document.write(d);
//   aaa
</script>
 
setAttributeの使い方:(goodという属性が多くなっていることが分かります.ハロー)
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 
<script>
var d = document.getElementById("sss").setAttribute("good","hello");
alert(document.getElementById("t").innerHTML)
</script>
 
createAttributeの使い方:(goodという空の属性が一つ増えました.)
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 
<script>
var d = document.createAttribute("good");
document.getElementById("sss").setAttributeNode(d);
alert(document.getElementById("t").innerHTML)
</script>
 
removeAttributeの使い方:(一つ足りない)
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 
<script>
var d = document.getElementById("sss").removeAttribute("value");
alert(document.getElementById("t").innerHTML)
</script>
 
get AttributeNode、set AttributeNode、removeAttributeNodeの3つの方法の特徴はすべて直接的に1つのnodeを操作して、removeAttributeNodeは最初のうちはいつも間違いを使いますが、nodeの意味を十分に理解した時に、自由自在に応用できます.
get AttributeNodeの使用方法:
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 
<script>
var d = document.getElementById("sss").getAttributeNode("value"); 
document.write(d.name);
document.write(d.value);
//   value aaa
</script>
 set AttributeNodeの使い方:
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 
<script>
var d = document.createAttribute("good");
document.getElementById("sss").setAttributeNode(d);
alert(document.getElementById("t").innerHTML);
</script>
 
removeAttributeNodeの使い方:
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 
<script>
var d = document.getElementById("sss").getAttributeNode("value")
document.getElementById("sss").removeAttributeNode(d); 
alert(document.getElementById("t").innerHTML);
</script>