JavaScript 문서 객체(DOM)

문서 객체 :  태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것

 

 

DOM 요소에 접근하기

1개 선택	document.getElementByld('아이디')	아이디로 1개 선택
	document.querySelector('선택자')	선택자로 1개 선택
여러 개 선택	document.getElementsByName('이름')	name 속성으로 여러 개 선택
	document.getElementsByTagName('태그명')	태그명으로 여러 개 선택
	document.getElementsByClassName('클래스')	class 속성으로 여러 개 선택
	document.querySelectorAll('선택자')	선택자로 여러 개 선택

 

요소의 내용을 수정(지정하거나 가져올 수 있음

textContent	문서 객체 내부 글자를 순수 텍스트 형식으로 가져오도록 변경
요소.innerHTML = 내용	문서 객체 내부 글자의 HTML 태그를 반영해 가져오도록 변경
innerText	텍스트 내용 변경(불필요한 공백을 제거해서 가져옴)

setAttribute(속성이름, 속성 값)	속성 값을 바꿈
getAttribute(속성이름)	속성 값을 가져옴

 

 

이벤트 처리

요소.addEventListener(이벤트, 함수, 캡처여부)

특정 요소에 이벤트를 등록할 때 사용

-스크립트 코드의 지역화

먼저 window.onload = function() 만들어주고

  => 필요한 도구들을 준비해서

  => 이벤트 코드를 작성한다.

    <script>
        //init()였던 값을 직접 입력해줌(로 감싸줌)
        window.onload = function(){
            var btnPrint =document.getElementById("btn-print");

            //printResult() 함수를 익명함수로 바꿔 값을 넣어줌
            btnPrint.onclick = function(){
                var x = prompt("x 값을 입력하세요", 0);
                var y = prompt("y 값을 입력하세요", 0);
        
                x = parseInt(x);
                y = parseInt(y);
        
                span1.innerText = x+y;
            };
        }
    </script>
</head>

 

-이벤트 리스너 : 같은 이름의 함수가 만들어 졌을 때 덮어씌워지는 것을 방지하기 위해 이벤트리스너를 사용해줌

(js코드를 따로 분리해서 이용하면서 팀원들과 협업할 때 코드가 중복될 수 있음)

        //이벤트 이름은 load
        window.addEventListener("load",function(){
            var btnPrint =document.getElementById("btn-print");

            btnPrint.onclick = function(){
                var x = prompt("x 값을 입력하세요", 0);
                var y = prompt("y 값을 입력하세요", 0);
        
                x = parseInt(x);
                y = parseInt(y);
        
                span1.innerText = x+y;
            };
        });//잘 닫아주자

 

CSS속성 접근

document.요소명.style.속성명
document.getElementById("desc").style.color = "blue";

 

문서 객체 생성

removeChild(요소)	자손요소를 제거합니다.
appendChild(요소)	요소 노드를 body에 추가
replaceChild(새로운요소,이전요소)	자손요소를 새롭게 변경합니다.
createElement()	요소 노드 생성
createTextNode()	텍스트 노드를 생성

 

정렬해주는 사이트

https://beautifier.io/