javascript 학습 노트 (1) 기본 DOM 작업_기본 지식

HTML 코드의 일부:
표시 버튼을 클릭하면 showValue 함수가 트리거되고 입력 값의 값이 id="text"인 요소 노드에 동적으로 추가됩니다!

코드 복사 코드는 다음과 같습니다.

입력 유형= "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 = user_name.value
text; .setAttribute("class", "text");
}
}


HTML 코드의

완전히 불필요합니다. DOM을 사용하여 동적으로 생성하고 문서 중간에 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다. //div 요소 생성

var text = document .createElement("div");

//div 요소에 user_name.value 값을 추가합니다.
text.appendChild(user_name.value)
//마지막으로 div 요소를 추가합니다.
document.body.appendChild(text)

로 오세요.