Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속받는다. Node 객체의 위상을 그림으로 나타내면 아래와 같다.
주요 기능
Node 객체의 주요한 임무는 아래와 같다.
관계
엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다.
- Node.childNodes
- Node.firstChild
- Node.lastChild
- Node.nextSibling
- Node.previousSibling
- Node.contains()
- Node.hasChildNodes()
노드의 종류
Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성요소가 어떤 카테고리에 속하는 것인지를 알려주는 식별자를 제공한다.
- Node.nodeType
- Node.nodeName
<body id = "start">
<ul>
<li><a href="./533">html</a></li>
<li><a href="./534">css</a></li>
<li><a href="./544">Javascript</a>
<ul>
<li><a href="./535">Javascript</a></li>
<li><a href="./536">DOM</a></li>
<li><a href="./537">BOM</a></li>
</ul>
</li>
</ul>
<script>
function traverse (target,callback){
if(target.nodeType === Node.ELEMENT_NODE){ //elementNode가 1이다.
if(target.nodeName === 'A'){
callback(target)
}
let c = target.childNodes
for(let i = 0 ; i<c.length; i++){
traverse(c[i],callback)
}
}
}
traverse(document.getElementById('start'),function(elem){
console.log(elem)
})
</script>
</body>
값
Node 객체의 값을 제공하는 API
- Node.nodeValue
- Node.textContent
자식 관리
Node 객체의 자식을 추가하는 방법에 대한 API
- Node.appendChild()
- Node.removeChild()
<body>
<ul id="target">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="callAppendChild()" value = "appendChild()"/>
<input type="button" onclick="callInsertBefore()" value = "insertBefore()"/>
<input type="button" onclick="callRemoveChild()" value = "removeChild()"/>
<input type="button" onclick="callReplaceChild()" value = "replaceChild()"/>
<script>
function callAppendChild(){
let target = document.getElementById('target')
let li = document.createElement('li')
let text = document.createTextNode('Javascript')
li.appendChild(text)
target.appendChild(li)
}
function callInsertBefore(){
let target = document.getElementById('target')
let li = document.createElement('li')
let text = document.createTextNode('jQuery')
li.appendChild(text)
target.insertBefore(li,target.firstChild) // li = 공백문자임 , target.Before 공백 문자 뒤에 추가.
}
function callRemoveChild(){
let target = document.getElementById('target')
target.parentNode.removeChild(target)
}
function callReplaceChild(){
let a = document.createElement('a')
a.setAttribute('href','https://www.nasver.com')
a.appendChild(document.createTextNode('web browser Javascript'))
let target = document.getElementById('target')
target.replaceChild(a,target.firstChild)
}
</script>
</body>
'개발' 카테고리의 다른 글
| [Javascript] Ajax (0) | 2020.12.31 |
|---|---|
| [Javascript] 이벤트 - 2 (0) | 2020.12.31 |
| [Javascript] 이벤트 (0) | 2020.12.30 |
| [Javascript] 문서의 기하학적 특성 (0) | 2020.12.23 |
| [Javascript] Element (0) | 2020.12.21 |