javaScript节点操作

### JavaScript 节点操作详解 #### 一、基本概念 在进行JavaScript节点操作之前，我们首先需要了解一些基本的概念： - **Node**: DOM（文档对象模型）中的基本单位，可以是元素节点、属性节点、文本节点等。 - **Element**: HTML或XML文档中的组成部分，由标签名、属性及文本组成。 - **Document**: 整个HTML或XML文档被视为一个顶级节点。 #### 二、节点属性与方法 接下来，我们将详细介绍与节点操作相关的属性和方法。 ##### 1. Attributes（属性集合） - **定义**：`attributes`属性返回节点的属性列表。 - **示例代码**： ```javascript var element = document.getElementById('example'); var attributes = element.attributes; ``` ##### 2. childNodes（子节点集合） - **定义**：`childNodes`属性返回当前节点的所有子节点列表。 - **示例代码**： ```javascript var element = document.getElementById('example'); var children = element.childNodes; ``` ##### 3. dataType（数据类型） - **定义**：此属性不适用于标准DOM API。可能是特定实现的扩展。 - **注意**：在标准DOM中没有此属性，请参考具体实现文档。 ##### 4. DefinitionDTD（DTD定义） - **定义**：`definition`属性返回节点的DTD定义。 - **示例代码**： ```javascript var element = document.getElementById('example'); var definition = element.definition; // 假设存在该属性 ``` ##### 5. Doctype（文档类型声明） - **定义**：`doctype`属性返回文档的文档类型声明。 - **示例代码**： ```javascript var doctype = document.doctype; ``` ##### 6. documentElement（文档元素） - **定义**：`documentElement`属性返回文档的根元素。 - **示例代码**： ```javascript var rootElement = document.documentElement; ``` ##### 7. firstChild（首个子节点） - **定义**：`firstChild`属性返回当前节点的第一个子节点。 - **示例代码**： ```javascript var element = document.getElementById('example'); var firstChild = element.firstChild; ``` ##### 8. Implementation（实现对象） - **定义**：`implementation`属性返回实现当前DOM的实现对象。 - **示例代码**： ```javascript var implementation = document.implementation; ``` ##### 9. lastChild（最后一个子节点） - **定义**：`lastChild`属性返回当前节点的最后一个子节点。 - **示例代码**： ```javascript var element = document.getElementById('example'); var lastChild = element.lastChild; ``` ##### 10. nextSibling（下一个同级节点） - **定义**：`nextSibling`属性返回当前节点的下一个同级节点。 - **示例代码**： ```javascript var element = document.getElementById('example'); var nextSibling = element.nextSibling; ``` ##### 11. nodeName（节点名称） - **定义**：`nodeName`属性返回节点的名称。 - **示例代码**： ```javascript var element = document.getElementById('example'); var name = element.nodeName; ``` ##### 12. nodeType（节点类型） - **定义**：`nodeType`属性返回节点的类型。 - **示例代码**： ```javascript var element = document.getElementById('example'); var type = element.nodeType; ``` ##### 13. nodeTypedValue（节点值） - **定义**：此属性不适用于标准DOM API。可能是特定实现的扩展。 - **注意**：在标准DOM中没有此属性，请参考具体实现文档。 ##### 14. nodeValue（节点值） - **定义**：`nodeValue`属性返回或设置节点的值。 - **示例代码**： ```javascript var textNode = document.createTextNode('Hello World!'); var value = textNode.nodeValue; ``` ##### 15. ownerDocument（拥有文档） - **定义**：`ownerDocument`属性返回节点所属的文档。 - **示例代码**： ```javascript var element = document.getElementById('example'); var ownerDoc = element.ownerDocument; ``` ##### 16. parentNode（父节点） - **定义**：`parentNode`属性返回当前节点的父节点。 - **示例代码**： ```javascript var element = document.getElementById('example'); var parent = element.parentNode; ``` ##### 17. Parsed（解析状态） - **定义**：`parsed`属性表示节点是否已被解析。 - **示例代码**： ```javascript var element = document.getElementById('example'); var parsed = element.parsed; // 假设存在该属性 ``` ##### 18. Prefix（前缀） - **定义**：`prefix`属性返回节点的命名空间前缀。 - **示例代码**： ```javascript var element = document.getElementById('example'); var prefix = element.prefix; ``` ##### 19. preserveWhiteSpace（保留空白字符） - **定义**：`preserveWhiteSpace`属性表示是否保留空白字符。 - **示例代码**： ```javascript var element = document.getElementById('example'); var preserve = element.preserveWhiteSpace; ``` ##### 20. previousSibling（上一个同级节点） - **定义**：`previousSibling`属性返回当前节点的上一个同级节点。 - **示例代码**： ```javascript var element = document.getElementById('example'); var prevSibling = element.previousSibling; ``` ##### 21. Text（文本节点） - **定义**：`Text`表示文本节点类型。 - **示例代码**： ```javascript var textNode = document.createTextNode('Hello World!'); ``` ##### 22. url（文档URL） - **定义**：`url`属性返回文档的URL。 - **示例代码**： ```javascript var docUrl = document.url; // 假设存在该属性 ``` ##### 23. Xml（XML表示） - **定义**：`xml`属性返回节点的XML表示。 - **示例代码**： ```javascript var element = document.getElementById('example'); var xmlRep = element.xml; // 假设存在该属性 ``` #### 三、节点操作方法 接下来，我们来看看用于操作节点的方法。 ##### 1. appendChild（追加子节点） - **定义**：`appendChild`方法将新节点追加到当前节点的子节点列表末尾。 - **示例代码**： ```javascript var newElement = document.createElement('div'); var parent = document.getElementById('example'); parent.appendChild(newElement); ``` ##### 2. cloneNode（克隆节点） - **定义**：`cloneNode`方法克隆一个节点及其所有子节点。 - **示例代码**： ```javascript var element = document.getElementById('example'); var clone = element.cloneNode(true); // true 表示克隆所有子节点 ``` ##### 3. createAttribute（创建属性） - **定义**：`createAttribute`方法创建一个属性节点。 - **示例代码**： ```javascript var attr = document.createAttribute('class'); attr.value = 'example'; ``` ##### 4. createCDATASection（创建CDATA节） - **定义**：`createCDATASection`方法创建一个CDATA节节点。 - **示例代码**： ```javascript var cdata = document.createCDATASection('This is CDATA'); ``` ##### 5. createComment（创建注释） - **定义**：`createComment`方法创建一个注释节点。 - **示例代码**： ```javascript var comment = document.createComment('This is a comment'); ``` ##### 6. createDocumentFragment（创建文档片段） - **定义**：`createDocumentFragment`方法创建一个文档片段节点。 - **示例代码**： ```javascript var fragment = document.createDocumentFragment(); ``` ##### 7. createElement（创建元素） - **定义**：`createElement`方法创建一个元素节点。 - **示例代码**： ```javascript var element = document.createElement('div'); ``` ##### 8. createEntityReference（创建实体引用） - **定义**：`createEntityReference`方法创建一个实体引用节点。 - **示例代码**： ```javascript var entityRef = document.createEntityReference('&'); ``` ##### 9. createNode（创建节点） - **定义**：此方法不适用于标准DOM API。可能是特定实现的扩展。 - **注意**：在标准DOM中没有此方法，请参考具体实现文档。 ##### 10. createProcessingInstruction（创建处理指令） - **定义**：`createProcessingInstruction`方法创建一个处理指令节点。 - **示例代码**： ```javascript var pi = document.createProcessingInstruction('target', 'data'); ``` ##### 11. createTextNode（创建文本节点） - **定义**：`createTextNode`方法创建一个文本节点。 - **示例代码**： ```javascript var text = document.createTextNode('Hello World!'); ``` ##### 12. getElementsByTagName（获取带有指定标签名的元素集合） - **定义**：`getElementsByTagName`方法返回带有指定标签名的所有元素的集合。 - **示例代码**： ```javascript var elements = document.getElementsByTagName('div'); ``` ##### 13. hasChildNodes（是否有子节点） - **定义**：`hasChildNodes`方法判断当前节点是否有子节点。 - **示例代码**： ```javascript var element = document.getElementById('example'); if (element.hasChildNodes()) { console.log('Has child nodes.'); } ``` ##### 14. insertBefore（插入节点） - **定义**：`insertBefore`方法在指定节点之前插入新节点。 - **示例代码**： ```javascript var newElement = document.createElement('div'); var referenceNode = document.getElementById('ref'); var parent = referenceNode.parentNode; parent.insertBefore(newElement, referenceNode); ``` ##### 15. Load（加载文档） - **定义**：此方法不适用于标准DOM API。可能是特定实现的扩展。 - **注意**：在标准DOM中没有此方法，请参考具体实现文档。 ##### 16. loadXML（加载XML文档） - **定义**：此方法不适用于标准DOM API。可能是特定实现的扩展。 - **注意**：在标准DOM中没有此方法，请参考具体实现文档。 ##### 17. removeChild（移除子节点） - **定义**：`removeChild`方法从当前节点中移除指定的子节点。 - **示例代码**： ```javascript var element = document.getElementById('example'); var child = document.getElementById('child'); element.removeChild(child); ``` ##### 18. replaceChild（替换子节点） - **定义**：`replaceChild`方法用新的节点替换当前节点的指定子节点。 - **示例代码**： ```javascript var newElement = document.createElement('div'); var oldElement = document.getElementById('old'); var parent = oldElement.parentNode; parent.replaceChild(newElement, oldElement); ``` ##### 19. SaveXML（保存为XML） - **定义**：此方法不适用于标准DOM API。可能是特定实现的扩展。 - **注意**：在标准DOM中没有此方法，请参考具体实现文档。 ##### 20. selectNodes（选择节点集合） - **定义**：`selectNodes`方法根据XPath表达式选择一组节点。 - **示例代码**： ```javascript var nodes = document.selectNodes('/html/body/div'); // 假设存在该方法 ``` ##### 21. selectSingleNode（选择单个节点） - **定义**：`selectSingleNode`方法根据XPath表达式选择单个节点。 - **示例代码**： ```javascript var node = document.selectSingleNode('/html/body/div[1]'); // 假设存在该方法 ``` ##### 22. transformNode（转换节点） - **定义**：`transformNode`方法使用XSLT转换节点。 - **示例代码**： ```javascript var result = document.transformNode(xslDocument); // xslDocument 是 XSLT 文档 ``` ##### 23. transformNodeToObject（转换节点为对象） - **定义**：`transformNodeToObject`方法使用XSLT将节点转换为对象。 - **示例代码**： ```javascript var obj = document.transformNodeToObject(xslDocument); // xslDocument 是 XSLT 文档 ``` 通过以上介绍，我们可以看到JavaScript提供了丰富的API来操作DOM节点。掌握这些API不仅有助于提高网页开发的效率，还能帮助开发者更好地控制页面布局和动态内容。在实际应用中，根据不同的需求灵活运用这些方法和属性，能够使页面更加生动、交互性更强。