javascript 학습 노트(1)DOM 기본 동작

1589 단어 DOM기본 조작
html 부분 코드:show 단 추 를 누 르 면 showValue 함 수 를 터치 하여 input value 의 값 을 id="text"요소 노드 에 동적 으로 추가 합 니 다!
 
<p>
  <input type="text" value="" name="user_name" id="user_name" />
  <span style="padding-left:10px;"><input type="button" value="show" onclick="showValue()" /></span>
</p>
<p id="text"></p>
javascript 부분 코드:페이지 를 불 러 올 때 input 가 자동 으로 초점 을 맞 추고 사용자 가 내용 을 입력 하도록 유도 합 니 다.(자세 한 내용 은 사용자 체험 을 강화 합 니 다)
 
window.onload = function() {
var user_name = document.getElementById("user_name");
user_name.focus();
}
아무 내용 도 입력 하지 않 으 면 오류 알림 을 주 고 input 에 입력 초점
 
function showValue() {
var user_name = document.getElementById("user_name");
var text = document.getElementById("text");
if(user_name.value == "") {
alert("Please input some words");
user_name.focus();
} else {
text.innerHTML = user_name.value;
text.setAttribute("class", "text");
}
}
HTML 코드 의
를 사용 하지 않 아 도 됩 니 다.DOM 동적 으로 만 들 고 문서 에 추가 할 수 있 습 니 다!
 
// div
var text = document.createElement("div");
// user_name.value div
text.appendChild(user_name.value);
// div body
document.body.appendChild(text);

좋은 웹페이지 즐겨찾기