JavaScript学習メモ(1) DOMの基本操作_基礎知識

HTML コードの一部:
表示ボタンをクリックすると、showValue 関数がトリガーされ、入力値の値が id="text" の要素ノードに動的に追加されます。

コードをコピー コードは次のとおりです。

input type= "text" value="" name="user_name" id="user_name" />

>

コードの JavaScript 部分:
ページが読み込まれると、入力は自動的にフォーカスを取得し、ユーザーがコンテンツを入力するようにガイドされます。 (詳細によりユーザー エクスペリエンスが向上します)

コードをコピー コードは次のとおりです:

window.onload = function( ) {
var user_name = document.getElementById("user_name");
user_name.focus();
}

内容が入力されていない場合はエラーになります同時に、入力に入力フォーカスを取得させます

コードをコピーします コードは次のとおりです:

function showValue() {
var user_name = document.getElementById("user_name");
var text = document.getElementById("text");
if(user_name. value == "") {
alert(" 単語を入力してください");
user_name.focus();
} else {
text.innerHTML =
text; .setAttribute("class", "text");
}
}

HTML コード内の

DOM を使用して動的に作成し、ドキュメントの中央に追加することができます。

コードをコピー コードは次のとおりです:

// div 要素を作成します
var text = document .createElement("div");
// user_name.value の値を div 要素に追加します
text.appendChild(user_name.value)
// 最後に div 要素を追加します本文
document.body.appendChild(text); に来ます。