출처: https://bumcrush.tistory.com/182 [맑음때때로 여름]

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

+ Recent posts

티스토리툴바