아래 예시의 html 파일이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>check</title>
</head>
<body>
<div class="test1">테스트1</div>
<div class="test1">테스트1</div>
<span class="span">스팬</span>
<div class="test2">테스트2</div>
<span class="span">스팬</span>
</body>
</html>
위의 예시에서 document.getElementsByClassName('test1') 을 사용한다면
'test1' 이라는 ClassName을 가지고 있는 모든 요소들을 배열의 형태로 반환한다. => [div.test1, div1.test1]
문제
- document.getElementsByClassName() 함수를 사용하지 않고,
- 주어진 className을 가지고 있는 모든 html element를 찾는 함수를 만들어야 한다.
- 결과 값은 배열의 형태로 리턴해야 한다.
조건
- 전체 바디를 선택해 준다.
- 바디안의 내용들을 모두 확인
- 선택한 요소에 자식이 있는지 확인
- 바디안에 클래스가 있는지 확인
- 클래스가 있으면 찾고자 하는 클래스 네임과 일치하는지 찾기
- 일치한다면 배열에 넣기
1. 빈 배열을 만들고 전체 바디를 선택해 주는 변수를 선언한다.
let arr = [ ]; // 빈 배열을 만들어 준다
let htmlBody = document.body // 바디를 선택해준다2. 반복문을 돌려서 노드(리스트) 배열에 한 번씩 접근해서 바디 안의 내용들을 모두 확인하다.
if (htmlBody.hasChildNodes()) { // 노드를 가지고 있는지 확인 할 수 있다.
for ( let i = 0; i < htmlBody.childNodes.length; i++ ) {
htmlBody.childNodes[ i ]
}
}3. 각 요소들의 childNodes가 각각 class를 가지고 있으면서 그 className이 찾으려는 것과 일치한다면 비 배열에 넣어준다.
4. 위의 조건들을 반복해서 실행한다.
let findClass = function (htmlBody) {
if( htmlBody.classList && htmlBody.classList.contains( className ) ) {
// 클래스 네임이 있고, 그 클래스 네임이 찾고자 하는 클래스네임일때
arr.push(htmlBody)
}
if ( htmlBody.hasChildNodes() ) {
for ( let i = 0; i < htmlBody.childNodes.length; i++ ) {
findClass( htmlBody.childNodes[ i ] )
}
}
}
5. 마지막으로 findClass 함수를 실행시키고 배열을 리턴한다.
findClass( htmlBody )
return arr