JavaScript が DOM オブジェクトの属性を読み取り、コードを実装する方法の詳細な説明-jsチュートリアル-php.cn

JavaScript が DOM オブジェクトの属性を読み取り、コードを実装する方法の詳細な説明

伊谢尔伦

リリース： 2017-07-20 11:50:46

オリジナル

1550 人が閲覧しました

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

<p id="test" class="hello"></p>

var test = document.getElementById("test");

test.adang = "adang";

alert(test.adang);

ログイン後にコピー

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

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>
<p id="test"></p> 
</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>
<p id="test" adang="adang"></p> 
</body>
</html>

ログイン後にコピー

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

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

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

以上がJavaScript が DOM オブジェクトの属性を読み取り、コードを実装する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。