DOM XML - Tạo nút

Trong chương này, chúng ta sẽ thảo luận về cách tạo các nút mới bằng cách sử dụng một số phương thức của đối tượng document. Các phương thức này cung cấp một phạm vi để tạo nút phần tử mới , nút văn bản, nút chú thích, nút phần CDATA và nút thuộc tính . Nếu nút mới tạo đã tồn tại trong đối tượng phần tử, nó sẽ được thay thế bằng nút mới. Các phần tiếp theo chứng minh điều này bằng các ví dụ.

Tạo nút phần tử mới

Phương thức createElement () tạo một nút phần tử mới. Nếu nút phần tử mới được tạo tồn tại trong đối tượng phần tử, nó sẽ được thay thế bằng nút mới.

Cú pháp

Cú pháp để sử dụng phương thức createElement () như sau:

var_name = xmldoc.createElement("tagname");

Ở đâu,

  • var_name - là tên biến do người dùng xác định, giữ tên của phần tử mới.

  • ("tagname") - là tên của nút phần tử mới sẽ được tạo.

Thí dụ

Ví dụ sau (createnewelement_example.htm) phân tích cú pháp một tài liệu XML ( node.xml ) thành một đối tượng XML DOM và tạo một nút phần tử mới PhoneNo trong tài liệu XML.

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         new_element = xmlDoc.createElement("PhoneNo");

         x = xmlDoc.getElementsByTagName("FirstName")[0];
         x.appendChild(new_element);

         document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
      </script>
   </body>
</html>

  • new_element = xmlDoc.createElement ("PhoneNo"); tạo nút phần tử mới <PhoneNo>

  • x.appendChild (new_element); x giữ tên của nút con được chỉ định <FirstName> mà nút phần tử mới được nối vào.

Chấp hành

Lưu tệp này dưới dạng createnewelement_example.htm trên đường dẫn máy chủ (tệp này và node.xml phải nằm trên cùng một đường dẫn trong máy chủ của bạn). Trong đầu ra, chúng tôi nhận được giá trị thuộc tính là PhoneNo .

Tạo nút văn bản mới

Phương thức createTextNode () tạo một nút văn bản mới.

Cú pháp

Cú pháp để sử dụng createTextNode () như sau:

var_name = xmldoc.createTextNode("tagname");

Ở đâu,

  • var_name - nó là tên biến do người dùng định nghĩa, giữ tên của nút văn bản mới.

  • ("tagname") - trong ngoặc đơn là tên của nút văn bản mới sẽ được tạo.

Thí dụ

Ví dụ sau (createetextnode_example.htm) phân tích cú pháp một tài liệu XML ( node.xml ) thành một đối tượng XML DOM và tạo một nút văn bản mới Im nút văn bản mới trong tài liệu XML.

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         create_e = xmlDoc.createElement("PhoneNo");
         create_t = xmlDoc.createTextNode("Im new text node");
         create_e.appendChild(create_t);

         x = xmlDoc.getElementsByTagName("Employee")[0];
         x.appendChild(create_e);


         document.write(" PhoneNO: ");
         document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue);
      </script>
    </body>
</html>

Chi tiết về mã trên như dưới đây -

  • create_e = xmlDoc.createElement ("PhoneNo"); tạo một phần tử mới < PhoneNo >.

  • create_t = xmlDoc.createTextNode ("Tôi là nút văn bản mới"); tạo một nút văn bản mới "Im new text node" .

  • x.appendChild (create_e); nút văn bản, "Tôi nút văn bản mới" được thêm vào phần tử, < PhoneNo >.

  • document.write (x.getElementsByTagName ("PhoneNo") [0] .childNodes [0] .nodeValue); ghi giá trị nút văn bản mới vào phần tử <PhoneNo>.

Chấp hành

Lưu tệp này dưới dạng createetextnode_example.htm trên đường dẫn máy chủ (tệp này và node.xml phải nằm trên cùng một đường dẫn trong máy chủ của bạn). Trong đầu ra, chúng tôi nhận được giá trị thuộc tính như là nút văn bản mới PhoneNO: Im .

Tạo nút Nhận xét mới

Phương thức createComment () tạo một nút nhận xét mới. Nút chú thích được bao gồm trong chương trình để dễ hiểu về chức năng mã.

Cú pháp

Cú pháp để sử dụng createComment () như sau:

var_name = xmldoc.createComment("tagname");

Ở đâu,

  • var_name - là tên biến do người dùng định nghĩa, giữ tên của nút nhận xét mới.

  • ("tagname") - là tên của nút chú thích mới sẽ được tạo.

Thí dụ

Ví dụ sau (createecommentnode_example.htm) phân tích cú pháp một tài liệu XML ( node.xml ) thành một đối tượng XML DOM và tạo một nút nhận xét mới, "Công ty là nút mẹ" trong tài liệu XML.

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            }
            else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         create_comment = xmlDoc.createComment("Company is the parent node");

         x = xmlDoc.getElementsByTagName("Company")[0];

         x.appendChild(create_comment);

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

Trong ví dụ trên -

  • create_comment = xmlDoc.createComment ("Công ty là nút mẹ") creates a specified comment line.

  • x.appendChild (create_comment) Trong dòng này, 'x' chứa tên của phần tử <Company> mà dòng chú thích được nối vào.

Chấp hành

Lưu tệp này dưới dạng createecommentnode_example.htm trên đường dẫn máy chủ (tệp này và node.xml phải nằm trên cùng một đường dẫn trong máy chủ của bạn). Trong đầu ra, chúng tôi nhận được giá trị thuộc tính vì Công ty là nút cha .

Tạo nút phần CDATA mới

Phương thức createCDATASection () tạo một nút phần CDATA mới. Nếu nút phần CDATA mới được tạo tồn tại trong đối tượng phần tử, nó sẽ được thay thế bằng nút mới.

Cú pháp

Cú pháp để sử dụng createCDATASection () như sau:

var_name = xmldoc.createCDATASection("tagname");

Ở đâu,

  • var_name - là tên biến do người dùng định nghĩa, giữ tên của nút phần CDATA mới.

  • ("tagname") - là tên của nút phần CDATA mới sẽ được tạo.

Thí dụ

Ví dụ sau (createecdatanode_example.htm) phân tích cú pháp một tài liệu XML ( node.xml ) thành một đối tượng XML DOM và tạo một nút phần CDATA mới, "Tạo Ví dụ CDATA" trong tài liệu XML.

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            }
            else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         create_CDATA = xmlDoc.createCDATASection("Create CDATA Example");

         x = xmlDoc.getElementsByTagName("Employee")[0];
         x.appendChild(create_CDATA);
         document.write(x.lastChild.nodeValue);
      </script>
   </body>
</html>

Trong ví dụ trên -

  • create_CDATA = xmlDoc.createCDATASection ("Tạo Ví dụ CDATA") tạo một nút phần CDATA mới, "Tạo Ví dụ CDATA"

  • x.appendChild (create_CDATA) ở đây, x giữ phần tử được chỉ định < E Jobee > được lập chỉ mục ở 0 mà giá trị nút CDATA được nối vào.

Chấp hành

Lưu tệp này dưới dạng createecdatanode_example.htm trên đường dẫn máy chủ (tệp này và node.xml phải nằm trên cùng một đường dẫn trong máy chủ của bạn). Trong đầu ra, chúng tôi nhận được giá trị thuộc tính là Tạo CDATA Ví dụ .

Tạo nút thuộc tính mới

Để tạo một nút thuộc tính mới, phương thức setAttributeNode () được sử dụng. Nếu nút thuộc tính mới tạo tồn tại trong đối tượng phần tử, nó sẽ được thay thế bằng nút mới.

Cú pháp

Cú pháp để sử dụng phương thức createElement () như sau:

var_name = xmldoc.createAttribute("tagname");

Ở đâu,

  • var_name - là tên biến do người dùng xác định, giữ tên của nút thuộc tính mới.

  • ("tagname") - là tên của nút thuộc tính mới sẽ được tạo.

Thí dụ

Ví dụ sau (createattributenode_example.htm) phân tích cú pháp một tài liệu XML ( node.xml ) thành một đối tượng XML DOM và tạo một phần nút thuộc tính mới trong tài liệu XML.

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         create_a = xmlDoc.createAttribute("section");
         create_a.nodeValue = "A";

         x = xmlDoc.getElementsByTagName("Employee");
         x[0].setAttributeNode(create_a);
         document.write("New Attribute: ");
         document.write(x[0].getAttribute("section"));

      </script>
   </body>
</html>

Trong ví dụ trên -

  • create_a = xmlDoc.createAttribute ("Thể loại") tạo một thuộc tính với tên <section>.

  • create_a.nodeValue = "Management" tạo giá trị "A" cho thuộc tính <section>.

  • x [0] .setAttributeNode (create_a) giá trị thuộc tính này được đặt thành phần tử nút <Nhân viên phục vụ> được lập chỉ mục ở 0.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved