스터디/자바스크립트
자바스크립트로 부모,자식 요소 접근하기
고무곰(GomuGom)
2017. 8. 8. 00:52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="active">JavaScript</li>
</ul>
<script type="text/javascript">
// 복수개의 li가 선택됨
var liObjs = document.getElementByTagName('li');
for(var i=0; i<liObjs.length; i++){
console.log(liObjs[i].innerHTML());
}
// 부모 요소로 접근하기
// jquery에서는 parent()
var ulObj = liObjs[1].parentNode;
// 부모요소에서 2번째 자식 요소 제거하기
ulObj.removeChild(liObjs[1]);
// 자식 요소 중 첫번째 요소 콘솔 찍기
console.log(ulObj.childNodes[0]);
</script>
</body>
</html>