웹 개발하다 보면 동적으로 특정 노드(엘리먼트)를 수정하게 되는 경우가 흔히 발생한다. 이때 자바스크립트 함수 querySelectorAll()을 사용하면 태그의 id로 하위 노드의 객체를 리스트 형태로 모두 호출할 수 있다. 해당 함수는 아래와 같이 사용할 수 있다.
var list = document.querySelectorAll("id 또는 class 명");
querySelectorAll()의 특징이 있는데, CSS 같은 방법으로 사용한다는 점이다.
즉, 노드를 접근할 때 아래와 같이 계층 구조로 접근하면 된다는 것이다.
idName 이라는 태그 하위에 li 태그들을 호출한다는 의미이다.
var list = document.querySelectorAll("#idName li");
그럼 예를 들어 알아보자.
아래와 같이 HTML 소스가 있다고 생각하고, li를 전부 호출해보자.
<body>
<ul id="parentId">
<li id="test1">김치, 한복, 태권도</li>
<li id="test2">원산지는?</li>
<li id="test3">Made in Korea</li>
</ul>
</body>
자바스크립트 부분은 아래와 같이 작성하면 된다.
해석하면, 우선 querySelectorAll 함수를 통해 노드 리스트를 호출하고,
liList 변수에 리스트 형태로 저장된 객체를 순서대로 for 문으로 호출한 뒤,
해당 객체의 태그 안에 입력된 텍스 값을 콘솔 창에 찍어준다.
<script>
var liList = document.querySelectorAll("#parentId li");
for(var i=0; i < liList.length; i++){
console.log(i + "]] 번째 태그 " + liList[i].innerHTML);
}
</script>
HTML 화면 :
콘솔 결과 :
간단하게 성공ㅋ
'[개발] Programming > Javascript' 카테고리의 다른 글
| 자바스크립트 로그 찍기 : console.log (콘솔 디버깅) (0) | 2022.12.08 |
|---|---|
| 자바스크립트 Uncaught SyntaxError: missing ) after argument list 오류 해결 (0) | 2021.12.09 |
| 자바스크립트, 태그에 이벤트 함수 바인딩하기 - addEventListener() (0) | 2021.07.25 |
| 자바스크립트 document.getElementById() - id로 dom 요소 찾기 (0) | 2021.07.20 |
| 마우스 스크롤 시 실행되는 jQuery 함수 - window scroll (0) | 2021.03.20 |
댓글