1.DOM:ドキュメントオブジェクトモデルDOM(Document Object Model)HTMLドキュメントにアクセスおよび処理するための標準的なメソッドを定義します。 DOMは、要素、属性、およびテキストを含むツリー構造(ノードツリー)としてHTMLドキュメントをレンダリングします。
2。DOMの一般的に使用されるいくつかのプロパティ
2.1 IDで要素を取得します
(1)構文:
コードコピーは次のとおりです。
document.getElementById( "id");
(2)関数:IDは、個人のIDカードを指します。タグIDを探してタグを見つけることができ、対応する操作を実行できます。
(3)注:ドキュメントを書くことを忘れないでください!
2.2 innerhtml属性
(1)構文:
コードコピーは次のとおりです。
obgect.innerhtml = "hello world"
(2)関数:主にタグ内のコンテンツを取得または交換する
(3)例:
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> innerhtml </title>
</head>
<body>
<h2 id = "con"> javascript </h2>
<p> JavaScriptは、オブジェクトとイベント駆動型に基づいたシンプルなスクリプト言語です。 HTMLドキュメントに組み込まれ、ブラウザによって解釈および実行され、Webページに動的な表示効果を作成し、ユーザーインタラクション機能を実装します。 </p>
<script type = "text/javascript">
var mychar = document.getElementById( "con");
document.write( "元のタイトル:"+mychar.innerhtml+"<br>"); //元のH2タグコンテンツを出力します
mychar.innerhtml = "hello world!";
document.write( "修正タイトル:"+mychar.innerhtml); //変更されたH2タグコンテンツを出力します
</script>
</body>
</html>
(4)注:オブジェクトは、document.getElementByID( "ID")を介して取得された要素など、取得した要素オブジェクトです。
2.3 HTMLスタイルを変更します
(1)構文:
コードコピーは次のとおりです。
object.style.property
(2)機能:HTMLスタイルの変更に使用されます
(3)例:
コードコピーは次のとおりです。
<body>
<h2 id = "con"> JavaScript </h2>が大好きです
<p> JavaScriptを有効にして、Webページが動的効果を表示し、ユーザーインタラクション機能を実装します。 </p>
<script type = "text/javascript">
var mychar = document.getElementById( "con");
mychar.style.color = "red";
mychar.style.backgroundcolor = "#ccc";
mychar.style.width = "300px";
</script>
</body>
(4)注:プロパティには、色、高さなどの多くのスタイルがあり、この方法を使用して変更できます。それらの後にプロパティにセミコロンを追加することを忘れないでください。
2.4 Show and Hide(表示属性を表示)
(1)構文:
object.style.display = value
(2)関数:ディスプレイと隠蔽は、ディスプレイ属性を使用することによって達成されるWebページでよく見られます。
(3)例:
コードコピーは次のとおりです。
<script type = "text/javascript">
functionhiddentext()
{
var mychar = document.getElementById( "con");
mychar.style.display = "none";
}
functionshowtext()
{
var mychar = document.getElementById( "con");
mychar.style.display = "block";
}
</script>
(4)注:値の値はなしでブロックされていません。ここでは表示されず、ブロックが表示されます。
2.5 className属性
(1)構文:
コードコピーは次のとおりです。
object.className = className
(2)関数:1。要素のクラス属性を取得します。 2. Webページの要素のCSSスタイルを指定して、要素の外観を変更します。
(3)例:
コードコピーは次のとおりです。
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<title> className属性</title>
<style>
ボディ{font-size:16px;}
。1つ{
国境:1px solid #eee;
幅:230px;
高さ:50px;
背景:#ccc;
色:赤;
}
。二{
ボーダー:1pxソリッド#ccc;
幅:230px;
高さ:50px;
背景:#9CF;
色:青;
}
</style>
</head>
<body>
<p id = "p1"> javascriptを有効にして、Webページが動的効果を表示し、ユーザーインタラクション機能を実装します。 </p>
<入力型= "ボタン"値= "add style" onclick = "add()"/>
<p id = "p2"> javascriptを有効にして、Webページが動的効果を表示し、ユーザーインタラクション機能を実装します。 </p>
<入力型= "button" value = "shange sigple" onclick = "modify()"/>
<script type = "text/javascript">
関数add(){
var p1 = document.getElementById( "p1");
p1.classname = "one";
}
function modify(){
var p2 = document.getElementById( "p2");
p2.classname = "two";
}
</script>
</body>
上記はこの記事のすべてです。あなたがそれを気に入ってくれることを願っています。