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

高洛峰
リリース: 2016-12-06 13:06:02
オリジナル
1583 人が閲覧しました

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("") を使用してカスタム ラベル属性の値を取得する必要があります。


関連ラベル:
js
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート