아카이브

[JS] Object | 06. Element 본문

Language/JavaScript

[JS] Object | 06. Element

Rayi 2024. 2. 14. 21:45

Element는 getElement 또는 querySelector 종류의 함수로 얻어지는 요소로,

문서의 각 구성요소에 해당하는 객체입니다.

 

속성 반환값
attributes 속성들
childNodes 하위 객체들
innerHTML 하위 HTML
parentNode 상위 객체
메소드 매개변수 기능 반환값
appendChild(obj) element obj :삽입할 요소 obj를 마지막 자식 요소로 이동  
getAttribute(attr) str attr : 속성 요소의 특정 속성값 가져오기 속성값
getAttributeNode(attr) str attr : 속성 요소의 특정 속성 객체 가져오기 속성 객체
insertBefore(obj, child) element obj : 삽입할 요소
element child : 기준 자식		 obj를 child의 바로 전 위치로 이동  
removeChild(obj) element obj : 지울 요소 요소 없애기  
replaceChild(newobj, oldobj) element newobj : 새 요소
element oldobj : 옛 요소		 요소 교체  

아래 코드는 버튼의 부모 요소를 찾아 붉은색으로 강조하는 함수 findParent()와

element를 id로 하는 요소의 자식 요소 개수를 알림창으로 띄우는 함수 countChildren()에 대한 코드입니다.

<html>
    <head>
        <meta charset="UTF-8">
        <title>practice11_element</title>
        <script type="text/javascript">
            function findParent(element){
                var parent = element.parentNode;
                parent.style.border = "1px solid red"; // highlights the parent
            }

            function countChildren(element){
                var children = document.getElementById(element).childNodes;
                alert(children.length);
            }
        </script>
    </head>
    <body>
        <div style="border: 1px solid black; height: 50px;">
            <p>
                <button onclick="findParent(this);">find parent element</button>
            </p>
        </div>
        <button onclick="countChildren('container');">counting child elements</button>
        <div id='container' style="border: 1px solid black; height: 100px">
            <span>span element</span>
            <p>p element</p>
        </div>
    </body>
</html>

코드를 실행하고 각 버튼을 눌렀을 때 다음과 같이 출력됩니다.

여기서 알림창의 출력값이 2가 아닌 5가 나옵니다.

그 이유는 id='container'인 요소의 자식은 <span>과 <p> 뿐 아니라, 줄바꿈으로 인식되는 Text 객체 또한 포함되기 때문입니다.

그래서 children 함수가 가지는 요소들을 실제로 다음과 같습니다.

[Text, HTMLSpanElement, Text, HTMLParagraphElement, Text]

728x90

'Language > JavaScript' 카테고리의 다른 글

[JS] Syntax | 05. Callback  (2) 2024.07.22
[JS] Style 속성과 속성값 정리  (0) 2024.02.20
[JS] Object | 05. Document  (0) 2024.02.14
[JS] Object | 04. Cookie  (0) 2024.02.13
[JS] Object | 03. Location & History  (1) 2024.02.13
'Language/JavaScript' Related Articles more
Comments