DOM 변경 노드

XML DOM 노드 값 변경

nodeValue 속성은 노드 값을 변경하는 데 사용됩니다.

setAttribute() 메소드는 속성 값을 변경하는 데 사용됩니다.

시도해 보기 - 예

아래 예에서는 books.xml XML 파일을 사용합니다.
외부 JavaScript에 있는 loadXMLDoc() 함수는 XML 파일을 로드하는 데 사용됩니다.

요소의 텍스트 노드 변경
이 예에서는 nodeValue 속성을 사용하여 "books.xml"에 있는 첫 번째 <title> 요소의 텍스트 노드를 변경합니다.

setAttribute를 사용하여 속성 값 변경
이 예에서는 setAttribute() 메서드를 사용하여 첫 번째 <book>의 "category" 속성 값을 변경합니다.

nodeValue를 사용하여 속성 값 변경
이 예에서는 nodeValue 속성을 사용하여 첫 번째 <book>의 "category" 속성 값을 변경합니다.

요소 값 변경

DOM에서 각 구성 요소는 노드입니다. 요소 노드에는 텍스트 값이 없습니다.

요소 노드의 텍스트는 하위 노드에 저장됩니다. 이 노드를 텍스트 노드라고 합니다.

요소의 텍스트를 변경하는 방법은 이 하위 노드(텍스트 노드)의 값을 변경하는 것입니다.

텍스트 노드 값 변경

nodeValue 속성을 사용하여 텍스트 노드 값을 변경할 수 있습니다.

다음 코드 조각은 첫 번째 <title> 요소의 텍스트 노드 값을 변경합니다.

예

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";

document.write(x.nodeValue);
</script>
</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

예제 설명:

loadXMLDoc( ) "books .xml" 로드 xmlDoc 로드
첫 번째 <title> 요소의 텍스트 노드 가져오기
노드 값 입력 텍스트 노드의 "Easy Cooking"으로 변경

모든 <title> 요소의 텍스트 노드를 반복하고 변경해 보세요

속성 값 변경

DOM에서는 속성도 노드입니다. 요소 노드와 달리 속성 노드에는 텍스트 값이 있습니다. I

속성 값을 변경하는 방법은 텍스트 값을 변경하는 것입니다.

이는 setAttribute() 메소드 또는 속성 노드의 nodeValue 속성을 사용하여 수행할 수 있습니다.

setAttribute()를 사용하여 속성을 변경합니다.

setAttribute() 메서드는 기존 속성의 값을 변경하거나 새 속성을 생성합니다.

다음 코드는 <book> 요소의 카테고리 속성을 변경합니다.

Instance

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName('book');

x[0].setAttribute("category","food");

document.write(x[0].getAttribute("category"));
</script>
</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

예제 설명:

loadXMLDoc()을 사용하여 "books.xml"을 xmlDoc에 로드합니다.
첫 번째 < ; 요소
"category" 속성의 값을 "food"로 변경

모든 <title> 새 속성: 사용해 보세요

참고: 속성이 존재하지 않으면 지정된 이름과 값을 사용하여 새 속성을 만듭니다.

nodeValue를 사용하여 속성 변경

nodeValue 속성을 사용하여 속성 노드의 값을 변경할 수 있습니다:

인스턴스

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0]
y=x.getAttributeNode("category");
y.nodeValue="food";

document.write(y.nodeValue);
</script>
</body>
</html>

인스턴스 실행»