DOM_节点类型

四种通用的节点类型:

• 文档节点表示整个 HTML 文档。  就是document  其方法有:

1. createElement(elementName) 使用给定的名称创建一个元素。
2. createTextNode(text) 使用提供的文本创建一个新的文本节点。
3. createAttribute(attributeName) 用提供的名称创建一个新属性。

example:

var pElement = myDocument.createElement("p");
var text = myDocument.createTextNode("Here's some text in a p element.");
pElement.appendChild(text);
bodyElement.appendChild(pElement);

• 元素节点表示 HTML 元素，如 a 或 img。

1. getAttribute(name) 返回名为 name 的属性值。
2. removeAttribute(name) 删除名为 name 的属性。
3. setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value。
4. getAttributeNode(name) 返回名为 name 的属性节点。
5. removeAttributeNode(node) 删除与指定节点匹配的属性节点。
6. getElementsByTagName(elementName) 返回具有指定名称的元素节点列表

example:1

var imgElement = document.createElement("img");
imgElement.setAttribute("src", "http://www.headfirstlabs.com/Images/hraj_cover-150.jpg");
imgElement.setAttribute("width", "130");
imgElement.setAttribute("height", "150");
bodyElement.appendChild(imgElement);

example:2

// Remove all the top-level <img> elements in the body
      var imgElements = bodyElement.getElementsByTagName("img");
      for (i=0; i<imgElements.length; i++) {
        var imgElement = imgElements.item[i];
        bodyElement.removeChild(imgElement);
      }

• 属性节点表示 HTML 元素的属性，如 href（a 元素）或 src（img 元素）。

example:

// Remove all the top-level <img> elements in the body
      var imgElements = bodyElement.getElementsByTagName("img");
      for (i=0; i<imgElements.length; i++) {
        var imgElement = imgElements.item[i];
        // Print out some information about this element
        var msg = "Found an img element!";
        var atts = imgElement.attributes;
        for (j=0; j<atts.length; j++) {
          var att = atts.item(j);
          msg = msg + "/n  " + att.nodeName + ": '" + att.nodeValue + "'";
        }
        alert(msg);
        bodyElement.removeChild(imgElement);
      }
 

• 文本节点表示 HTML 文档中的文本，如 “Click on the link below for a complete set list”。这是出现在 p、a 或 h2 这些元素中的文字。

1. appendData(text) 将提供的文本追加到文本节点的已有内容之后。
2. insertData(position, text) 允许在文本节点的中间插入数据。在指定的位置插入提供的文本。
3. replaceData(position, length, text) 从指定位置开始删除指定长度的字符，用提供的文本代替删除的文本。

 Example:

var pElements = bodyElement.getElementsByTagName("p");
for (i=0; i<pElements.length; i++) {
  var pElement = pElements.item(i);
  var text = pElement.firstChild.nodeValue;
  alert(text);
}

如何得到节点类型:(IE上这几个常量不可用)

1. Node.ELEMENT_NODE 是表示元素节点类型的常量。 
   

2. Node.ATTRIBUTE_NODE 是表示属性节点类型的常量。
3. Node.TEXT_NODE 是表示文本节点类型的常量。
4. Node.DOCUMENT_NODE 是表示文档节点类型的常量

Example;

var someNode = document.documentElement.firstChild;
if (someNode.nodeType == Node.ELEMENT_NODE) {
  alert("We've found an element node named " + someNode.nodeName);
} else if (someNode.nodeType == Node.TEXT_NODE) {
  alert("It's a text node; the text is " + someNode.nodeValue);
} else if (someNode.nodeType == Node.ATTRIBUTE_NODE) {
  alert("It's an attribute named " + someNode.nodeName 
                        + " with a value of '" + someNode.nodeValue + "'");
}