javascript_기본 지식의 노드 콘텐츠 향상에 대해-JS 튜토리얼-php.cn

1. 요소 노드

코드 복사 코드는 다음과 같습니다.

//테스트 요소 노드, 출력 노드 이름, 노드 유형, 노드 값
 var liElements=document.getElementsByTagName("li");
 for(var i=0;i 경보(liElements[i].nodeName);
 경보(liElements[i].nodeType);
 경보(liElements[i].nodeValue);
 }

2. 속성 노드

코드 복사 코드는 다음과 같습니다.

[/c//테스트 속성 노드, 출력 속성 노드 이름, 노드 유형, 노드 값
var liElements=document.getElementsByTagName("li");
for(var i=0;i< liElements .length;i ){
var attrElement=liElements[i].getAttributeNode("value")
Alert("attrElement.nodeName " attrElement.nodeName);
Alert("attrElement.nodeType " attrElement . nodeType);
경고("attrElement.nodeValue " liElements[i].getAttribute("value"));
}ode]

3. 텍스트 노드
[code]
//테스트 요소 노드, 출력 노드 이름, 노드 유형, 노드 값
var liElements=document.getElementsByTagName(" li" );
for(var i=0;i 경보(liElements[i].childNodes[0].nodeName);
경보(liElements[i] .childNodes [0].nodeType);
경고(liElements[i].childNodes[0].nodeValue);

liElements[i].childNodes[0].nodeValue="Nanjing";
Alert(liElements[i].childNodes[0].nodeValue);

//메서드를 읽는 또 다른 방법
경보(liElements[i].firstChild.nodeName);
경보(liElements[i].firstChild.nodeType);
경보(liElements[i].firstChild.nodeValue);
}

4. 노드 교체

replaceChild()
지정된 상위 요소의 하위 노드를 다른 하위 노드로 바꿉니다.
var reference = element.replaceChild(newChild,oldChild);
반환 값은 참조에 대한 포인터입니다. 교체되는 자식 노드의 포인터입니다.
삽입된 하위 노드에 하위 노드도 있는 경우 해당 하위 노드도 대상 노드에 삽입됩니다

코드 복사 코드는 다음과 같습니다.

//방법 1
// var cityElement= document.getElementById("city");
// var loveElement=document.getElementById("love");
// var cityChildElement=document.getElementById("beijing");
/ / var loveChildElement =document.getElementById("fankong");
// var oldElement=cityElement.replaceChild(loveChildElement,cityChildElement);
// loveElement.appendChild(oldElement);
// Alert(oldElement .getAttribute("id"));

var cityElement=document.getElementById("city");

var cityElement.onclick=function(){
var cityChildElement=document.getElementById("beijing");
var loveChildElement=document. getElement ById ("fankong");
var oldElement=cityElement.replaceChild(loveChildElement,cityChildElement);
loveElement.appendChild(oldElement);
Alert(oldElement.getAttribute("id"));
}

5. 속성 노드 찾기

getAttribute()
주어진 요소에 대해 주어진 속성 노드의 값을 반환합니다.
var attributeValue = element.getAttribute(attributeName);
주어진 속성의 이름은 다음 형식으로 전달되어야 합니다. 문자열 메소드를 제공하십시오.
주어진 속성의 값은 문자열 형식으로 반환됩니다. 해당 속성이 존재하지 않으면 getAttribute()는 빈 문자열을 반환합니다.

getAttributeNode 속성을 통해 속성 노드를 가져옵니다. (속성 이름) --Node

Beijing

//속성 이름을 통해 속성 값 가져오기
var bjElement= document.getElementById("bj");
var attributeValue=eduElement.getAttribute("name");
Alert("attributeValue " attributeValue);

//다음을 통해 속성의 노드를 가져옵니다. 속성 이름
var bjNode=eduElement.getAttributeNode("name");
경고(eduNode.nodeValue);
경고(eduNode.nodeType);
경고(eduNode.nodeName);

6. 속성 노드 설정

setAttribute()
특정 요소 노드에 새 속성 값을 추가하거나 기존 속성 값을 변경합니다.
element.setAttribute(attributeName,attributeValue);
속성의 이름과 값은 문자열 형식으로 이 메소드에 전달되어야 합니다.
이 속성이 이미 존재하는 경우 해당 값이 새로 고쳐집니다. 🎜>존재하지 않는 경우 setAttribute() 메서드가 먼저 이를 생성한 다음 값을 할당합니다.

베이징

//요소의 참조 가져오기

var bjElement=document.getElementById("bj");

//속성 값 설정
bjElement.setAttribute("name","beijing") ;
//설정된 속성 값 가져오기
var nameValue=bjElement.getAttribute("name");
Alert("nameValue " nameValue);

7. 새 요소 노드 생성

createElement()

주어진 태그 이름에 따라 새 요소 노드를 생성합니다. 이 메소드에는 하나의 매개변수만 있습니다. 즉, 생성될 요소의 이름은 문자열입니다.

var reference = document.createElement(element);
메소드의 반환 값: 다음을 가리키는 참조 포인터입니다. 새로 생성된 노드. 반환 값은 요소 노드이므로 해당 nodeType 속성 값은 1과 같습니다.
새 요소 노드는 문서에 자동으로 추가되지 않습니다. 새 노드에는 nodeParent 속성이 없습니다. 이는 단지 JavaScript 컨텍스트에 존재하는 객체일 뿐입니다.
var pElement = document.createElement("p");

//새 요소 생성

var pElement=document.createElement("li");

//속성 값 설정
pElement.setAttribute("id","pid");

//상위 요소 가져오기
var loveElement=document.getElementById("love");
//상위 요소에 하위 요소 추가
loveElement.appendChild(pElement);

//id로 새로 생성된 요소 가져오기

var pidElement=document.getElementById("pid");

Alert(pidElement.getAttribute("id"));

8. 새 텍스트 노드 생성

createTextNode()

주어진 텍스트를 포함하는 새 텍스트 노드를 생성합니다. 이 메서드의 반환 값은 새 텍스트 노드에 대한 참조 포인터입니다.

var textNode = document.createTextNode(text);
메서드에는 새 텍스트 노드에 포함된 텍스트 문자열이라는 하나의 매개변수만 있습니다. 새 노드. 텍스트 노드이므로 nodeType 속성은 3입니다.
새 요소 노드는 문서에 자동으로 추가되지 않으며 새 노드에는 nodeParent 속성이 없습니다

var pElementText=document.createElement( "li") ;
var textElement=document.createTextNode("난징");
pElementText.appendChild(textElement);

9. 노드 삽입(1)

appendChild() 지정된 요소에 하위 노드를 추가합니다. 요소의 마지막 하위 노드입니다.

메서드의 반환 값은 새로 추가된 하위 노드에 대한 참조 포인터입니다.

이 메서드는 일반적으로 createElement() createTextNode()와 함께 사용됩니다.
문서의 모든 요소에 새 노드를 추가할 수 있습니다

코드 복사

코드는 다음과 같습니다.

 var newliElement=document.createElement("li");
 var textNode=document.createTextNode("Beijing");
 newliElement.appendChild(textNode);
 document.body. AppendChild(newliElement);

 var liElement=document.getElementsByTagName("li");
 var textValue=liElement[0].firstChild.nodeValue;
 Alert(textValue);

10. 노드 삭제

removeChild()
지정된 요소에서 하위 노드를 제거합니다
var reference = element.removeChild(node);
반환 값은 삭제된 하위 노드에 대한 참조 포인터입니다.
removeChild() 메소드로 노드를 삭제하면 해당 노드에 포함된 모든 하위 노드가 동시에 삭제됩니다.

코드 복사 코드는 다음과 같습니다.

 Beijing
 var ulElement=document.getElementById("city");
 var liElement=document. getElementById( "베이징");
 ulElement.removeChild(liElement);

노드를 삭제하고 싶지만 어떤 상위 노드인지 모르는 경우 parentNode 속성이 도움이 될 수 있습니다.

코드 복사 코드는 다음과 같습니다.

 Beijing
 var liElement=document.getElementById("beijing");
 var parentElement=liElement. parentNode 
 parentElement.removeChild(liElement);

11. 노드 트리 탐색

ChildNodes: 지정된 요소 노드의 하위 노드로 구성된 배열을 반환합니다.
var nodeList = node.childNodes;
텍스트 노드나 속성 노드 모두 더 이상 하위 노드를 포함할 수 없으므로 ChildNodes 속성은 항상 빈 배열을 반환합니다.
요소에 하위 노드가 있는지 알고 싶다면 hasChildNodes 메소드를 사용할 수 있습니다.
특정 요소에 몇 개의 하위 노드가 있는지 알고 싶다면 childNodes 배열의 길이 속성을 사용할 수 있습니다.
childNodes 속성은 읽기 전용 속성입니다.

12. 첫 번째 하위 노드 가져오기

firstChild: 이 속성은 주어진 요소 노드의 첫 번째 하위 노드를 반환하고 이 노드 객체의 포인터를 반환합니다.
var reference = node.firstChild;
텍스트 노드나 속성 노드 모두 하위 노드를 포함할 수 없으므로 firstChild 속성은 항상 null을 반환합니다.
요소의 firstChild 속성은 이 요소의 childNodes 노드 컬렉션에 있는 첫 번째 노드와 동일합니다. 즉,
var reference = node.ChildNodes[0];
firstChild 속성은 읽기- 유일한 속성 .

13. 마지막 하위 노드 가져오기

lastChild: firstChild에 해당하는 속성입니다.
nextSibling: 주어진 노드의 다음 형제 노드를 반환합니다.
parentNode: 특정 노드의 상위 노드를 반환합니다.
요소 노드에만 하위 노드가 포함될 수 있으므로 parentNode 특성에서 반환되는 노드는 항상 요소 노드입니다.
문서 노드에 상위 노드가 없습니다.
previousSibling: 주어진 노드의 이전 형제 노드를 반환합니다

14.innerHTML 속성

거의 모든 브라우저가 이 속성을 지원하지만 DOM 표준의 일부는 아닙니다.
innerHTML 속성을 사용하면 특정 요소 내에서 HTML 콘텐츠를 읽고 쓸 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var divElement=document.getElementById("city"); 
divElement.innerHTML="베이징 ;" ; 