ล่าสุดการพัฒนาเว็บบทเรียน
×

XML เกี่ยวกับการสอน

XML บ้าน XML บทนำ XML วิธีใช้ XML ต้นไม้ XML วากยสัมพันธ์ XML องค์ประกอบ XML แอตทริบิวต์ XML namespaces XML แสดง XML XSLT XML XPath XML XLink XML ตรวจสอบ XML DTD XML schema XML เซิร์ฟเวอร์ XML การประยุกต์ใช้งาน XML ตัวอย่าง XML ทดสอบ XML ใบรับรอง

XML DOM

DOM แนะนำ DOM โหนด DOM XMLHttpRequest DOM การเข้าถึง DOM ข้อมูลโหนด DOM รายการโหนด DOM ภายใน DOM การนำทาง DOM ได้รับค่า DOM Change โหนด DOM Remove โหนด DOM Replace โหนด DOM Create โหนด DOM Add โหนด DOM Clone โหนด DOM ตัวอย่าง

DOM การอ้างอิง

DOM ประเภทโหนด DOM ปม DOM NodeList DOM NamedNodeMap DOM เอกสาร DOM ธาตุ DOM คุณลักษณะ DOM ข้อความ DOM CDATA DOM คิดเห็น DOM XMLHttpRequest DOM parser

XML DTD

DTD แนะนำ DTD การก่อสร้างตึก DTD องค์ประกอบ DTD แอตทริบิวต์ DTD องค์ประกอบ VS attr DTD หน่วยงาน DTD ตัวอย่าง

XSD Schema

XSD แนะนำ XSD ทำอย่างไร XSD <schema> XSD องค์ประกอบ XSD แอตทริบิวต์ XSD ข้อ จำกัด

XSD ซับซ้อน

XSD องค์ประกอบ XSD ว่างเปล่า XSD เพียงองค์ประกอบ XSD ข้อความเท่านั้น XSD ผสม XSD ตัวชี้วัด XSD <any> XSD <anyAttribute> XSD การแทน XSD ตัวอย่าง

XSD Data

XSD เชือก XSD วันที่ XSD เป็นตัวเลข XSD อื่น ๆ XSD การอ้างอิง

Web บริการ

XML บริการ XML WSDL XML SOAP XML RDF XML RSS

 

XML DOM กวดวิชา


พระกำหนดมาตรฐานสำหรับการเข้าถึงและจัดการเอกสาร

พระ XML นำเสนอเอกสาร XML เป็นต้นไม้โครงสร้าง

ใช้ HTML DOM นำเสนอเอกสาร HTML เป็นต้นไม้โครงสร้าง

การทำความเข้าใจ DOM เป็นสิ่งจำเป็นสำหรับทุกคนที่ทำงานกับ HTML หรือ XML

XML DOM ตัวอย่างต้นไม้

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 เป็นวัตถุโหนด