Javascript mendapatkan nilai dari string xml

Question

Mengubahnya menjadi objek XMLDocument sangat berguna, karena memungkinkan kita membaca dan memanipulasi XML dengan mudah

Table of Contents Show

Membaca XML dengan JavaScript
Bagaimana cara mendapatkan nilai dari string XML dalam JavaScript?
Bagaimana cara mendapatkan nilai atribut XML dalam JavaScript?
Bagaimana cara mengakses data XML dalam JavaScript?
Bagaimana cara mengambil data dari XML?

Membaca XML dengan JavaScript

Lihatlah kode JavaScript berikut

//A simple XML string.
var xmlString = '<reminder><date>2020-08-01T09:00:00</date><heading>Meeting</heading><body>Meeting with Mark at 10AM!</body></reminder>';

//Create a new DOMParser object.
var domParser = new DOMParser();

//Parse the XML string into an XMLDocument object using
//the DOMParser.parseFromString() method.
var xmlDocument = domParser.parseFromString(xmlString, "text/xml");

//Log it to the console
console.log(xmlDocument);

Dalam kode di atas

Kami membuat string XML dasar. XML dalam hal ini merupakan pengingat tentang pertemuan
Kami membuat instance DOMParser baru
Menggunakan DOMParser. parseFromString() , kami mem-parsing string XML kami menjadi objek XMLDocument. Kami melakukan ini dengan menyetel parameter kedua ke teks/xml
Terakhir, kami mencatat hasilnya ke konsol browser

Jika Anda menjalankan JavaScript di atas, Anda akan melihat yang berikut di konsol Anda

Sempurna

Sekarang, mari kita baca nilai salah satu elemen XML kita

//Read one of our XML elements.
var date = xmlDocument.getElementsByTagName("date")[0].childNodes[0].nodeValue;
alert('Date for this reminder is: ' + date);

_

Jika Anda menjalankan kode di atas, browser Anda akan menampilkan pesan peringatan. “Tanggal untuk pengingat ini adalah. 2020-08-01T09. 00. 00”

Terkadang, Anda mungkin perlu mengurai konten XML dan mengonversinya menjadi pohon DOM, atau, sebaliknya, membuat serial pohon DOM yang ada menjadi XML. Pada artikel ini, kita akan melihat objek yang disediakan oleh platform web untuk mempermudah tugas umum serialisasi dan parsing XML

XMLSerializer

Membuat serial pohon DOM, mengonversinya menjadi string yang berisi XML

DOMParser

Membuat pohon DOM dengan mem-parsing string yang berisi XML, mengembalikan XMLDocument atau Document yang sesuai berdasarkan data input

XMLHttpRequest

Memuat konten dari URL;

XPath

Teknologi untuk membuat string yang berisi alamat untuk bagian tertentu dari dokumen XML, dan menemukan node XML berdasarkan alamat tersebut

Menggunakan salah satu pendekatan berikut untuk membuat dokumen XML (yang merupakan turunan dari Document)

Contoh ini mengonversi fragmen XML dalam string menjadi pohon DOM menggunakan DOMParser

const xmlStr = '<q id="a"><span id="b">hey!</span></q>';
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "application/xml");
// print the name of the root element or error message
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
  console.log("error while parsing");
} else {
  console.log(doc.documentElement.nodeName);
}

Menggunakan XMLHttpRequest

Berikut adalah contoh kode yang membaca dan mem-parsing file XML yang dapat dialamatkan URL ke dalam pohon DOM

const xhr = new XMLHttpRequest();

xhr.onload = () => {
  dump(xhr.responseXML.documentElement.nodeName);
}

xhr.onerror = () => {
  dump("Error while getting XML.");
}

xhr.open("GET", "example.xml");
xhr.responseType = "document";
xhr.send();

Nilai dalam bidang

const xhr = new XMLHttpRequest();

xhr.onload = () => {
  dump(xhr.responseXML.documentElement.nodeName);
}

xhr.onerror = () => {
  dump("Error while getting XML.");
}

xhr.open("GET", "example.xml");
xhr.responseType = "document";
xhr.send();

3 objek

const xhr = new XMLHttpRequest();

xhr.onload = () => {
  dump(xhr.responseXML.documentElement.nodeName);
}

xhr.onerror = () => {
  dump("Error while getting XML.");
}

xhr.open("GET", "example.xml");
xhr.responseType = "document";
xhr.send();

4 adalah Document yang dibuat dengan mem-parsing XML

Jika dokumennya adalah HTML, kode yang ditampilkan di atas akan menghasilkan Document. Jika dokumennya adalah XML, objek yang dihasilkan sebenarnya adalah XMLDocument. Kedua jenis ini pada dasarnya sama;

Catatan. Sebenarnya ada antarmuka

const xhr = new XMLHttpRequest();

xhr.onload = () => {
  dump(xhr.responseXML.documentElement.nodeName);
}

xhr.onerror = () => {
  dump("Error while getting XML.");
}

xhr.open("GET", "example.xml");
xhr.responseType = "document";
xhr.send();

_8 juga, tetapi belum tentu tipe independen. Di beberapa browser, ini adalah alias untuk antarmuka Document

Diberi Document, Anda dapat membuat serial pohon DOM dokumen kembali ke XML menggunakan metode

const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);

1

Gunakan pendekatan berikut untuk membuat cerita bersambung konten dokumen XML yang Anda buat di bagian sebelumnya

Pertama, buat pohon DOM seperti yang dijelaskan di Cara Membuat pohon DOM. Alternatifnya, gunakan pohon DOM yang diperoleh dari XMLHttpRequest

Untuk membuat serial pohon DOM

const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);

_3 ke dalam teks XML, panggil

const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);

1

const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);

Jika DOM yang Anda miliki adalah dokumen HTML, Anda dapat membuat cerita bersambung menggunakan

const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);

5, tetapi ada opsi yang lebih sederhana. cukup gunakan properti

const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);

_6 (jika Anda hanya menginginkan keturunan dari node yang ditentukan) atau properti

const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);

7 jika Anda menginginkan node dan semua keturunannya

const docInnerHtml = document.documentElement.innerHTML;

Akibatnya,

const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);

_8 adalah string yang berisi HTML dari konten dokumen;

Bagaimana cara mendapatkan nilai dari string XML dalam JavaScript?

Untuk mengambil nilai teks dari suatu elemen, Anda harus mengambil nilai simpul teks elemen. .

Metode getElementsByTagName. .

Properti ChildNodes. .

Properti nodeValue. .

Dapatkan Nilai Atribut - getAttribute().

Dapatkan Nilai Atribut - getAttributeNode()

Bagaimana cara mendapatkan nilai atribut XML dalam JavaScript?

Metode JavaScript. XML. .

Sintaksis. XML. getAttributeValue( Atribut );

Argumen. Argumen berikut ini valid untuk metode ini. Argumen. .

Kembalikan nilai. Sebuah string atau nol. .

Contoh. Contoh ini mencari nilai atribut dari setiap elemen yang diberikan dalam dokumen XML

Bagaimana cara mengakses data XML dalam JavaScript?

Dengan DOM, Anda dapat mengakses setiap simpul dalam dokumen XML. .

Dengan menggunakan metode getElementsByTagName()

Dengan mengulang (melintasi) pohon node

Dengan menavigasi pohon simpul, menggunakan hubungan simpul

Bagaimana cara mengambil data dari XML?

Halaman menggunakan objek XMLHttpRequest (JavaScript) untuk mengambil file XML (contoh. xml) kemudian menguraikannya dalam JavaScript dan membuat bagan . Fungsi yang mem-parsing respons XML dan kemudian menggunakan data untuk membuat bagan ditampilkan di bawah dan disebut myXMLProcessor (ini adalah fungsi callback XMLHttpRequest).

kode javascript