[JavaScript] HTML 요소에 접근하는 방법을 알아보자!
1. getElement 패턴
사용 예
document.getElementById('아이디명');
document.getElementsByClassName('클래스명');
document.getElementsByTagName('태그명');
2. querySelector 패턴
사용 예
document.querySelector('#아이디명');
document.querySelectorAll('.클래스명');
document.querySelectorAll('태그명');
document.querySelector('.클래스명 > 태그명');
getElement 패턴과 querySelector 패턴의 다른 점
1. getElement 패턴이 속도가 빠르다.2. querySelector 패턴이 CSS 선택자와 같은 표기이고 가독성이 높다.
3. getElementsByClassName, getElementsByTagName은 DOM(Document Object Model, 돔)이 조작되면 값이 변하는 동적인 HTMLCollection을 반환하고 querySelectorAll은 DOM이 조작되어도 값이 변하지 않는 정적인 NodeList를 반환한다.
※ 기본적으로는 getElement 패턴을 사용하는 것을 추천합니다!
테스트 코드
<html><head>
</head>
<body>
<div id="id-1">ABC</div>
<div class="class-1">
<div>DEF</div>
</div>
<div class="class-1">
<p>abc</p>
</div>
<script>
console.log(document.getElementById('id-1'));
console.log(document.getElementsByClassName('class-1'));
console.log(document.getElementsByTagName('div'));
console.log('');
console.log(document.querySelector('#id-1'));
console.log(document.querySelectorAll('.class-1'));
console.log(document.querySelectorAll('div'));
console.log(document.querySelector('.class-1 > div'));
console.log('');
let getEl = document.getElementsByTagName('div');
let querySel = document.querySelectorAll('div');
console.log('div 태그 추가전');
console.log('getElementsByTagName: ' + getEl.length);
console.log('querySelectorAll: ' + querySel.length);
console.log('');
let newEl = document.createElement('div');
newEl.textContent = 'def';
document.body.appendChild(newEl);
console.log('div 태그 추가후');
console.log('getElementsByTagName: ' + getEl.length);
console.log('querySelectorAll: ' + querySel.length);
</script>
</body>
</html>
이상입니다. 오늘도 좋은 하루 보내세요🌈
댓글
댓글 쓰기