属性とプロパティでJS差。

製品より転載は少しライブラリです  http://www.pinlue.com/article/2020/04/0210/4610102590257.html

(:プロパティ、属性:プロパティ特性)プロパティと属性は、中国でも非常によく似ている二つの単語を混同することは非常に簡単ですが、実際には、両者は異なるカテゴリに属し異なるもの、です。

プロパティは、DOM属性がJavaScriptでのオブジェクトです。

属性は、文字列値を指定できますHTMLタグの特徴です。

属性とプロパティプレゼンテーション

理解することは簡単で、属性ノードは、このような一般的に使用されるHTML ID、クラス、タイトルとしてDOM独自の属性、のように揃えています。

そして、これはオブジェクト、その追加コンテンツ、例えばのchildNodes、同様のfirstChildとしてプロパティDOM要素です。

私たちは、次のコードを持っています:

<DIV ID = "DIV1" クラス= "divClass" タイトル= "divTitle" TITLE1 = "divTitle1"> </ div> VAR IN1 =のdocument.getElementById( "DIV1");はconsole.log(IN1)。

IDがDIVをDIV1ため、以下のように、そのプロパティセクション読み取り:()

基本的な属性「ID」と「クラス名」、「タイトル」というようにしながら、のNamedNodeMapを入力し、指定されたプロパティを「属性」が、ない「タイトル」このカスタム属性が存在しない有することが判明することができます。

console.log(in1.id)。//div1console.log(in1.className); //divClassconsole.log(in1.title); //divTitleconsole.log(in1.title1); //未定義

タグ属性、「ID」と「クラス名」、「タイトルは」IN1に作成され、「タイトルは」作成されません、見つけることができます。すべてのDOMオブジェクトは、デフォルトの基本性質を持つことになり、それが作成されたとき、それが唯一のこれらの基本的なプロパティを作成し、Tagプロパティで、当社のカスタムラベルは、DOMに直接ではないためです。

「TITLE1」GOの習慣はどこですか?あなたは以下を参照してくださいすることができ、属性プロパティに:

「タイトル1」は、オブジェクトが順次、我々はタグに定義されていることをプロパティと属性の数を記録し、オブジェクトの属性にありました。

それは、HTMLタグの属性の定義を保持しているプロパティのサブセットに属する属性、ここから見ることができます。私たちは、さらに、各プロパティの態度を探るならば、あなたは彼らが単純なオブジェクトではありませんでしょう、それはノードタイプ、ノード名と他の属性と、タイプはAttrの目的です。この点で、別の研究以降。オブジェクトの印刷属性の属性値は、直接的であるが、そのようななどの名前や属性値を含む文字列を取得しないことに注意してください:

console.log(in1.attibutes.title1)。// divTitle1

このことからは、次のとおりです。

HTMLタグと属性値が内部に格納された属性DOMオブジェクトのプロパティで定義されています。

これらの属性タイプのJavaScriptプロパティは単純なので、プロパティ名と値を保存するためのAttrを選択し、されていません。

そして、次の通り:

<入力されたID = "IN_2">

そのプロパティの以下の部分では:

 

 

私たちは、タグ内の「値」を定義していませんでしたが、それはデフォルトのベースDOMの属性であるので、それはまだ時にDOM初期に作成されますが。

「両陣営で足。」

一般属性、等、例えばID、クラス、タイトルは、DOMオブジェクトと、プロパティ値と割当としての性質に付加されています。しかし、属性の定義から、などというような特別な権限、そこに次のようになります。

<DIV ID = "DIV1" クラス= "divClass" タイトル= "divTitle" TITLE1 = "divTitle1"> 100 </ div>

「TITLE1」内のこのdivが財産になることはありません。

それは限りプロパティとして、である(HTMLから)DOMに登場するラベル属性があります。その後、いくつかの共通の特徴(ID、クラス、タイトル、等)は、プロパティに変換されます。比喩、1は、これらの特性/属性、「両陣営で足」と言うことがあります。

 

 

最後の注意:「クラス」はECMAキーワードであるとして「クラス」の後に「クラス名」と呼ばれるには、プロパティになります。

DOMは、デフォルトの基本的な性質を持っており、これらのプロパティは、「プロパティ」として知られ、どのような場合には、彼らは初期化時にDOMオブジェクトを再作成します。

あなたがタグにこれらのプロパティに値を割り当てる場合、これらの値は、プロパティのDOMの初期値と同じ名前が割り当てられます。

属性とプロパティ値と代入

1、属性値

「Jsの高度なプログラミングは、」利便性のために、あなたがのsetAttribute()とのgetAttribute()が操作することができる使用することが推奨され、言及されています。

<DIV ID = "DIV1" クラス= "divClass" タイトル= "divTitle" ALIGN =はTITLE1 = "divTitle1" を "左"> </ div>のvar ID = div1.getAttribute( "ID")。VAR className1 = div1.getAttribute( "クラス"); VARタイトル= div1.getAttribute( "タイトル"); VAR TITLE1 = div1.getAttribute( "TITLE1"); //自定义特性

getAttribute()はどうか、標準またはカスタム、任意の特性を得ることができます。

jQueryのは、取得したプロパティ属性の絶対値かどうかを()のgetAttributeを見るためにテストを行うにしてでも、ブラウザの互換性の問題のこの方法は、一部のブラウザでは、プロパティのプロパティの値を得ることができます。

div1.className = ''; VARの裁判官= div1.getAttribute( "クラス名")=== '';

上記のコードは、のgetAttribute()メソッドは、問題があることを示し、確立された場合には、もはや使用されません。

2、属性の割り当て

div1.setAttribute( 'クラス'、 ''); div1.setAttribute( 'タイトル'、 'B'); div1.setAttribute( 'TITLE1'、 'C​​')。div1.setAttribute( 'TITLE2'、 'D')。

()setAttrbuteで割り当て、任意の属性は、カスタムを含めることができます。また、属性の割り当てはすぐにDOM要素に表示されます。

それは標準機能である場合も、それに関連した属性の値を更新します。

最後に、ノート、のsetAttribute()2つのパラメータは、文字列でなければなりません。プロパティ属性の割り当て機能のその文字列、プロパティのプロパティが割り当てのいずれかのタイプになることができますが。

3、プロパティ値

プロパティの値は非常に簡単です。あなたが使用できる、唯一の任意のプロパティを取ります「」。:

VaRのID = div1.id。VARクラス名= div1.className。VARのchildNodes = div1.childNodes。VaRのATTRS = div1.attributes。

ここで再び強調しました:

場合特性にクラスのプロパティは、変更名「クラス名」、及び​​従ってdiv1.className div1.getAttrbute(「クラス」)と同じ。

コード上Div1.attributesは、このプロパティ属性の採取ATTRSに保存変数から取り出され、attrsには、型のAttrを複数格納するオブジェクト型NamedNodeList、となりました。

4.プロパティの割り当て

割り当てと基本的なjsが使用できるようプロパティの割り当てオブジェクト「」。:

div1.className = ''; div1.align = '中央'; div1.AAAAA = TRUE; div1.BBBBB = [1、2、3]。

プロパティの値は、任意のプロパティタイプに割り当てることができ、および属性の特徴は、文字列のみを割り当てることができます!

さらに、IE内の値を持つプロパティプロパティの循環参照のメモリリークを引き起こす可能性があります。この問題を回避するには、jQuery.data()データとDOMオブジェクトをデカップリング、特別な取引を行うこと。

どうなる一つの特性と属性値を変更します

in1.value = '小道具の新しい値';にconsole.log(in1.value)。prop'console.log(in1.attributes.value)の//「の新しい値。// 'の値= "1"'

この場合、「小道具の新しい価値」にページ上の入力フィールドの値、および値のpropetyは新しい値となっているが、それはまだ「1」である属性 ここからは、プロパティの値を推測することができますし、同じname属性のプロパティが結合双方向ではありません。

今度は、態度の値を設定した場合、効果はその後どうなりますか?

in2.setAttribute( '値'、 'NI')はconsole.log(in2.value)。//niconsole.log(in2.attributes.value); //値= 'NI'

したがって、それは結論付けることができます。

属性から同期するプロパティ。

property属性の値が同期されません。

属性データと単方向、attribute->プロパティとの結合性;

プロパティおよび属性に任意の値を変更し、HTMLページを反映するように更新されます。

 

当社は60元の記事に公開 ウォンの賞賛58 。・ 見解を14万+を

おすすめ

転載: blog.csdn.net/yihuliunian/article/details/105340851