HTML 태그를 자바스크립트로 가져오는 방법
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서객체 동적 생성</title>
<script>
window.onload = function() {
//html 문서의 요소를 문서 객체로 만들기
// id 속성값으로 문서 객체 생성 : 캐스팅
// document.getElementById('아이디속성값');
var header1 = document.getElementById('header-1');
var header2 = document.getElementById('header-2');
// 문서 객체의 속성 변경
header1.innerHTML = '<i>문서객체 생성</i>';
header2.textContent = '<i>문서객체 생성</i>';
};
</script>
</head>
<body>
<div id="header-1">1</div>
<div id="header-2">2</div>
</body></html>
여러 개의 문서 객체 가져오는 방법
- document 객체의 getElementById( )메서드는 한 번에 한 가지 문서 객체만 가져올 수 있음
- 아래 메서드를 이용해서 여러 개의 객체를 가져올 수 있음
getElementsByName(name) : 태그의 name 속성이 name과 일치하는 문서 객체를 배열로 가져온다.
getElementsByTagName(tagname) : tagName과 일치하는 문서 객체를 배열로 가져온다.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서객체 동적 생성</title>
<script>
window.onload = function() {
// 태그이름으로 문서객체 생성 > 배열로 반환
var divs = document.getElementsByTagName('div'); // div 아래두개모두선택
divs[0].innerHTML='By tagname - 0 ';
divs[1].innerHTML='By tagname - 1 ';
};
</script>
</head>
<body>
<div id="header-1">1</div>
<div id="header-2">2</div>
</body></html>
HTML 5에서 추가된 메서드
querySelector / querySelectorAll 예제1)
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서객체 동적 생성</title>
<script>
window.onload = function() {
// CSS의 선택자로 선택할수 있는 메소드
var div1 = document.querySelector('div'); // 가장 첫번째거 가져옴.
alert(div1.innerHTML) // 1
var divs = document.querySelectorAll('div');
alert(divs[0].innerHTML+' : querySelectorAll'); // 1 : que~
};
</script>
</head>
<body>
<div id="header-1">1</div>
<div id="header-2">2</div>
</body></html>
querySelector / querySelectorAll 예제2)
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서객체 동적 생성</title>
<script>
window.onload = function() {
var input = document.querySelector('input[type=button]');
alert(input.value);
var input2 = document.querySelector('input[type=text]');
alert(input2.value);
};
</script>
</head>
<body>
<input type="button" value="네이버로 이동" id="go_naver_btn">
<input type="text" value="텍스트">
</body></html>
querySelector / querySelectorAll 예제3)
> 유효성 검사
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Window Object</title>
<script>
window.onload = function() {
document.getElementById('go_naver_btn').onclick = function() {
var userid = document.querySelector('#userid');
var uid = userid.value;
if (uid.length < 1) {
alert('아이디는 필수 입력항목입니다.');
} else {
alert('사용자가 입력한 아이디는 ' + userid.value + '입니다.');
}
};
};
</script>
<style>
</style>
</head>
<body>
<input type="text" value="test" id="userid">
<br>
<input type="button" value="확인" id="go_naver_btn">
</body></html>
'front-end > Javascript & jquery' 카테고리의 다른 글
| [자바스크립트] 유효성검사 (0) | 2020.11.30 |
|---|---|
| [자바스크립트] 이벤트 (0) | 2020.11.30 |
| [자바스크립트] 문서객체의 스타일 조작 (0) | 2020.11.30 |
| [자바스크립트] 문서객체 만들기 / createElement / createTextNode (0) | 2020.11.30 |
| [자바스크립트] onload (0) | 2020.11.30 |
| [자바스크립트] 윈도우 객체 (0) | 2020.11.30 |
| [자바스크립트] json /제이슨 (0) | 2020.11.27 |