른록노트
[Javascript] querySelectorAll을 배열로 만들기 본문
문제상황
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form name="form1" method="post" action="https://naver.com">
<input type="text" name="p_name2" id="p_name2" value="test2">
<input type="text" name="p_name1" id="p_name1" value="test1">
</form>
</body>
<script>
console.log(document.querySelectorAll("[id^='p_name']"));
</script>
</html>결과 => NodeList(2) [input#p_name2, input#p_name1]위 처럼 querySelectorAll 메서드에 의해 반환되는 값은 NodeList 인데 (NodeList란?)
NodeList에 배열 함수를 사용할 수 없기 때문에 배열로 변환해 주고자 한다.
해결방법
console.log(document.querySelectorAll("[id^='p_name']")); // NodeList 반환 (기존)
//아래는 변환하는 코드
console.log(Array.prototype.slice.call(document.querySelectorAll("[id^='p_name']"))); // mozilla 추천 방법 (구버전 브라우저 지원)
console.log(Array.from(document.querySelectorAll("[id^='p_name']"))); // 블로그 소개 방법
console.log([...document.querySelectorAll("[id^='p_name']")]); // 블로그 소개 방법결과 =>
NodeList(2) [input#p_name2, input#p_name1]
[input#p_name2, input#p_name1]
[input#p_name2, input#p_name1]
[input#p_name2, input#p_name1]참고사이트
https://gracefullight.dev/2019/03/30/querySelectorAll-%EB%A1%9C-%EB%B0%B0%EC%97%B4%EB%A7%8C%EB%93%A4%EA%B8%B0/
https://developer.mozilla.org/ko/docs/Web/API/NodeList
반응형
Comments