728x90
728x90
Text Node의 Value 바꾸기
nodeValue의 property는 textnode의 value를 바꾸는 데 사용된다
nodeValue : Node interface의 nodeValue property는 현재 노드(current node)의 값(value)을 반환(return)하거나 설정한다 >>참고
document 자기자신을 가리키면 nodeValue는 null을 반환한다
text, comment, CDATA nodes는 node의 내용을 반환한다
attribute 노드는 attribute 값을 반환한다
예시
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x;
var txt = "";
x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt += x.nodeValue + "<br>";
x.nodeValue = "Easy Cooking";
// 바꾸는 부분
x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt += x.nodeValue + "<br>";
document.getElementById("demo").innerHTML = txt;
}
// https://www.w3schools.com/xml/tryit.asp?filename=try_dom_change_nodevalue
</script>
</body>
</html>
<!-- books.xml -->
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price> </book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price> </book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price> </book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price> </book>
</bookstore>
Attribute의 Value 바꾸기
DOM에서 attribute 들은 여러 개의 노드이다. 요소 (element) 노드와 달리 attribute 노드에는 텍스트 값이 있다.
속성 값을 변경하는 방법은 텍스트 값을 변경하는 것이다. setAttribute () 메소드를 사용해서 변경하거나, attribute 노드의 nodeValue 프로퍼티를 설정하여 변경한다.
1) setAttribute() 이용
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName('book');
x[0].setAttribute("category","food"); //원래 값은 cooking
document.getElementById("demo").innerHTML =
x[0].getAttribute("category");
}
// https://www.w3schools.com/xml/tryit.asp?filename=try_dom_setattribute1
</script>
</body>
</html>
2) nodeValue() 이용
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0]
var y = x.getAttributeNode("category");
var txt = y.nodeValue + "<br>";
y.nodeValue ="food";
txt += y.nodeValue;
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
728x90
728x90
'Javascript' 카테고리의 다른 글
| [JS] onchange, onkeydown, onkeyup 정리 (0) | 2020.03.03 |
|---|---|
| [공유] 게시판 댓글 테스트 (0) | 2020.02.18 |
| [JS] 자바스크립트 HTML 태그 요소 동적 추가 및 삭제 (0) | 2020.02.11 |
| hierarchyrequesterror 계층 구조 요청 오류 (0) | 2020.02.11 |
| [공유] 자바스크립트 array 메소드 총정리 (0) | 2020.02.10 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
