1. getElement와 querySelector의 비교
더보기
| getElement | querySelector | |
| 검색의 유연성 | 낮음 | 높음 |
| 속도 | 높음 | 낮음 |
| 검색 범위 | 문서전체 (document) | 문서전체(document) , 특정요소(element) |
| 반환 자료형 | HTMLCollection | NodeList |
- 검색의 유연성
getElement는 단일한 id , className , tagName으로 밖에 검색이 안되지만
querySelector는 다양한 선택자를 모두 사용할 수 있다. ( 예시: #goods > .pen )
- 속도
getElement가 속도면에서는 빠르다.
하지만 querySelector가 사용하지 못할 정도로 속도가 느린것은 아니기 때문에 사용하는 데는 문제가 없다.
- 검색범위
getElement의 경우 문서 전체 즉 document 객체에서만 검색이 가능하다. 단 getElementsByClassName()의 경우 element에서 실행할 수 있다. querySelector의 경우 문서 전체와 element에서 모두 검색이 가능하다.
- 반환자료형
getElement가 반환하는 HTMLCollection은 Live DOM으로 실시간으로 변화하는 DOM객체를 반영한다. 반면에 querySelector가 반환하는 NodeList는 non-Live DOM으로 변화하는 DOM객체를 반영하지 않는다.
2. 문서전체(document) 검색과 특정요소(element) 검색 비교
더보기
- getElement는 문서전체 검색만 되고 querySelector는 문서전체 검색과 특정요소 검색만 된다.
- 그러나 테스트 결과는 getElement도 특정요소 검색이 된다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="productForm">
<input id="productOne" class="product" type="text" value="Product 1" />
<input id="productTwo" class="product" type="text" value="Product 2" />
<input id="productThree" class="product" type="text" value="Product 3" />
</div>
<script>
const $productForm = document.getElementById("productForm");
$productForm.addEventListener("click",(e)=>{
console.dir(e.currentTarget);
// const htmlOne = e.currentTarget.getElementById('productOne');
// console.dir(htmlOne);
const htmlCollection = e.currentTarget.getElementsByClassName('product');
console.dir(htmlCollection);
const nodeList = e.currentTarget.querySelectorAll('.product');
console.dir(nodeList);
});
</script>
</body>
</html>
3. HTMLCollection과 NodeList의 차이
더보기
| HTMLCollection | NodeList | |
| 종류 | 유사 배열 | 유사 배열 |
| 특징 | Live DOM 객체 | non-Live DOM 객체 |
| map , reduce 사용 가능 여부 | 불가 | 불가 |
| forEach 사용 가능 여부 | 불가 | 가능 |
| 배열로 변경하기 |
1. Array.from(htmlCollection)
2. [...htmlCollection]
|
1. Array.from(NodeList)
2. [...NodeList]
|
4. HTMLCollection은 Live DOM 객체
더보기
- 노드 객체의 상태 변화를 실시간으로 반영한다.
- 같은 class명으로 노드 객체를 추가하면 조회 된다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="productForm">
<input id="productOne" class="product" type="text" value="Product 1" />
<input id="productTwo" class="product" type="text" value="Product 2" />
<input id="productThree" class="product" type="text" value="Product 3" />
</form>
<script>
const htmlCollection = document.getElementsByClassName('product');
console.dir(htmlCollection);
const $input = document.createElement("input");
$input.setAttribute("class","product");
$input.setAttribute("value","Product 4");
document.getElementById('productForm').append($input)
console.dir(htmlCollection);
</script>
</body>
</html>
5. NodeList는 non-Live DOM객체다.
더보기
- 노드 객체의 상태 변화를 반영하지 않는다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="productForm">
<input id="productOne" class="product" type="text" value="Product 1" />
<input id="productTwo" class="product" type="text" value="Product 2" />
<input id="productThree" class="product" type="text" value="Product 3" />
</form>
<script>
const nodeList = document.querySelectorAll('.product');
console.dir(nodeList);
const $input = document.createElement("input");
$input.setAttribute("class","product");
$input.setAttribute("value","Product 4");
document.getElementById('productForm').append($input)
console.dir(nodeList);
const nodeListNew = document.querySelectorAll('.product');
console.dir(nodeListNew);
</script>
</body>
</html>
6. 유사배열을 배열로 변환하기. ( Array.from() )
더보기
- Array.from()을 사용해서 유사배열을 배열로 변환한다.
- 배열로 변환되면 forEach를 사용할 수 있다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="productForm">
<input id="productOne" class="product" type="text" value="Product 1" />
<input id="productTwo" class="product" type="text" value="Product 2" />
<input id="productThree" class="product" type="text" value="Product 3" />
</form>
<script>
const htmlCollection = document.getElementsByClassName('product');
console.dir(htmlCollection);
Array.from(htmlCollection).forEach((element)=>{
console.dir(element);
});
const nodeList = document.querySelectorAll('.product');
console.dir(nodeList);
Array.from(nodeList).forEach((element)=>{
console.dir(element);
});
</script>
</body>
</html>
7. 유사배열을 배열로 변환하기. ( [...유사배열] 전개연산자 )
더보기
- 전개연산자를 사용해서 유사배열을 배열로 변환한다.
- 배열로 변환되면 forEach를 사용할 수 있다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="productForm">
<input id="productOne" class="product" type="text" value="Product 1" />
<input id="productTwo" class="product" type="text" value="Product 2" />
<input id="productThree" class="product" type="text" value="Product 3" />
</form>
<script>
const htmlCollection = document.getElementsByClassName('product');
console.dir(htmlCollection);
[...htmlCollection].forEach((element)=>{
console.dir(element);
});
const nodeList = document.querySelectorAll('.product');
console.dir(nodeList);
[...nodeList].forEach((element)=>{
console.dir(element);
});
</script>
</body>
</html>
반응형
'Javascript' 카테고리의 다른 글
| [ Javascript ] 다중 파일 업로드 (Frontend) (0) | 2022.07.18 |
|---|---|
| [ Sweetalert ] (0) | 2021.11.20 |
| [ Javascript ] (0) | 2021.11.16 |
