Ajax入门到精通(二)

操纵 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。

    你可能感兴趣的:(JavaScript,html,Ajax,tree,null,attributes)