45. (javascript/자바스크립트) 쿼리 셀렉터 document querySelectorAll, querySelector 사용해 특정 태그 정보 확인 및 스타일 속성 변경

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>
    	/* 
    	[요약 설명]    	
    	1. document.querySelectorAll : 해당 선택자로 선택되는 요소를 모두 선택합니다
    	2. document.querySelector : 특정 태그에 포함된 첫번재 요소를 반환 합니다
    	3. 참고 : querySelector는  getElementById와 유사한 역할을 수행하지만, 속도면에서는 getElementById 보다 느립니다    	
    	*/
    	    	
    	
    	/* 이벤트 함수 정의 */
    	function main() {    		
    		    		
    		/* 특정 태그에 포함된 전체 자식 노드 확인 */    		    		    		
    		var divList = document.querySelectorAll("div");
    		console.log("[div 태그 포함한 전체 자식 정보 확인]");
    		console.log(divList); //divList[0] 방식으로 접근
    		
    		
    		/* 특정 태그에 포함된 요소 정보 확인 */
    		console.log("");
    		var selectDiv = document.querySelector("#one_container");
    		var backgoundColorOne = window.getComputedStyle(selectDiv).backgroundColor; //css 속성 확인
    		console.log("[one_container 태그 정보 확인]");
    		console.log("기존 backgoundColor : " + backgoundColorOne);
    		
    		selectDiv.style.backgroundColor = "#0000ff"; //selector 사용해 스타일 변경 실시
    		var backgoundColorTwo = window.getComputedStyle(selectDiv).backgroundColor; //css 속성 확인
    		console.log("변경 backgoundColor : " + backgoundColorTwo);
    		
    		console.log(selectDiv);
    		
    	};  	    	    	
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[요약 설명]

1. document.querySelectorAll : 해당 선택자로 선택되는 요소를 모두 선택합니다

2. document.querySelector : 특정 태그에 포함된 첫번재 요소를 반환 합니다

3. 참고 : querySelector는 getElementById와 유사한 역할을 수행하지만, 속도면에서는 getElementById 보다 느립니다

*/

/* =========================== */