พระกำหนดมาตรฐานสำหรับการเข้าถึงและจัดการเอกสาร
พระ XML นำเสนอเอกสาร XML เป็นต้นไม้โครงสร้าง
ใช้ HTML DOM นำเสนอเอกสาร HTML เป็นต้นไม้โครงสร้าง
การทำความเข้าใจ DOM เป็นสิ่งจำเป็นสำหรับทุกคนที่ทำงานกับ HTML หรือ XML
XML DOM ตัวอย่างต้นไม้
DOM ทั้งหมดคืออะไร?
พระกำหนดมาตรฐานสำหรับการเข้าถึงเอกสารเช่น XML และ HTML:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
พระจะถูกแยกออกเป็น 3 ส่วนที่แตกต่างกัน / ระดับ
- Core DOM - รูปแบบมาตรฐานสำหรับเอกสารที่มีโครงสร้างใด ๆ
- XML DOM - รูปแบบมาตรฐานของเอกสาร XML
- HTML DOM - รูปแบบมาตรฐานของเอกสาร HTML
พระกำหนด objects and properties ขององค์ประกอบเอกสารทั้งหมดและ methods (interface) ที่จะเข้าถึงได้
ใช้ HTML DOM
ใช้ HTML DOM กำหนดวิธีมาตรฐานในการเข้าถึงและจัดการเอกสาร HTML
องค์ประกอบ HTML ทั้งหมดที่สามารถเข้าถึงได้ผ่าน DOM HTML
ใช้ HTML DOM กำหนด objects, properties and methods ขององค์ประกอบ HTML ทั้งหมด
เปลี่ยนค่าขององค์ประกอบของ HTML
ตัวอย่างนี้เปลี่ยนค่าขององค์ประกอบ HTML มี id = "สาธิต" ไปนี้:
ตัวอย่าง
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
ลองตัวเอง» ตัวอย่างนี้เปลี่ยนค่าของแรก <h1> องค์ประกอบในเอกสาร HTML:
ตัวอย่าง
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
ลองตัวเอง» หมายเหตุ: แม้ว่า containes เอกสาร HTML เพียงหนึ่ง <h1> องค์ประกอบที่คุณยังคงมีการระบุดัชนีอาร์เรย์ [0], เพราะ getElementsByTagName() วิธีการเสมอกลับอาร์เรย์
คุณสามารถเรียนรู้มากขึ้นเกี่ยวกับ DOM HTML ของเราใน การกวดวิชา JavaScript
พระ XML
พระ XML กำหนดวิธีมาตรฐานในการเข้าถึงและจัดการเอกสาร XML
องค์ประกอบ XML ทั้งหมดสามารถเข้าถึงได้ผ่าน DOM ของ XML
พระ XML กำหนด objects, properties and methods ขององค์ประกอบ XML ทั้งหมด
พระ XML เป็น:
- รูปแบบวัตถุมาตรฐาน XML
- อินเตอร์เฟซการเขียนโปรแกรมมาตรฐาน XML
- แพลตฟอร์มและภาษาอิสระ
- มาตรฐาน W3C
ในคำอื่น ๆ : The XML DOM is a standard for how to get, change, add, or delete XML elements.
ได้รับค่าขององค์ประกอบ XML
รหัสนี้ดึงค่าข้อความแรก <title> องค์ประกอบในเอกสาร XML:
ตัวอย่าง
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
โหลดไฟล์ XML
ไฟล์ XML ที่ใช้ในตัวอย่างด้านล่างเป็น Books.xml
ตัวอย่างนี้อ่าน "books.xml" เข้า XMLDOC และเรียกค่าข้อความแรก <title> องค์ประกอบใน Books.xml:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
ลองตัวเอง» ตัวอย่างอธิบาย
- xmlDoc - วัตถุ DOM XML ที่สร้างขึ้นโดยตัวแยกวิเคราะห์ที่
- getElementsByTagName("title")[0] - ได้รับครั้งแรก <title> องค์ประกอบ
- childNodes[0] - ลูกคนแรกของ <title> องค์ประกอบ (โหนดข้อความ)
- nodeValue - ค่าของโหนด (the text itself)
โหลด String XML
ตัวอย่างนี้โหลดสตริงข้อความลงในวัตถุ DOM XML, และสารสกัดจากข้อมูลจากมันด้วย JavaScript นี้:
ตัวอย่าง
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue ;
</script>
</body>
</html>
ลองตัวเอง» อินเตอร์เฟซการเขียนโปรแกรม
รุ่น DOM XML เป็นชุดของวัตถุโหนด โหนดสามารถเข้าถึงได้ด้วย JavaScript หรือภาษาโปรแกรมอื่น ๆ ในการกวดวิชานี้เราใช้ JavaScript
อินเตอร์เฟซการเขียนโปรแกรมให้กับ DOM จะถูกกำหนดโดยคุณสมบัติที่กำหนดมาตรฐานและวิธีการ
Properties มักจะเรียกว่าเป็นสิ่งที่เป็น (เช่น nodename คือ "หนังสือ")
Methods มักจะเรียกว่าเป็นสิ่งที่จะทำ (เช่นลบ "หนังสือ")
คุณสมบัติของ XML DOM
เหล่านี้คือบางคุณสมบัติ DOM ทั่วไป:
- x.nodeName - ชื่อของ x
- x.nodeValue - ค่าของ x
- x.parentNode - โหนดแม่ของ X
- x.childNodes - โหนดลูกของ X
- x.attributes - โหนดคุณลักษณะของ X
หมายเหตุ: ในรายการข้างต้น x เป็นวัตถุโหนด
วิธี DOM XML
- x.getElementsByTagName( name ) - ได้รับองค์ประกอบทั้งหมดที่มีชื่อแท็กระบุ
- x.appendChild( node ) - แทรกโหนดเด็ก X
- x.removeChild( node ) - ลบโหนดเด็กจาก X
หมายเหตุ: ในรายการข้างต้น x เป็นวัตถุโหนด