YouTipDom Processinginstruction
## XML DOM - ProcessingInstruction Object
The `ProcessingInstruction` object represents a processing instruction (PI) within an XML document.
Processing instructions are used to pass processor-specific instructions or information to the application or parser analyzing the XML document. A common example of a processing instruction is linking an XSLT stylesheet to an XML file:
```xml
```
In the DOM tree, the `ProcessingInstruction` node represents this markup.
---
## Properties of the ProcessingInstruction Object
The `ProcessingInstruction` interface inherits properties from the parent `Node` interface and defines the following specific properties:
| Property | Type | Description |
| :--- | :--- | :--- |
| `target` | `String` | **Read-only.** Returns the target of the processing instruction (the identifier immediately following the ``). |
---
## Syntax and Usage
### 1. Accessing a Processing Instruction
You can access a `ProcessingInstruction` node by traversing the child nodes of the `Document` object or by using XPath.
```javascript
// Example: Accessing the first child of the document if it is a Processing Instruction
let piNode = document.firstChild;
if (piNode.nodeType === Node.PROCESSING_INSTRUCTION_NODE) {
console.log("Target: " + piNode.target); // e.g., "xml-stylesheet"
console.log("Data: " + piNode.data); // e.g., "type="text/css" href="style.css""
}
```
### 2. Creating a Processing Instruction
You can programmatically create a new processing instruction using the `document.createProcessingInstruction()` method.
```javascript
// Syntax: document.createProcessingInstruction(target, data)
let newPI = document.createProcessingInstruction('xml-stylesheet', 'href="mystyle.css" type="text/css"');
// Insert it before the root element of the document
document.insertBefore(newPI, document.documentElement);
```
---
## Code Examples
### Example 1: Reading Processing Instruction Properties
Suppose we have the following XML document loaded:
```xml
XML Guide
```
We can extract the target and data using JavaScript:
```javascript
// Assume 'xmlDoc' is the parsed XML DOM Document
let children = xmlDoc.childNodes;
for (let i = 0; i < children.length; i++) {
if (children.nodeType === 7) { // Node.PROCESSING_INSTRUCTION_NODE is 7
let pi = children;
console.log("Found Processing Instruction:");
console.log(" - Target: " + pi.target); // Output: xml-stylesheet
console.log(" - Data: " + pi.data); // Output: type="text/xsl" href="helper.xsl"
}
}
```
### Example 2: Modifying the Data of a Processing Instruction
You can dynamically update the stylesheet or configuration of an XML document by modifying the `data` property:
```javascript
// Find the processing instruction node
let pi = xmlDoc.childNodes; // Adjust index based on document structure
if (pi && pi.nodeType === Node.PROCESSING_INSTRUCTION_NODE) {
// Change the stylesheet reference
pi.data = 'type="text/xsl" href="new-styles.xsl"';
console.log("Updated PI Data: " + pi.data);
}
```
---
## Important Considerations
* **HTML vs. XML:** Processing instructions are valid in XML and XHTML documents. In standard HTML5 documents, processing instructions are parsed as comments (e.g., ``), and they will not be represented as `ProcessingInstruction` nodes in the DOM.
* **Inheritance:** The `ProcessingInstruction` interface inherits from the `CharacterData` and `Node` interfaces. Therefore, it shares common node properties like `nodeName` (which returns the same value as `target`) and `nodeValue` (which returns the same value as `data`).
* **Read-Only Target:** While you can read and write the `data` property, the `target` property is strictly **read-only**. If you need a different target, you must create a new processing instruction node and replace the old one.