JavaScript基础教程

JavaScript 对象

JavaScript 函数

JS HTML DOM

JS 浏览器BOM

AJAX 基础教程

JavaScript 参考手册

JS DOM CSSの変更 JS HTML DOMシレンシーサー

JS DOM HTMLコンテンツの変更

HTML DOM允许JavaScript获取和更改HTML元素的内容。

更改HTML内容

更改HTML元素内容的最简单方法是使用innerHTML属性。

要更改HTML元素的内容，请使用以下语法：

element.innerHTML　=　text

以下示例使用id="para" 変更<p>要素の内容：

例

<!DOCTYPE html>
<html>
<p　id="para"></p>
<script>
document.getElementById("para").innerHTML = "Hello world";
</script>
</html>

テストを見て‹/›

以下の例取得id="para"の<p>要素の内容：

例

<!DOCTYPE html>
<html>
<p id="para">This is a paragraph.</p>
<p id="result"></p>
<script>
var x = document.getElementById("para").innerHTML;
document.getElementById("result").innerHTML = x;
</script>
</html>

テストを見て‹/›

出力ストリームを変更

document.write()メソッドはテキスト文字列をドキュメントストリームに書き込みます。

例

<!DOCTYPE html>
<html>
<p>document.write()メソッドはテキスト文字列をドキュメント出力ストリームに書き込みます:</p>
<script>
document.write(new Date());
</script>
</html>

テストを見て‹/›

このメソッドは、ドキュメントが解析されているときにのみ、内容を現在のドキュメントに書き込みます。

ページが読み込まれた後にこのメソッドを使用すると、ドキュメント内のすべての既存内容をオーバーライドします。

例

<button onclick="myFunc()">Click me</button>
<script>
function myFunc() {
　　document.write(new Date());
}
</script>

テストを見て‹/›

属性的値を変更

HTML属性の値を変更するには、以下の语法を使用してください：

element.attribute = new value

以下の例変更<img>要素のsrc属性の値：

ボタンをクリックしてアバターを変更：

以下の例取得アンカー要素のhref属性の値：

例

var x = document.getElementById("demo").href;

テストを見て‹/›

向DOMに新しい要素を追加

以下を使用してDOMに新しい要素を追加できます。document.createElement()メソッドはHTMLドキュメント内で新しい要素を明示的に作成します。

このメソッドは新しい要素を作成しますが、DOMに追加しません。これを行うためには、別のステップで実行する必要があります：

　　//　新しいhを作成3要素
　　var　newElem　=　document.createElement("h3");
　　//　そして、それに内容を与えます。
　　var newContent = document.createTextNode("こんにちは、皆さん!");

appendChild()メソッドは、指定された親ノードの他のすべてのサブノードに新要素を追加します。末尾。

例

//　新しいhにテキストノードを追加3
newElem.appendChild(newContent);　　
//　新しく作成した要素およびその内容をDOMに追加します。
document.body.appendChild(newElem);

テストを見て‹/›

ただし、他のいかなるサブアイテムにも先頭新しい要素を追加する場合、以下を使用insertBefore()メソッド。

例

//新しいhを作成3要素
var　newElem　=　document.createElement("h3");
//　それに内容を与える
var　newContent　=　document.createTextNode("Hi　there　and　greetings!");
//　新しいhにテキストノードを追加3
newElem.appendChild(newContent);　　
//　Bodyを取得
var　body　=　document.body;
//　Insert H3　BODYの最初の子要素
body.insertBefore(newElem,　body.childNodes[0]);

テストを見て‹/›

DOMから既存の要素を削除

同様に、以下を使用してremoveChild()DOMから子ノードを削除するメソッド。

例

var　div　=　document.getElementById("demo");
div.removeChild(div.firstElementChild);

テストを見て‹/›

JS DOM CSSの変更 JS HTML DOMシレンシーサー