<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.