Ajax入门到精通（二）

￡神魔★判官ぃ 2022-08-05 07:39 189阅读 0赞

**操纵 DOM**

**1.****节点的属性**

*  `nodeName` 报告节点的名称（详见下述）。
 *  `nodeValue` 提供节点的 “值”（详见后述）。
 *  `parentNode` 返回节点的父节点。记住，每个元素、属性和文本都有一个父节点。
 *  `childNodes` 是节点的孩子节点列表。对于 HTML，该列表仅对元素有意义，文本节点和属性节点都没有孩子。
 *  `firstChild` 仅仅是 `childNodes` 列表中第一个节点的快捷方式。
 *  `lastChild` 是另一种快捷方式，表示 `childNodes` 列表中的最后一个节点。
 *  `previousSibling` 返回当前节点*之前* 的节点。换句话说，它返回当前节点的父节点的 `childNodes` 列表中位于该节点前面的那个节点。
 *  `nextSibling` 类似于 `previousSibling` 属性，返回父节点的 `childNodes` 列表中的下一个节点。
 *  `attributes` 仅用于元素节点，返回元素的属性列表。
 *  **2.使用DOM 中的节点属性**
    
    // These first two lines get the DOM tree for the current Web page, // and then the <html> element for that DOM tree var myDocument = document; var htmlElement = myDocument.documentElement; // What's the name of the <html> element? "html" alert("The root element of the page is " + htmlElement.nodeName); // Look for the <head> element var headElement = htmlElement.getElementsByTagName("head")\[0\]; if (headElement != null) \{ alert("We found the head element, named " + headElement.nodeName); // Print out the title of the page var titleElement = headElement.getElementsByTagName("title")\[0\]; if (titleElement != null) \{ // The text will be the first child node of the <title> element var titleText = titleElement.firstChild; // We can get the text of the text node with nodeValue alert("The page title is '" + titleText.nodeValue + "'"); \} // After <head> is <body> var bodyElement = headElement.nextSibling; while (bodyElement.nodeName.toLowerCase() != "body") \{ bodyElement = bodyElement.nextSibling; \} // We found the <body> element... // We'll do more when we know some methods on the nodes. \}
    
    **3.****节点方法**
 *  `insertBefore(newChild, referenceNode)` 将 `newChild` 节点插入到 `referenceNode` 之前。记住，应该对 `newChild` 的目标父节点调用该方法。
 *  `replaceChild(newChild, oldChild)` 用 `newChild` 节点替换 `oldChild` 节点。
 *  `removeChild(oldChild)` 从运行该方法的节点中删除 `oldChild` 节点。
 *  `appendChild(newChild)` 将 `newChild` 添加到运行该函数的节点之中。`newChild` 被添加到目标节点孩子列表中的*末端*。
 *  `hasChildNodes()` 在调用该方法的节点有孩子时则返回 true，否则返回 false。
 *  `hasAttributes()` 在调用该方法的节点有属性时则返回 true，否则返回 false。
 *  **4.使用 DOM 中的节点方法**
    
    // These first two lines get the DOM tree for the current Web page, // and then the <html> element for that DOM tree var myDocument = document; var htmlElement = myDocument.documentElement; // What's the name of the <html> element? "html" alert("The root element of the page is " + htmlElement.nodeName); // Look for the <head> element var headElement = htmlElement.getElementsByTagName("head")\[0\]; if (headElement != null) \{ alert("We found the head element, named " + headElement.nodeName); // Print out the title of the page var titleElement = headElement.getElementsByTagName("title")\[0\]; if (titleElement != null) \{ // The text will be the first child node of the <title> element var titleText = titleElement.firstChild; // We can get the text of the text node with nodeValue alert("The page title is '" + titleText.nodeValue + "'"); \} // After <head> is <body> var bodyElement = headElement.nextSibling; while (bodyElement.nodeName.toLowerCase() != "body") \{ bodyElement = bodyElement.nextSibling; \} // We found the <body> element... // Remove all the top-level <img> elements in the body if (bodyElement.hasChildNodes()) \{ for (i=0; i<bodyElement.childNodes.length; i++) \{ var currentNode = bodyElement.childNodes\[i\]; if (currentNode.nodeName.toLowerCase() == "img") \{ bodyElement.removeChild(currentNode); \} \} \} \}
    
    **5.****文档节点**
    
    使用 `document` 对象创建新节点
 *  `createElement(elementName)` 使用给定的名称创建一个元素。
 *  `createTextNode(text)` 使用提供的文本创建一个新的文本节点。
 *  `createAttribute(attributeName)` 用提供的名称创建一个新属性。
 *  **6.****元素节点**
    
    与属性处理有关的方法：
 *  `getAttribute(name)` 返回名为 `name` 的属性值。
 *  `removeAttribute(name)` 删除名为 `name` 的属性。
 *  `setAttribute(name, value)` 创建一个名为 `name` 的属性并将其值设为 `value`。
 *  `getAttributeNode(name)` 返回名为 `name` 的属性节点。
 *  `removeAttributeNode(node)` 删除与指定节点匹配的属性节点。
 *  与查找嵌套元素有关的方法：
 *  `getElementsByTagName(elementName) 返回具有指定名称的元素节点列表。`
    
    **7.****属性节点**
 *  `getAttribute(name)` 返回名为 `name` 的属性值。
 *  `removeAttribute(name)` 删除名为 `name` 的属性。
 *  `setAttribute(name, value)` 创建一个名为 `name` 的属性并将其值设为 `value`。
 *  **8.****文本节点**
    
    这些方法用于增加或分解节点中的数据：
 *  `appendData(text)` 将提供的文本追加到文本节点的已有内容之后。
 *  `insertData(position, text)` 允许在文本节点的中间插入数据。在指定的位置插入提供的文本。
 *  `replaceData(position, length, text)` 从指定位置开始删除指定长度的字符，用提供的文本代替删除的文本。
 *  **9.节点类型**
    
    DOM 节点类型定义了一些常量：
 *  `Node.ELEMENT_NODE 是表示元素节点类型的常量。`
 *  `Node.ATTRIBUTE_NODE 是表示属性节点类型的常量。`
 *  `Node.TEXT_NODE 是表示文本节点类型的常量。`
 *  `Node.DOCUMENT_NODE 是表示文档节点类型的常量。`
 *  `可使用 nodeType 属性比较节点和上述常量 —— 该属性定义在 DOM node 类型上因此可用于所有节点。`
    
    任何时候在 JavaScript 中使用 `Node` 常量，Internet Explorer 都会报错，应避免使用 `Node。`