js - 요소 가져오기

학습파일 1)

03.요소가져오기(접근하기).html

0.01MB

                 2)

03_01요소가져오기prac.html

0.00MB

 

HTML 요소에 접근하기(해당 요소객체 가져오기)

 

html에서 요소를 가져오는 방법 5가지

 

1) 아아디를 이용해서 요소 가져오기

2) 태그명을 이용해서 요소 가져오기 

3) name 속성값을 이용해서 요소 가져오기

4) 클래스를 이용해서 요소 가져오기

5) 내가 원하는 요소를 자유자재로 가져오기 (선택자를 활용)

 

 

많이 사용하는 아이디와,원하는 요소 2가지 방법 설명

 

1) 아아디를 이용해서 요소 가져오기

 

 

위와 같은 div 태그와 button 태그가 있고  button 클릭시 div 태그에 접근하고자 한다면

변수명 = document.getElementById("id값") 을 통해 접근 가능하다.

area1에는 현재 아래 div 태그 전체를 가르킨다.

<div id="area1" class="area"></div>

이후 내용을 추가하고 싶다면 area1.innerHTML을 사용해서 입력(내용, 함수 등) 가능하다.

속성에 접근하고자 할 때  => 선택된요소.접근하고자하는속성

 

추가로 선택된 요소의 스타일 또한 변경 가능하다. (동적 방식)

 //선택된 요소의 스타일 변경
area1.style.backgroundColor = "pink";
area1.style.color = "red";
area1.style.width = "200px";

 

5) 내가 원하는 요소를 자유자재로 가져오기 (선택자를 활용)

 

1) document.querySelector("선택자") => 선택된 요소 객체 하나만 반환
2) document.querySelectorAll("선택자") => 선택된 요소 객체들을 배열에 담아서 반환

 

기존 파일 x 새로 작성

 

첫번째 div 와 두번째 div 의 h4 모두 접근 후 innerHTML로 내용 변경

 

1.  querySelector(id)로 가져오기

 

2. querySelectorAll(".클래스>하위요소"); = 클래스명이 test2인 div의  자식요소 (h4) 모두 가져오기

**div2 같은 경우 요소가 한개 이상이기 때문에 검색된 모든 노드를 NodeList 라는 객체에 담아서 반환이 됨. NodeList 는 자주 사용하는 배열과 비슷한 일종의 ArrayList 컬렉션 객체로 DOM 객체 중 하나임.

 

3. 이후 innerHTML로 내용 변경 

div1.innerHTML = '테스트라구요?';
div2[0].innerHTML = '환영 인사입니다.';
div2[1].innerHTML = '정식 인사입니다.';

 

버튼 클릭 전

 

 

버튼 클릭 후