Attributeとカスタムプロパティ

23593 ワード

attribute

property(プロパティ)

attribute

propertyとattributeの同期

href

value

class/className

旧IEのエピソード

attributeはDOMノードとして

まとめ

DOMノードにはattributeとpropertyがある可能性があります.時には人々が区別できないことがあります.彼らは関連しているからですが、それらは全然違います.

property

DOMはオブジェクトです.したがって、カスタムpropertyおよびメソッドを通常のオブジェクトのように格納できます.
次の例ではdocument.bodyカスタムオブジェクトmyDataを追加します.

document.body.myData = { 

  name: 'John'

}

alert(document.body.myData.name) // John



document.body.sayHi = function() { 

  alert(this.nodeName)

}

 

document.body.sayHi()  // BODY

JavaScriptのカスタムpropertyとメソッドはHTMLには影響しません.
カスタムpropertyもforを使用できます..in遍歴を行う.

document.body.custom = 5



var list = []

for(var key in document.body) {

  list.push(key)

}



alert(list.join('
'))

カスタムDOM property:

は、任意の値を有することができる.property名には大文字と小文字の区別があります.

はHTMLには影響しません.

attribute

DOMノードは、次の方法でHTML attributeにアクセスします.

elem.hasAttribute(name)-attributeが

存在するかどうかを確認する.

elem.getAttribute(name)-attributeの値

を取得する.

elem.setAttribute(name, value)-attributeの値

を設定する.

elem.removeAttribute(name)-attribute

を削除
IE<8とIE互換ビューではattributeが若干一致しない

はgetAttributeとsetAttributeのみ存在します.

実際には、attribtueではなくDOM propertyを変更しました.

IE<8のときattributeとpropertyが1つに統合される.奇妙な結果をもたらす場合がありますが、ここで説明した設定方法には問題はありません.

propertyの考え方とattributeには以下の特性があります.

文字列

のみ

名前は大文字と小文字は関係ありません.HTML attributeは大文字と小文字は関係ありません.

innerHTMLを呼び出すと表示されます.

attributesプロパティを呼び出すことで、それらを巡回できます.

たとえば、次の例を見てみましょう.

<body>

  <div about="Elephant" class="smiling"></div>



  <script>

    var div = document.body.children[0]

    alert( div.getAttribute('ABOUT') ) // (1)

    

    div.setAttribute('Test', 123)   // (2)

    alert( document.body.innerHTML )   // (3)

  </script>

</body>

上のコードを実行すると、次のことに気づきます.

getAttribute('ABOUT')は大文字を使用しますが、関係ありません.

文字列または他の元のデータ型を指定すると、stringに自動的に変換されます.オブジェクトは自動的に変換されますが、IEはここで問題があるので、このような使用は避けてください.

innerHTMLには、新しい「test」attribute

が含まれます.

propertyとattributeの同期

すべてのDOMノードに標準属性があります.
たとえば、「A」タブを見てみましょう.詳細は表示です.
「href」と「accessKey」と他のattributeがあります.このほか、HTMLElementから「id」や他のattributeも継承されます.
標準のDOMプロパティはattributeと同期します.

id

たとえば、ブラウザは「id」attributeと「id」propertyを同期します.

<script>

  document.body.setAttribute('id','la-la-la')

  alert(document.body.id) // la-la-la

</script>

href

同じ値は保証できません.「href」を例に挙げて説明しましょう

<a href="#"></a>

<script>

  var a  = document.body.children[0]



  a.href = '/'

  alert( 'attribute:' + a.getAttribute('href') ) // '/'

  alert( 'property:' + a.href )  // IE: '/', others: full URL



</script>

それは、W 3 C仕様によれば、完全なフォーマットのリンクでなければならないからです.
同期するattributeもありますが、コピーは行われません.例えばinput.checked:

<input type="checkbox" checked>



<script>

  var input  = document.body.children[0]



  alert( input.checked ) // true

  alert( input.getAttribute('checked') ) // empty string

</script>

input.checkedのpropertyはtrueかfalseかです.ただし、attributeでは設定された文字列です.

value

一部の組み込みプロパティでは、一方向同期のみが使用されます.
例えばinput.valueはattributeによって同期されます.

<body>

  <input type="text" value="markup">

  <script>

    var input = document.body.children[0]



    input.setAttribute('value', 'new')



    alert( input.value ) // 'new', input.value changed

  </script>

</body>

しかしattributeはpropertyに同期されません

<body>

  <input type="text" value="markup">

  <script>

    var input = document.body.children[0]



    input.value = 'new'



    alert(input.getAttribute('value')) // 'markup', not changed!

  </script>

</body>

「value」プロパティが更新されると、attributeは元の値を保持し、inputが変更されたかどうかを検出したり、リセットしたりすることができます.

class/className

「class」attributeは「className」propertyに対応します.
「class」はJavaScriptで予約された単語であるため、「class」attributeのプロパティはclassNameです.

<body>

  <script>

    document.body.setAttribute('class', 'big red bloom')



    alert( document.body.className )  // ^^^

  </script>

</body>

なお、上記の例は、attributeとpropertyが混在しているため、IE<9では正しくない.
クラスを操作するときにattributeではなくclassNameを常に使用するだけで、それをうまく解決できます.

divを変数

に割り当てる

"data-widgetName" attributeの値

を取得する.

<body>



  <!-- hello world! don't remove me.-->



  <div data-widgetName="menu">Select the genre</div>  



  <script>/* ... */</script>

</body>

参考答案

旧IEのエピソード

まず、IE<9の場合、すべてのattributeとpropertyが同期されます.

document.body.setAttribute('try-in-ie', 123)



alert( document.body['try-in-ie'] === 123 )  // true in IE<9

注意タイプも同じです.attributeが文字列に変換されていない場合.
次に、IE<8(またはIE 8互換モード)propertyとattributeは同じである.これは多くの興味深い結果をもたらします.
たとえば、propertyには大文字と小文字がありますが、attributeでは大文字と小文字は区別されません.ブラウザが彼ら2人が同じだと思っている場合、次のコードはどのような結果をもたらしますか?

document.body.abba = 1 // assign property (now can read it by getAttribute)

document.body.ABBA = 5 // assign property with another case



// must get a property named 'ABba' in case-insensitive way.

alert( document.body.getAttribute('ABba') ) // ??

ブラウザは最初の値をデフォルト値として選択します.また、getAttributeメソッドでは、IEブラウザのみの2番目のパラメータを提供し、大文字と小文字を区別するかどうかを判別します.詳細はMSDN getAttribute
IE<9「class」attributeがクラスを変更できない限り.このattributeは使用しないで、常にclassName propertyを使用します.
IEと仲良くするためには、attributeを正しく使う必要があります.
あるいは、言い換えれば、attributeを使用する必要があるまでpropertyを常に使用してみてください.
次の場合、attributeが本当に必要になります.

は、DOM propertyを使用するとHTMLに同期しないため、カスタムHTML attributeを取得します.

は、INPUT valueなどの元の値を取得する.

attributeはDOMノードとして

attributeはelementを通過することもできる.attributesコレクションにアクセスします.
attributes結合では、各attributeはこれらの特性を有する.名前、値、その他のプロパティがあります.

<span style="color:blue" id="my">text</span>



<script>

  var span = document.body.children[0]

  alert( span.attributes['style'].value )  // "color:blue;"

  alert( span.attributes['id'].value )  // "my"

</script>

ちなみに、IE<8またはIE互換モードではstyle attributeがクレイジーな結果をもたらします.原因を当てる.
attribute DOMノードはドキュメントツリーの一部ではなく、element要素のみでアクセスできます.

まとめ

attributeとpropertyはDOMモデルの核心機能である.
次の表は、関連点と異なる点を示します.

Property

Attribute

任意の値
文字列
大文字と小文字の区別
大文字と小文字は関係ありません
innerHTMLでは表示されません
innerHTMlに表示

HTMLにカスタムattributeを入れたい場合は、HTML 5でdata-*attributeが有効であることを覚えておいてください.HTML 5規格のカスタムattributeの表示
現実的には、DOM propertyの98%が使用されます.
次の2つの状況でのみattributeを使用する必要があります.

は、DOM propertyを使用するとHTMLに同期しないため、カスタムHTML attributeを取得します.

は、INPUT valueなどの元の値を取得する.

recursive component

分解メソッドの構成