ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript が DOM オブジェクトの属性を読み取り、コードを実装する方法の詳細な説明
JavaScript が DOM オブジェクトの属性を読み取り、コードを実装する方法の詳細な説明
- 伊谢尔伦オリジナル
- 2017-07-20 11:50:461536ブラウズ
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 サイトの他の関連記事を参照してください。