DOM オブジェクト (タグ) のカスタム属性を読み取る JS についての簡単な説明-jsチュートリアル-php.cn

DOM オブジェクト (タグ) のカスタム属性を読み取る JS についての簡単な説明

高洛峰

リリース： 2016-12-06 13:06:02

オリジナル

1570 人が閲覧しました

DOM オブジェクトは、js の非常に基本的な要素です。一般的に、js を記述するときは、必ずそれを操作します。次のようなカスタム属性を簡単に追加できます。

<div id="test" class="hello"></div>
 
var test = document.getElementById("test");
 
test.adang = "adang";
 
alert(test.adang);

ログイン後にコピー

adang という属性が test の ID で DOM 要素に追加されていることがわかり、js でこのプロパティを呼び出すことができます。。私はjsを書くときにこのメソッドをよく使います。これを使うと、特定のDOMオブジェクトに特別なデータを簡単に追加できます。DOMオブジェクトは、大量のデータを入れることができる非常に便利なコンテナのようなものだと感じます。

さらに疑問が浮かびました。これらの属性は js で追加できるので、flex などのタグに追加できますか?実際、id や src などの属性は、js またはタグに追加できます。どちらの方法でも、js はデータを取得できます。ここで言っておきたいのは、class はタグで使用されますが、js で呼び出す場合は className を使用する必要があるということです。

id、title、srcなどのHTMLでサポートされている属性は、タグ内に設定してjsでアクセスできます。では、上記の例の adang のようなカスタム属性の場合はどうなるでしょうか? DOM はアクセス可能ですか?以下のような実験をしてみました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
window.onload=function(){
  var test = document.getElementById("test");
  test.adang = "adang";
  alert(test.adang);
}
</script>
<body>
<div id="test"></div>
</body>
</html>

ログイン後にコピー

jsを使ってカスタム属性を拡張した結果、望む結果が正常に出力され、IEやFFでも正常に出力されました。

次に、次のように 2 番目のコードを書きました:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
window.onload=function(){
  var test = document.getElementById("test");
  alert(test.adang);
}
</script>
<body>
<div id="test" adang="adang"></div>
</body>
</html>

ログイン後にコピー

今回は HTML タグに拡張属性を書きました。 adang の通常の出力は IE の下にありますが、FF の下の出力は未定義です。

しかし、これは非常に奇妙です。DOM が提供する getAttribute("") メソッドを使用すると、IE でも FF でも、タグに記述したカスタム属性を取得できます。

そのため、互換性を保つために、getAttribute("") を使用してカスタムラベル属性の値を取得する必要があります。