<body>
        <div id="kdt11_id" class="kdt11_class" name="kdt11_name">
            <p>안녕</p>
        </div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <script src="DOM.js"></script>
        <!-- 이제는 밑에다가 써야 잘 인식됌 위에서부터 불러오니까 -->
    </body>
</html>
//()안에는 각각의 이름만 쓰면 된다.
//해당 ID를 가지는 요소를 불러오는 메소드
//요소 선택자를 사용해서 자신이 가져오고 싶어하는 요소를 가져
오는 메소드
const ids = document.getElementById('kdt11_id');
console.log(ids);

const classes = document.getElementsByClassName('kdt11_class');
console.log(classes);

const names = document.getElementsByName('kdt11_name');
console.log(names);

const tags = document.getElementsByTagName('body');
console.log(tags);

//getElementById 말고도 id니까 #표시해주고 이름 써도 접근가능, 여기선 class인지, id인지 표기잘해줘야함. css선택자 입력하듯이
//문서에서 만나는 제일 첫번째 요소만 반환함
const queryIds = document.querySelector('#kdt11_id');
console.log(queryIds);

const queryclass = document.querySelector('.kdt11_class');
console.log(queryclass);


const queryclass1 = document.querySelector('.box');
console.log(queryclass1);

//문서에 존재하는 모든 요소 출력
// 모든 요소를 가지고 와서 같은 데이터로 만든다.
const queryAll = document.querySelectorAll('.box');
console.log(queryAll);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.