JavaScript

JavaScript : 문서의 탐색 = DOM 탐색

우아개발자 2023. 11. 28.

우리가 HTM를 이용해서 문서를 수정하는 것은 비교적 간단한 방법이지만, HTML의 양이 지나치게 많아질 경우 문서를 수정하고, 작성했던 코드를 작성하기엔 시간적인 여유가 없을 때가 많죠. 그럴때마다 많이 사용하는 것이 문서의 태그를 찾아서 탐색된 요소를 JS로 바꾸는 작업을 하는데요. 이 부분에 대한 내용을 다뤄볼까합니다.

서론 : HTML 코드

작성된 HTML 의 코드에 대한 내용을 정리해보자면, span 태그는 child1로 작성이 되어있고, p태그들은 child2 child3으로 작성이 되어있습니다. 그리고 버튼을 생성해서 "부모탐색" "자식탐색"으로 나누어 부모요소에 접근할 수 있고, 자식요소에 접근할 수 있도록 만들어놓았죠. 그 외에도 div태그 test1, test2 test3 test4 까지 만들어놓았습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서탐색</title>
    <script defer src ="./js/domSearch.js"></script>
</head>
<body>

    <div>
        <p>
            <span> child1 </span>
        </p>
        
        <p>
            child2
        </p>
      
        <p>
            child3
        </p>
    </div>
    <input type="button" value="부모탐색" onclick="searchParent()">
    <input type="button" value="자식탐색" onclick="searchChild()">
    
<div onclick="testSearch()"> 적용 </div>
    
<div>
    <p>test1</p>
    <p>test2</p>
</div>


<div>
    <p>test3</p>
    <p>test4</p>

</div>
</body>
</html>

본론

부모를 먼저 탐색해보자

1. SearchChild() 함수의 코드

(1). 문서 중에 p태그 첫번째 배열을 찾아보도록 합니다. 변수를 설정해주고 아래와 같이 작성해주면 되겠죠. 만일 자신이 찾으려는 함수가 정상적인 실행이 되는지 확인해보고 싶다면, console.og(child)도 함께 작성해주도록합니다.

   let child = document.getElementsByTagName('p')[0];
    console.log(child);

(2) parentNode

\그리고 다음 과정을 넘어가기전에 parentNode에 대한 내용도 함께 알고 있어야하는데요. parentNode의 경우에는 탐색된 (element)의 부모 요소를 탐색하는 역할을 가지고 있습니다.그래서 아까 만들어놨던. 변수에서 부모의 함수를 한번 가져오도록 해보겠습니다. p의 부모요소라고한다면, div가 될 수 있겠죠? 아마 F12로 확인하신 분들은 알 수 있을겁니다.

let parentDiv = child.parentNode;
console.log(ParentDiv)

(3) 위에서 탐색한 부모요소부분을 우리가 식별하기 쉽도록,컬러를 주도록하겠습니다.

  parentDiv.style.backgroundColor = 'hotpink';

(4) NodeName을 통해서 탐색된 요소의 태그 이름을 얻어오겠습니다.

    console.log(parentDiv.nodeName);

(5) 코드정리

function searchParent(){

    let child = document.getElementsByTagName('p')[0];
    console.log(child);
    
    let parentDiv = child.parentNode;
    console.log(parentDiv);
    
    parentDiv.style.backgroundColor = 'hotpink';
    console.log(parentDiv.nodeName);
}

자식을 탐색해보자

2. serarChild() 함수의 코드

div 단락을 이용해서 자식 요소에 접근하는 내용을 만들어볼텐데요. 이전과 마찬가지로 처음에는 변수를 만드는 것으로부터 시작이 됩니다.

    let parent = document.getElementsByTagName('div')[0];
    console.log(parent);

그리고 부모요소를 이용해서 자식을 찾을 수 있는데요. 만일 자식요소가 여러 개일 경우에는 배열의 형태로 출력을 도와줍니다.

    let childs = parent.children;
    console.log(childs);

마지막으로 자식요소부분의 배경색을 바꿔주도록합니다.

    childs[0].style.backgroundColor = 'skyblue';
    childs[1].style.backgroundColor = 'pink';
    childs[2].style.backgroundColor = 'darkgreen';

3. testSearch()

부모를 탐색하는 방법을 알았다면, 우리가 html에 작성했던 갑작스러운 test1 test2 test3 test4 을 포함하는 div태그를 찾아서 배경을 바꿔보도록하겠습니다. 여기서 주의해야할 것은 이들은 p태그로 작성되어있는데요. p태그의 배열순서를 명확하게 짚어줘야한다는 점입니다.그리고 순서를 자식요소라고해서 첫 번째로 지정하기보다는 전체 태그의 위치를 확인한 다음에 잡아줘야한다는 것입니다. 그러기 위해서 아래의 추가 부분을 확인해보시죠.

let test1 = document.getElementsByTagName('p')[3];
console.log(test1);

4. 추가 1 : 부모의 값이 궁금할 경우에 parentNode를 이용해서 찾아보기

let div = test1.parentNode;
console.log(div);

div.style.backgroundColor = 'pink';

5. 참고 2 : 마지막 div 태그에 포함된 test4 폰트 크기 20px로 변경하고, test4 div 단락의 몇 번째에 있는지 확인해보기.

let test4 = document.getElementsByTagName('div')[3];
console.log(test4);

let childs = test4.childNodes;
console.log(childs);

childs[3].style.fontSize ='50px';

저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

JQuery #02 CSS 적용의 기본 개념_선택된 요소들의 설정 (0)	2023.11.29
제이쿼리(J-Query) 다운로드 (0)	2023.11.29
JavaScript : 아이디 중복확인 (indexOF의 등장) (0)	2023.11.27
javascript 자식 창에서 부모 창에 데이터 가져오기 (0)	2023.11.27
javaScript DOM 객체와 이벤트 처리(1) (0)	2023.11.23