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 (0) | 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 (0) | 2024.02.13 |