、HTML DOMの役割
HTML DOMメソッドは、我々はノード(html要素)に対して実行できるアクションです。
HTML DOMプロパティは、我々は設定したノード(HTML要素)の値を変更することができます。
プログラミング・インタフェース:
HTML DOMは、JavaScriptの(および他のプログラミング言語)を介してアクセスすることができます。
しながら、すべてのHTML要素は、対象オブジェクトとして定義されているプログラミングインタフェースがあるオブジェクトのメソッドとオブジェクトのプロパティ、メソッドを実行することができるアクションである(例えば、getElementByIdを())は、プロパティは、(例えば、ノード名またはコンテンツなど)を取得する機能や設定された値であります
二、HTML DOMオブジェクト - メソッドとプロパティ
(A)HTML DOM従来の方法:
- getElementByIdを() 指定されたIDを持つノード(要素)を取得します
- appendChild(ノード)新しい子ノードを挿入します(要素)
- removeChild(ノード)は、子ノード(要素)を削除します
(B)、従来のHTMLのDOMプロパティ
- innerHTMLの ノード(要素)のテキスト値
- parentNodesの 親ノードのノード(要素)
- childNodesの 子ノードのノード(要素)
- 属性 ノード(要素)属性ノードを
より良いオブジェクト、プロパティ、メソッドを理解するために、これらの定義は、最大の実際の例に拡張することができ、例えば、人に言います。
人は、以下のように理解することができるターゲット。
HTMLのDOMの方法は、ノード上で実行されるアクションです。人々はおそらく食べアプローチ()、スリープ()、仕事() などのこれらのアクションを実行することができます。これらの方法は全て持っていますが、異なる時間に実行されます。
HTMLのDOMの属性は、ノード設定または変更することができるの値を指します。人の財産は、その上の年齢、性別、体重、身長、名前、あってもよいです。誰もがこれらの属性を持っていますが、具体的な値は異なります。
三、DOMメソッド(従来の)
方法 | 意味 |
getElementByIdを() | 指定されたIDを持つ要素を取得します。 |
getElementsByTagNameの() | 指定されたタグ名を持つすべての要素を含むノードのリスト(セット/ノード配列)を取得しています |
getElementsByClassName() | ノードリストの指定されたクラス名を持つすべての要素を取得します。 |
appendChild() | 新しいサブエレメント(要素)を挿入 |
removeChild() | 子ノード(要素)を削除します |
replaceChild() | 子ノードを交換します |
insertBefore() | 子ノードの前に新しい子ノードを挿入します |
createAttributeを() | 属性ノードを作成します |
createElement() | 要素ノードを作成します |
createTextNode() | テキストノードを作成します。 |
getAttribute() | 指定されたプロパティ値を取得します。 |
setAttribute() | 指定した値に指定されたプロパティを設定または変更 |
第四に、例
(A)、およびページの背景色に変更する]ボタンをクリックしてください(getElementByIdを()メソッドを使用)
<body id="bg"> <button onclick="document.getElementById('bg').style.backgroundColor='#fcc'">红色</button> <button onclick="document.getElementById('bg').style.backgroundColor='#cfc'">绿色</button> <button onclick="document.getElementById('bg').style.backgroundColor='#ccf'">蓝色</button>
</body>
显示效果:点击红色按钮时,页面背景变为红色;点击绿色按钮时,页面背景变为绿色;点击蓝色按钮时,页面背景变为蓝色;
设置body元素的ID为bg,通过getElementById(‘bg’)方法获取body元素的ID,然后再为其设置CSS样式(style),背景颜色。其中涉及到了onclick单击事件属性
(二)、使用选色器改变页面背景颜色
<body id="bg"> <input type=color onmouseout="document.getElementById('bg').style.backgroundColor=this.value">
显示效果:选色器里面选择的颜色将会设置为页面背景颜色;
设置body元素的ID为bg,通过getElementById(‘bg’)方法获取body元素的ID,然后再为其设置CSS样式(style),背景颜色为(this.value)。其中涉及到了onmouseout鼠标离开事件属性。
打开选色器后
选择颜色