[JS] HTML태그에 접근하기 : document.getElementByXXX()

 

 

HTML 태그에 접근하기

 

 

getElementById()

아이디로 접근하기

getElementById() : 반환타입 Element

해당 아이디의 요소를 선택함. id는 단일만이라 element이고 s로 안씀

<button onclick="accessId();">아이디로 접근</button>
	<script>
		function accessId(){
			// 아이디로 접근 누르면 웹상 파란 네모에 값이 들어가게끔 만들 것임
			// 파란 네모(엘레먼트)에 접근해야하는데 id,class 등등 사용하여 접근 가능
			var area = document.**getElementById**('area1'); /* 코드 의미 : 다큐먼트에서 엘리먼트를 id로 읽어오겠다 */
			area.style.backgroundColor = 'pink';
			area.innerHTML = '아이디 접근 성공';
			area.innerHTML **+=** '아이디 접근 성공'; /* 누를 때마다 출력하게 하고 싶을 경우 : += */
		}
	</script>

 

getElementsByTagName()

태그명으로 접근하기

getElementsByTagName('태그명') : 반환타입 [] HTMLCollection

지정된 태그 이름을 가진 모든 자식 요소 컬렉션을 반환

 

추출할 태그명을 매개변수 넣으면 된다 li를 추출하고 싶으면 'li',ul 추출하고 싶으면 'ul'

<button onclick="accessTagName();">태그 명으로 접근</button>
	<script>
		function accessTagName(){
			// var : 변수 선언 예약어
			// .getelementsByTagName() : 지정된 태그 이름을 가진 모든 자식 요소 컬렉션을 반환
			var list = document.getElementsByTagName('li'); /* 문서내부 전체 <li>태그를 카운트한다는 의미. 해당 태그를 전부 카운트*/
			console.log(list);
		// 태그명이 하나라는 보장 x  -> 여러개 가지고 올 수 있다
		// 즉, 엘리먼트가 아닌 element's' 엘리먼츠. getElementsByTagName()
		// 변수 선언 var : 데이터타입 제한x
		// 지금까지 str, boolean, array 등 받음
			var changeColor = 50
			for (var i = 0; i<list.length; i++){
				list[i].style.backgroundColor = "rgb(130,220," + changeColor +")";
				changeColor += 50; /* rgb(0,0,0) 색상 컬러의 매개변수를 변수처리해서 색상을 변화시킴*/
				// <li>
			}

		}
	</script>

 

getElementsByName()

name으로 접근하기

getElementsByName() : 반환타입 [] list

해당 name 속성값을 가지는 요소를 모두 선택함.

같은 name이 여러개일 수 있으니 엘레멘'츠' 사용

 

<form>
    <fieldset>
        <legend>취미</1egend>
        <table>
            <tr>
                <td><input type="checkbox" name="hobby" value="game" id="game"><label>게임</label></td>
                <td><input type="checkbox" name="hobby" value="music" id="music"><label>음악</label></td>
                <td><input type="checkbox" name="hobby" value="movie" id="movie"><label>영화</label></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="hobby" value="book" id="book"><label>독서</label></td>
                <td><input type="checkbox" name="hobby" value="travel" id="travel"><label>여행</label></td>
                <td><input type="checkbox" name="hobby" value="exercise" id="exercise"><label>운동</label></td>
            </tr>
        </table>
    </fieldset>
</form>
<br>
<div id="area2" class="area"></div><br>
<button onclick="accessName();">name으로 접근</button>	<!-- 버튼 클릭하면 accessName() 실행 -->
<script>
    function accessName(){
    // .getelementsByName() : 지정된 태그 이름을 가진 모든 요소의 컬렉션을 반환
    var hobby = document.getElementsByName ('hobby');
    console.log(hobby);


    var checkItem = ''; /* checkItem은 str */
    // length 속성은 컬렉션의 요소 수를 반환
    for (var i = 0; i < hobby.length; i++){
        if(hobby[i].checked == true) {	// console창에서 check항목 체크하는 조건문
            checkItem += hobby[i].value + "선택함<br>";  
            // .value를 사용할 때는 input태그의 밸류값을 가지고 올 때만 쓰고 다른 경우에는 innerHTML사용 
            // input 태그 외에는 value가 없음.
        }
    }

 

getElementsByClassName()

class로 접근하기

getElementsByClassName() : 반환타입 [] HTMLCollection

해당 클래스에 속한 요소 모두를 선택

button onclick="accessClass();">classe 2</button>
	<script>
		function accessClass(){
			var area = document.getElementsByClassName('area');	// 컬렉션타입 2가 변수로 들어감
			console.log(area);
			for(var i = 0; i < area.length; i++){
				area[i].style.borderstyle = 'dashed';
			}
			// background-color ==> backgroundColor, border-style ==> borderStyle
			// CSS에서의 코드들이 js에서 이런식으로 바뀜
		}
	</script>