属性の操作
HTML 要素には、タグ名と、属性と呼ばれるいくつかのキーと値のペアが含まれます。
<a id="test" href="http://www.example.com">
リンク
</a>
上記のコードでは、「a」要素には 2 つの属性、「id」属性と「href」属性が含まれています。
属性自体はオブジェクト (Attr オブジェクト) ですが、実際にはこのオブジェクトが使用されることはほとんどありません。一般に、属性は要素ノード オブジェクト (HTMlElement オブジェクト) を通じて操作されます。この章では、これらのプロパティを操作する方法について説明します。
Element.attributes プロパティ
要素オブジェクトには「attributes」属性があり、配列に似た動的オブジェクトを返します。メンバーはすべて要素タグの属性ノード オブジェクトであり、属性のリアルタイムの変更がこのノード オブジェクトに反映されます。他のタイプのノード オブジェクトにも属性がありますが、それらはすべて null を返すため、この属性は要素オブジェクトに固有のものと見なすことができます。
個々の属性は、シリアル番号または属性名によって参照できます。
// HTMLコードは以下の通り
// <body bgcolor=" yellow" onload="">
ドキュメント.ボディ.属性[0]
document.body.attributes.bgcolor
document.body.attributes['ONLOAD']
上記のコードの 3 つのメソッドは、属性値ではなく、属性ノード オブジェクトを返すことに注意してください。
属性ノードオブジェクトには、属性の属性名と属性値に対応する「name」属性と「value」属性があり、「nodeName」属性と「nodeValue」属性に相当します。
//HTMLコードは
// <div id="mydiv">
var n = document.getElementById('mydiv');
n.attributes[0].name // "id"
n.attributes[0].nodeName // "id"
n.attributes[0].value // "mydiv"
n.attributes[0].nodeValue // "mydiv"
次のコードは、要素ノードのすべての属性を走査できます。
var para = document.getElementsByTagName('p')[0];
var result = document.getElementById('result');
if (para.hasAttributes()) {
var attrs = para.attributes;
var 出力 = '';
for(var i = attrs.length - 1; i >= 0; i--) {
出力 += attrs[i].name + '->' + attrs[i].value;
}
result.textContent = 出力;
} それ以外 {
result.textContent = '表示する属性はありません';
}
要素の標準属性
HTML 要素の標準属性 (つまり、標準で定義されている属性) は、自動的に要素ノード オブジェクトの属性になります。
var a = document.getElementById('test');
a.id // "テスト"
a.href // "http://www.example.com/"
上記のコードでは、「a」要素タグの属性「id」と「href」が自動的にノード オブジェクトの属性になります。
これらのプロパティはすべて書き込み可能です。
var img = document.getElementById('myImage');
img.src = 'http://www.example.com/image.jpg';
上記の書き方では、即座に「img」オブジェクトの「src」属性が置き換えられ、別の画像が表示されます。
プロパティを変更するこの方法は、フォームにプロパティを追加するためによく使用されます。
var f = document.forms[0];
f.action = 'submit.php';
f.method = 'POST';
上記のコードは、送信 URL と送信メソッドをフォームに追加します。
この使用法では属性の読み取りと書き込みはできますが、属性を削除することはできず、ここでは delete 演算子は有効ではないことに注意してください。
HTML 要素の属性名は大文字と小文字が区別されませんが、JavaScript オブジェクトの属性名は大文字と小文字が区別されます。変換ルールは、JavaScript プロパティ名に変換するときは常に小文字を使用することです。プロパティ名に複数の単語が含まれる場合は、ラクダのスペルが使用されます。つまり、「onClick」のように、2 番目の単語から各単語の最初の文字が大文字になります。
一部の HTML 属性名は JavaScript の予約語であるため、JavaScript 属性に変換するときに名前を変更する必要があります。主に以下の２つです。
for属性がhtmlForに変更されましたclass属性がclassNameに変更されました
また、HTMLの属性値は文字列が一般的ですが、JavaScriptの属性は自動的に型を変換します。たとえば、文字列「true」をブール値に変換し、「onClick」の値を関数に変換し、「style」属性の値を「CSSSStyleDeclaration」オブジェクトに変換します。したがって、これらのプロパティにはさまざまな種類の値を割り当てることができます。
属性操作の標準的な方法
概要
要素ノードには、属性を操作するための 6 つのメソッドが用意されています。
getAttribute()getAttributeNames()setAttribute()hasAttribute()hasAttributes()removeAttribute()
ここで注意すべき点がいくつかあります。
(1) 適用性
これら 6 つのメソッドは、すべてのプロパティ (ユーザー定義プロパティを含む) に適用できます。
(2) 戻り値
getAttribute() は文字列のみを返し、他のタイプの値は返しません。
(3) 属性名
これらのメソッドは、予約語を書き換えずに属性の標準名のみを受け入れます。たとえば、「for」と「class」を直接使用できます。さらに、これらのメソッドはプロパティ名の大文字と小文字を区別しません。
var image = document.images[0];
image.setAttribute('クラス', 'myImage');
上記のコードでは、setAttribute メソッドは、className を記述せずに、class を属性名として直接使用しています。
Element.getAttribute()
Element.getAttribute メソッドは、現在の要素ノードの指定された属性を返します。指定されたプロパティが存在しない場合は、「null」を返します。
// HTMLコードは
// <div id="div1" align="left">
var div = document.getElementById('div1');
div.getAttribute('align') // "左"
Element.getAttributeNames()
Element.getAttributeNames() は、現在の要素のすべての属性の名前をメンバーとする配列を返します。現在の要素に属性がない場合は、空の配列が返されます。 Element.attributes プロパティを使用しても同じ結果を得ることができますが、唯一の違いは、配列のようなオブジェクトを返すことです。
var mydiv = document.getElementById('mydiv');
mydiv.getAttributeNames().forEach(function (key) {
var 値 = mydiv.getAttribute(key);
console.log(キー, 値);
})
上記のコードは、ノードのすべての属性を走査するために使用されます。
Element.setAttribute()
Element.setAttribute メソッドは、現在の要素ノードに新しい属性を追加するために使用されます。同じ名前のプロパティがすでに存在する場合、既存のプロパティを編集することと同じになります。このメソッドには戻り値がありません。
// HTMLコードは
// <button>Hello World</button>
var b = document.querySelector('ボタン');
b.setAttribute('name', 'myButton');
b.setAttribute('無効', true);
上記のコードでは、button 要素の name 属性が myButton に設定され、disabled 属性が true に設定されています。
ここで注意すべき点が 2 つあります。まず、属性値は常に文字列であり、他のタイプの値は自動的に文字列に変換されます。たとえば、ブール値 true は文字列 true になります。 、上記の例の disable 属性は、<button> 要素の場合、属性値を必要としません。したがって、この属性は、設定されている限り常に有効になります。 disabled 属性は、setAttribute メソッドで任意の値に設定できます。
Element.hasAttribute()
Element.hasAttribute メソッドは、現在の要素ノードに指定された属性が含まれているかどうかを示すブール値を返します。
var d = document.getElementById('div1');
if (d.hasAttribute('align')) {
d.setAttribute('align', 'center');
}
上記のコードは、div ノードに align 属性が含まれているかどうかをチェックします。その場合は中央揃えに設定してください。
Element.hasAttributes()
Element.hasAttributes メソッドは、現在の要素に属性があるかどうかを示すブール値を返します。属性がない場合は false を返し、それ以外の場合は true を返します。
var foo = document.getElementById('foo');
foo.hasAttributes() // true
Element.removeAttribute()
Element.removeAttribute メソッドは、指定された属性を削除します。このメソッドには戻り値がありません。
// HTMLコードは
// <div id="div1" align="left" width="200px">
document.getElementById('div1').removeAttribute('align');
//現在のHTMLコードは
// <div id="div1" width="200px">
##データセット属性
場合によっては、JavaScript スクリプトで使用するために HTML 要素にデータを追加する必要があります。解決策の 1 つはカスタム プロパティです。
<div id="mydiv" foo="bar">
上記のコードは、div 要素の foo 属性をカスタマイズします。その後、getAttribute() および setAttribute() を使用してこの属性を読み書きできます。
var n = document.getElementById('mydiv');
n.getAttribute('foo') // バー
n.setAttribute('foo', 'baz')
この方法では目的は達成できますが、HTML 要素の属性が基準を満たさなくなり、Web ページのコードが検証に失敗します。
より良い解決策は、標準で提供されている data-* 属性を使用することです。
<div id="mydiv" data-foo="bar">
次に、要素ノード オブジェクトの dataset 属性を使用します。これは、HTML 要素タグの data-* 属性を操作するために使用できるオブジェクトを指します。
var n = document.getElementById('mydiv');
n.dataset.foo // バー
n.dataset.foo = 'baz'
上記のコードでは、「data-foo」属性は「dataset.foo」を通じて読み書きされます。
data-* 属性を削除するには、delete コマンドを直接使用できます。
document.getElementById('myDiv').dataset.foo を削除します。
dataset 属性に加えて、getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute(' data-foo' ) および data-* 属性を操作するその他のメソッド。
「data-」の後の属性名は制限されており、文字、数字、ハイフン (「-」)、ドット (「.」)、コロン (「:」)、およびアンダースコア (「_」) のみを含めることができることに注意してください。さらに、属性名には「A」から「Z」までの大文字を使用しないでください。たとえば、「data-helloWorld」のような属性名は使用できず、「data-hello-world」と記述する必要があります。
「dataset」のキー名に変換する際、接続詞行の後に小文字が続く場合、接続行は削除され、小文字は大文字に変換され、その他の文字は変更されません。逆に、dataset のキー名を属性名に変換する場合、大文字はすべて接続詞 + 文字の小文字形式に変換され、その他の文字は変更されません。たとえば、「dataset.helloWorld」は「data-hello-world」に変換されます。
作者: wangdoc
アドレス: https://wangdoc.com/
ライセンス: クリエイティブ・コモンズ 3.0