Javascript_javascript 스킬의 다양한 노드 운용 예시 데모 코드

코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. type="text/ javascript" src="jquery-1.7.js"> bbb aaa bbb ccc AAA BBB CCC //3가지 요소 노드 속성 노드 이해하기 // 1: 요소 노드(for 요소 노드, nodeName은 항상 요소의 태그 이름을 저장하고 nodeValue의 값은 항상 null입니다. var element_node=document.getElementById('test') //alert(element_node.nodeType); / 1 //alert(element_node.nodeName); // 입력 //alert(element_node.nodeValue); // null // 2: 속성 노드 var attr_node=document.getElementById ('test' ).getAttributeNode('name'); alert(attr_node.nodeType); // 2 alert(attr_node.nodeName); // 이름 속성 이름 alert(attr_node.nodeValue) ; // nn 속성 값 // 3: 텍스트 노드 var all=document.getElementById('t').firstChild //alert(all.nodeType) // 3 //alert( all.nodeName); // #text //alert(all.nodeValue); // bbb 텍스트 콘텐츠 var tt1=document.getElementById('t1')// Alert(tt1.firstChild.innerHTML); // aaa //alert(tt1.lastChild.innerHTML); // ccc var tt2=tt1.childNodes[1].innerHTML; (tt2); // bbb var tt3=tt1.parentNode.getAttribute('name'); //alert(tt3); // parent_test var tt4=tt1.childNodes[1]; / /alert(tt4.nextSibling.innerHTML); // ccc //alert(tt4.previousSibling.innerHTML) //aaa // 노드 방식 상세 소개 var tt5= document.getElementById( 'test'); var tt6=document.getElementById('t') // hasChildNodes() 메서드: 노드에 하위 노드가 있는지 확인하고 있으면 true를 반환하고 없으면 false를 반환합니다. //alert (tt5.hasChildNodes()); // false //alert(tt6.hasChildNodes()) // true //removeChild() 메서드: 노드 제거 var first_node=document.getElementById ('t1').firstChild; //document.getElementById('t1').removeChild(first_node); // 첫 번째 노드 제거 //appendChild() 메서드: 문서에 노드를 추가합니다. 노드가 트리에 이미 있으면 삭제하고 새 위치에 삽입합니다. var first_node=document.getElementById('t1').firstChild; //document.getElementById('t1').appendChild(first_node) // aaa가 마지막 노드가 됩니다 // replacementChild( ) 메서드: 문서 트리에서 지정된 하위 노드를 삭제(및 반환)하고 다른 노드로 교체합니다. //insertBefore() 메서드: 지정된 노드 앞에 노드를 삽입하고(이미 존재하는 경우) 삭제합니다. 원래 것을 새 위치에 삽입하십시오. var newd=document.createElement("span"); newd.innerHTML="eee"; //document.getElementById('t1').appendChild(newd); Node var oldd=document.getElementById('t1').lastChild; //document.getElementById('t1').replaceChild(newd,oldd); // 마지막 하위 노드 교체 / /document.getElementById('t1').insertBefore(newd,oldd); // 지정된 위치 앞에 노드를 삽입합니다. aaabbbeeeccc // cloneNode() 메서드: 노드를 복사합니다. 이 메서드에는 하나의 매개변수가 있습니다. 동시에 모든 하위 노드를 복사한다는 의미이고 false는 현재 노드를 복사한다는 의미입니다. var what=document.getElementById('fuzhi').cloneNode(true).innerHTML; document.getElementById('m').innerHTML=what; ;/본문>

Javascript_javascript 스킬의 다양한 노드 운용 예시 데모 코드

관련 기사