DOM

kh0520·2022년 6월 16일

1)학습내용

Dom 이란?

문서 객체를 조합해서 만든 전체적인 형태를 문서 객체 모델(DOM)라고한다
제이쿼리 같은 라이브러리와 리액트와 같은 프레임워크를 사용하기 때문에 문서 객체조작이 쉬워졌다.

문서객체가져오기

document.querySeletor() 요소하나만 추출
document.querySeletorAll() 문서객체를 여러개 추출

quertySelector()메소드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.addEventListener('DOMcontentLoaded',()){
            //요소 읽어들이기
            const header =document.quertySelector('h1')

            //텍스트와 스타일변경
            header.textContent = 'HEADERS';
            header.style.color = 'white';
            header.style.backgroundColor= 'black';
            header.style.padding = '10px'
        }
    </script>
    <h1>가나다라</h1>
</body>
</html>

글자조작하기

문서객체.textContent :입력된 문자열을 그대로 넣기
문서객체.innerHTML : 입력된 문자열을 HTML형식으로 넣기

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.addEventListener('DOMcontentLoaded',() => {
            const a =document.querySelector('#a')
            const b =document.querySelector('#b')

            a.textContent = '<h1>textContent 속성</h1>'
            b.innerHTML = '<h1> innerHTML 속성 </h1>'
        });
       
    </script>

    <div id="a"></div>
    <div id="b"></div>
</body>
</html>

속성조작하기

문서 객체.setATTribute(속성 이름, 값) 특성 속성에 값을 지정
문서 객체.getAttribute(속성이름) : 특정속성을 추출

스타일을 조절하기

h1.style.backgroundColor -> 가장많이씀
h1.style['backgroundColor']
h1.style[background-color]

2) 어려웠던점

객체를 조절하는 명령어를 잘못썻던점

3) 해결방법

책에있는 명령어를 통해 해결

4) 소감

Dom 에 대해서 알아보았는데 자바스크립트로 css를 만질수 있다는게 신기했다
다양한 메소드가 있었는데 제대로 이용을 못한것이 조금 아쉬운 부분이 있었다

kh0520

반갑습니다~

이전 포스트

array 객체와 실습

다음 포스트

DOM