JavascriptにおけるPropertyとAttributeの違い

8518 ワード

JavaScript

DOM元素に含まれているこの二つのものは、全く同じことではないが、密接につながっているので、詳しくは分かりません.Property-属性は、C菗などの高度な言語で入手できます.(dot)その値を設定します.Attribute-特性は、各dom要素には、アトトリーbutes属性があり、すべてのアトトレイノードを格納し、get Attribute()とset Attribute()方法によって取得および操作を行う.

1 <div id="test" name="div1" class="center" customtag="divTest"/>

[class="center",name="div1",id="test",customtag="divTest"]

document.getElemmentById("test").getAttribute("customtag") //divTest

document.getElemmentById("test").setAttribute("data","11")

document.getElemmentById("test").removeAttribute("data")

.csharpcode.csharpcode pre
{
font-size:small;
カラー:black
font-family:consosolas、「Courier New」、courier、monoospace;
background-カラー:菗菗ffff;
//white-space:pre;*/
)
.csharp code pre{margin:0 em;}
.csharpcode.rem{color=0000 ff}
.csharpcode.kwrd{color=0000 ff}
.csharpcode.str{color=red}
.csharpcode.op{color=0000 c 0}
.csharpcode.preproc{color=red}
.csharpcode.asp{background}
.csharrpcode.html
.csharpcode.atr{color=red}
.csharpcode.alt
{
background-彩色:〹f 4 f 4;
width:100%
magin:0 em;
)
.csharpcode.lnum{color=0000 ff}
.csharpcode.csharpcode pre
{
font-size:small;
カラー:black
font-family:consosolas、「Courier New」、courier、monoospace;
background-カラー:菗菗ffff;
//white-space:pre;*/
)
.csharp code pre{margin:0 em;}
.csharpcode.rem{color=0000 ff}
.csharpcode.kwrd{color=0000 ff}
.csharpcode.str{color=red}
.csharpcode.op{color=0000 c 0}
.csharpcode.preproc{color=red}
.csharpcode.asp{background}
.csharrpcode.html
.csharpcode.atr{color=red}
.csharpcode.alt
{
background-彩色:〹f 4 f 4;
width:100%
magin:0 em;
)
.csharpcode.lnum{color=0000 ff}
Propertyは属性です.DOM元素を普通のobjectオブジェクトと見なすと、propertyはname=valueという形でObjectに保存されている属性(C炜中の類似)です.操作は簡単です.

elem.gameid = 880; //   

    console.log( elem.gameid ) //

.csharpcode.csharpcode pre
{
font-size:small;
カラー:black
font-family:consosolas、「Courier New」、courier、monoospace;
background-カラー:菗菗ffff;
//white-space:pre;*/
)
.csharp code pre{margin:0 em;}
.csharpcode.rem{color=0000 ff}
.csharpcode.kwrd{color=0000 ff}
.csharpcode.str{color=red}
.csharpcode.op{color=0000 c 0}
.csharpcode.preproc{color=red}
.csharpcode.asp{background}
.csharrpcode.html
.csharpcode.atr{color=red}
.csharpcode.alt
{
background-彩色:〹f 4 f 4;
width:100%
magin:0 em;
)
.csharpcode.lnum{color=0000 ff}
この二つのものは何の連絡と違いがありますか?
まず、多くのatributeノードが対応するproperty属性を持っています.例のdiv要素のidとclassはatributeでもpropertyがあります.いずれの方法でもアクセスと修正ができますが、カスタムのatributeノード、またはカスタムpropertyには関係がありません.IE 6-7にとって、atributeとpropertyは区別されていません.具体的な説明はatributeとpropertyの違い試験できます.詳しいです.
getAttributeとポイントメソッドは標準的な属性を得ることができますが、彼らはいくつかの属性に対して、href、src、valueなどの値に差があります.

<a href="#" id="link">Test Link</a>

<img src="img.png" id="image" />

<input type="text" value="enter text" id="ipt" />

<script>

var $ = function(id){return document.getElementById(id);};

alert($('link').getAttribute('href'));//#

alert($('link').href);//fullpath/file.html#



alert($('image').getAttribute('src'))//img.png

alert($('image').src)//fullpath/img.png



alert($('ipt').getAttribute('value'))//enter text

alert($('ipt').value)//enter text

$('ipt').value = 5;

alert($('ipt').getAttribute('value'))//enter text

alert($('ipt').value)//5

</script>

javascriptはheadとbodyの違いに置く(w 3 cはheadラベルに入れることを推奨する)