dom 안의 요소(element)의 개수 구하기 방법들 (jquery, js)

dom 안의 요소(element)의 개수는 어떻게 구하는지 개수 세는 다양한 방법들을 모아보았습니다. --- jQuery how to count number of elements?

 

 

jQuery

 

.length;

---

.size() 함수는 3.0 버전부터 사라졌습니다.

 

$("input[name=sampleName]").length);

 

 

 

.each(function(index, Element);

---

객체만큼 반복해 함수 실행합니다. 마치 for 문처럼 반복하며, 인덱스 초기값은 0이며 콜백함수 실행합니다.

 

$("input[name=sampleName]").length);

 

 

 

 

JS

 

.length

---

태그의 전체 개수를 세는 방법. getElementsByTagName을 활용합니다.

 

document.getElementsByTagName("*").length;

 

배열 내 element의 개수를 구할 때 arrayName.length;

<form name='my_form'>
  <input type='button' onclick='count_input();' value='개수 세기' />
  <hr>
  <input type='text' name='tag' />
  <input type='text' name='tag' />
  <input type='text' name='tag' />
  <input type='text' name='tag' />
  <input type='text' name='tag' />
</form>

<script>
  function count_input() {
    alert(my_form.tag.length);
  }
  // https://zetawiki.com/wiki/
</script>

 

 

 

Object.keys(obj)

---

배열 말고 객체의 길이를 구하는 방법입니다. Object의 경우 length를 지정하면 undefined가 나타나기에 Object.keys를 이용해서 구합니다. {key : value}로 이루어진 JSON 형식의 key 개수를 구할 때도 쓰입니다. for 반복문으로도 결과를 도출할 수 있지만 더 효율적으로 key 개수를 구하는 방법입니다.

 

var ex_obj = { 'a' : '1st', 'b' : '2nd', 'c' : '3rd', 'd' : '4th' };
var obj_length = Object.keys(ex_obj).length;

// ex_obj -> 열거형 고유 속성이 반환될 개체
// 리턴값 -> 지정된 개체의 모든 나열형 속성들을 나타내는 문자열 배열

// 참고
// http://egloos.zum.com/beewee/v/947615
// https://ipex.tistory.com/entry

 

 

 

childElementCount

---

자식 요소의 개수를 세는 방법. childElementCount 프로퍼티를 이용하는 것입니다.
자식의 자식 요소는 포함되지 않습니다. IE 9 이상과 최신 브라우저에서 잘 동작합니다.

 

<div id="Test">
  <span>doby</span>
  <span>is <b>all</b></span>
  <span>free</span>
</div>

var ele = document.getElementById('Test');
var eleCount = ele.childElementCount;

console.log(eleCount); //3

// 출처 : https://webisfree.com/