FreeHand

Javascript DOM 본문

Language/Javascript

Javascript DOM

Jinn 2023. 10. 26. 00:21

DOM(Document Object Model, 문서 객체 모델): 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식

 

HTML 태그를 자바스크립트 객체로 만든 것을 문서 객체라고 한다.

즉, 자바스크립트 코드로 HTML을 조작할 수 있다.

 

 

문서 객체 선택

  • document.querySelector(태그)
  • document.querySelectotAll(태그)
  • document.getElementById(id값)
<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload = function() {
            document.querySelector('h1').style.color = 'blue';
        }
    </script>
</head>
<body>
    <h1>javascript - 1</h1>
    <h1>javascript - 2</h1>
    <h1>javascript - 3</h1>
</body>
</html>

여러개의 h1 태그에서  첫번째만 선택되었다.

 

 

<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload = function() {
            const headers = document.querySelectorAll('h1');
            
            for(let head of headers)
                head.style.color = 'blue'
        }
    </script>
</head>
<body>
    <h1>javascript - 1</h1>
    <h1>javascript - 2</h1>
    <h1>javascript - 3</h1>
</body>
</html>

h1 태그가 모두 선택되어 배열로 반환한다.

 

 

<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload = function() {
            const header = document.getElementById('no2');
            header.style.color = 'blue';
        }
    </script>
</head>
<body>
    <h1 id="no1">javascript - 1</h1>
    <h1 id="no2">javascript - 2</h1>
    <h1 id="no3">javascript - 3</h1>
</body>
</html>

이름 그대로 태그의 id값으로 선택한다.

 

 

문자 조작

  • 문서객체.innerHTML
  • 문서객체.textContent
<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload = function() {
            const header = document.getElementById('header');
            const origin = header.innerHTML;
            header.innerHTML = '자바스크립트<br>';
            header.innerHTML += 'origin = ' + origin;
        }
    </script>
</head>
<body>
    <h1 id="header">javascript</h1>
</body>
</html>

"javascript"가 아닌 "자바스크립트"로 출력된다.

innerHTML은 문서 객체 내부의 문자를 의미한다.

 

 

<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload = function() {
            const header = document.getElementById('header');
            const origin = header.textContent;
            header.textContent = '자바스크립트<br>';
            header.textContent += 'origin = ' + origin;
        }
    </script>
</head>
<body>
    <h1 id="header">javascript</h1>
</body>
</html>

textContent는 innerHTML과 달리 태그를 문자로 인식한다.

 

 

속성 조작

  • setAttribute(속성이름, 속성값) : 속성 지정
  • getAttribute(속성이름) : 속성 값 가져오기
  • 웹 표준에 정의된 속성
<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload = function() {
            const image = document.getElementById('image');
            
            image.src = 'https://via.placeholder.com/300x200';
            image.width = 300;
            image.height = 200;
        }
    </script>
</head>
<body>
    <img id="image">
</body>
</html>

"https://via.placeholder.com/너비x높이"는 임시 이미지를 가져온다.

웹 표준에서 정의된 속성은 메서드 없이 바로 접근할 수 있다.

메서드 없이 img 태그의 속성을 추가했다.

 

'Language > Javascript' 카테고리의 다른 글

[Javascript] 이벤트 루프와 비동기 처리  (0) 2024.09.27
[Javascript] 실행 컨텍스트  (2) 2024.09.25
Event  (0) 2023.10.26
객체  (0) 2023.10.23
'Language/Javascript' Related Articles more