Jade_o.o
[javascript] JavaScript DOM - 다른 노드 접근하기 본문
JavaScript 다른 노드에 접근하는 방법에 대해 알아보자
밑에 보이는 코드는 전체 html, css 코드이다. 참고 요함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 다른 노드 접근하기</title>
</head>
<body>
<div class = "container">
<div class="box" id="green">1</div>
previous 테스트
<!-- 주석 previous 테스트 -->
<div class="box" id="red">2</div>
next 테스트
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="getParent()">getParent</button>
<button onclick="pElSibling()">pElSibling</button>
<button onclick="pNoSibling()">pNoSibling</button>
<button onclick="pElSibling()">nElSibling</button>
<button onclick="nNoSibling()">nNoSibling</button>
<script>
</script>
</body>
</html>
parengNode : 부모 요소를 가져온다.
let container = document.getElementById('container');
let greenBox = document.getElementById('green');
let redBox = document.getElementById('red');
// parentNode : 부모 요소를 가져온다.
function getParent(){
console.log(greenBox.parentNode);
}
// html 코드
<div class = "container">
<div class="box" id="green">1</div>
previous 테스트
<!-- 주석 previous 테스트 -->
<div class="box" id="red">2</div>
next 테스트
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="getParent()">getParent</button>
<button onclick="pElSibling()">pElSibling</button>
<button onclick="pNoSibling()">pNoSibling</button>
<button onclick="pElSibling()">nElSibling</button>
<button onclick="nNoSibling()">nNoSibling</button>html 코드와 함께 보면 getParent button을 누를 시
console.log에 부모요소를 가져온 것을 확인할 수 있다.
previousElementSibling : 이전 형제를 선택(Element만 카운트하여 반환함)
let container = document.getElementById('container');
let greenBox = document.getElementById('green');
let redBox = document.getElementById('red');
// 이전 형제를 선택
function pElSibling(){
console.log(redBox.previousElementSibling);
}
// html 코드
<div class = "container">
<div class="box" id="green">1</div>
previous 테스트
<!-- 주석 previous 테스트 -->
<div class="box" id="red">2</div>
next 테스트
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="getParent()">getParent</button>
<button onclick="pElSibling()">pElSibling</button>
<button onclick="pNoSibling()">pNoSibling</button>
<button onclick="pElSibling()">nElSibling</button>
<button onclick="nNoSibling()">nNoSibling</button>html 코드와 함께 보면 pElsibling button을 누를 시
console.log에 이전 형제( Element만 카운트하여 반환 )를 선택하여 보여주는 것을 확인 할 수 있다.
previousSibling : 이전 형제를 선택 (Element는 물론 #text와 주석까지 node로 카운트하여 반환함)
let container = document.getElementById('container');
let greenBox = document.getElementById('green');
let redBox = document.getElementById('red');
// 이전 형제를 선택2
function pNoSibling(){
console.log(redBox.previousSibling);
}
// html 코드
<div class = "container">
<div class="box" id="green">1</div>
previous 테스트
<!-- 주석 previous 테스트 -->
<div class="box" id="red">2</div>
next 테스트
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="getParent()">getParent</button>
<button onclick="pElSibling()">pElSibling</button>
<button onclick="pNoSibling()">pNoSibling</button>
<button onclick="pElSibling()">nElSibling</button>
<button onclick="nNoSibling()">nNoSibling</button>html 코드와 함께 보면 pNosibling button을 누를 시
console.log에 이전 형제(Element는 물론 #text와 주석까지 node로 카운트하여 반환) 를 선택하여 보여주는 것을 확인 할 수 있다.
nextElementSibling : 다음 형제를 선택 - 공백, 텍스트를 포함하지 않은 Element(요소)만 가져온다.(공백, text등은 x)
let container = document.getElementById('container');
let greenBox = document.getElementById('green');
let redBox = document.getElementById('red');
// 다음 형제를 선택1
function nElSibling(){
console.log(redBox.nextElementSibling);
}
// html 코드
<div class = "container">
<div class="box" id="green">1</div>
previous 테스트
<!-- 주석 previous 테스트 -->
<div class="box" id="red">2</div>
next 테스트
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="getParent()">getParent</button>
<button onclick="pElSibling()">pElSibling</button>
<button onclick="pNoSibling()">pNoSibling</button>
<button onclick="pElSibling()">nElSibling</button>
<button onclick="nNoSibling()">nNoSibling</button>html 코드와 함께 보면 nElsibling button을 누를 시
console.log에 Element만 보여주는 것을 확인 할 수 있다.
nextSibling : 다음 형제를 선택 - 공백이든, 텍스트든 가리지 않고 가져온다.
let container = document.getElementById('container');
let greenBox = document.getElementById('green');
let redBox = document.getElementById('red');
// 이전 형제를 선택2
function pNoSibling(){
console.log(redBox.previousSibling);
}
// html 코드
<div class = "container">
<div class="box" id="green">1</div>
previous 테스트
<!-- 주석 previous 테스트 -->
<div class="box" id="red">2</div>
next 테스트
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="getParent()">getParent</button>
<button onclick="pElSibling()">pElSibling</button>
<button onclick="pNoSibling()">pNoSibling</button>
<button onclick="pElSibling()">nElSibling</button>
<button onclick="nNoSibling()">nNoSibling</button>html 코드와 함께 보면 nNosibling button을 누를 시
console.log를 확인해보면 공백, 텍스트를 확인할 수 있다.
'JavaScript' 카테고리의 다른 글
| [javascript] JavaScript DOM 실습1 - 요소 선택 및 다루기1 (0) | 2024.01.18 |
|---|---|
| [javascript] JavaScript DOM - 요소 추가, 삭제 (0) | 2024.01.17 |
| [javascript] JavaScript DOM - 클래스 관련 메소드, 속성 변경 메소드 (0) | 2024.01.17 |
| [javascript] JavaScript DOM - 요소 다루기, 요소 선택, 요소 추가 (0) | 2024.01.17 |
| [javascript] JavaScript 공부 정리14 - 이벤트 addEventListener (0) | 2024.01.16 |
'JavaScript' Related Articles
more
