四种通用的节点类型:
- 文档节点表示整个 HTML 文档。 就是document 其方法有:
createElement(elementName)
使用给定的名称创建一个元素。createTextNode(text)
使用提供的文本创建一个新的文本节点。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。
getAttribute(name)
返回名为name
的属性值。removeAttribute(name)
删除名为name
的属性。setAttribute(name, value)
创建一个名为name
的属性并将其值设为value
。getAttributeNode(name)
返回名为name
的属性节点。removeAttributeNode(node)
删除与指定节点匹配的属性节点。- 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 这些元素中的文字。
appendData(text)
将提供的文本追加到文本节点的已有内容之后。insertData(position, text)
允许在文本节点的中间插入数据。在指定的位置插入提供的文本。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上这几个常量不可用)
-
Node.ELEMENT_NODE
是表示元素节点类型的常量。
Node.ATTRIBUTE_NODE
是表示属性节点类型的常量。Node.TEXT_NODE
是表示文本节点类型的常量。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 + "'"); }