[JavaScript] querySelector() , querySelectorAll() 자바스크립트 요소접근

querySelector() , querySelectorAll()  요소접근

querySelector()

---

querySelector 는 특정 name 이나 id 를 제한하지않고 css선택자를 사용하여 요소를 찾습니다.

(#sections) -> sections 아이디를 가진 요소를 찾습니다

(.section) -> section 클래스명을 가진 요소를 찾습니다

반환객체는 한개의 요소만 찾을수있으며 동일한 클래스명 을 가진 객체가 있을경우 html문서내의 첫번째를 나타나는 요소를 반환합니다.

js

			var section = document.querySelector("#sections .section");

			section.style.border = "1px solid #ff0000";		

html

	
	

	
	
1
		
1-1
		
1-2
		
1-3
	
	
	
2
		
2-1
		
2-2
		
2-3
	
	
	

아래 실행을 시켜보면 #sections 밑의 .section 클래스를 가진 요소중 첫번째 .section 만 변경이 된것을 확인할수있습니다.

1
1. 1-1
2. 1-2
3. 1-3

2
1. 2-1
2. 2-2
3. 2-3

querySelectorAll()

---

querySelectorAll 은 querySelect 과 동일하게 작동하나 차이점은 해당 선택자에 해당하는 모든 요소를 가져옵니다.

반환객체는 nodeList이기때문에 for문 또는 foreach 문을 사용해야 합니다.

또한 (',') 을 사용하면  여러요소를 한번에 가져올수있습니다.

js

			var sections = document.querySelectorAll("#sections , #sections .section");
			console.log(sections.constructor.name)
			for( var i = 0; i < sections.length; i++ ){
				var item = sections.item(i);
				item.style.border = "1px solid #ff0000"; 
			}

html

	
	

	
	
1
		
1-1
		
1-2
		
1-3
	
	
	
2
		
2-1
		
2-2
		
2-3
	
	
	

아래 실행을 시켜보면 #section 요소와 #section요소 밑의 .section 요소가 모두 변경되는것을 확인할수 있습니다.

1
1. 1-1
2. 1-2
3. 1-3

2
1. 2-1
2. 2-2
3. 2-3