HTML 태그 이름(tag name)을 이용한 선택

모든 수업내용 자료는 tcpschool의 자료임을 밝힙니다.

 

DOM 요소의 선택

HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 합니다.

자바스크립트에서 특정 HTML 요소를 선택하는 방법은 다음과 같습니다.

1. HTML 태그 이름(tag name)을 이용한 선택

2. 아이디(id)를 이용한 선택

3. 클래스(class)를 이용한 선택

4. name 속성(attribute)을 이용한 선택

5. CSS 선택자(selector)를 이용한 선택

6. HTML 객체 집합(object collection)을 이용한 선택

본격적으로  javascript을 이용하여 어떻게 html 요소와 css 요소에 접근할 수 있는지에 대해 공부해보겠다.

HTML 태그 이름(tag name)을 이용한 선택

getElementsByTagName() 메서드는 HTML 태그 이름을 이용하여 HTML 요소를 선택합니다.

js 파일을 보면 원하는 태그를 선택하여 연관성이 있는 탱크를 모두 선택해주고 있습니다.

getElementsByTagName("li");   메서드를 보면 해당 태그의 이름을 따옴표를 이용하여 이름만 넣어주어 사용하고 있는 것을 알 수 있다.

var selectedItem = document.getElementsByTagName("li");

 selectedItem 의 값은 5가 된다. HTML 코드를 보면 <ul> 테그 안에 <li> 태크가 5개 존재한다. 

따라서  selectedItem.length =5 가된다.

for (var i = 0; i < selectedItem.length; i++) {

selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.

}

이를 이용해서 배열 형태의 느낌으로 li 테그가 저장되어있는 selectedItem.item(i).style.color = "원하는color"; 로 값을 주고있다 . 몇번째 요소 인지에 대해서 접근할 때는 item(var) 을 사용하고 있다.

 

js를 

var selectedItem = document.getElementsByTagName("li"); // 모든 <li> 요소를 선택함.

for (var i = 0; i < selectedItem.length; i++) {

selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.

} 으로 해주어도 <ul> 테그에 해당하는 영역이 제대로 작동하는 것을 알 수 있다.