JavaScript与DOM操作-优快云博客

详细概念描述请见上一篇文章：

<html>

<head>

<title>JavaScript and the DOM</title>

function test() ...{

// 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

if(titleText!=null)...{

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);

}

</script>

</head>

<body>

<p>JavaScript and DOM are a perfect match.

You can read more in <i>Head Rush Ajax</i>.</p>

</body>

</html>

一旦使用 document 元素获得对 Web 页面 DOM 树的访问，就可以直接使用元素、属性和文本
1、文档节点

// 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;

createElement、createTextNode、createAttribute

var pElement = myDocument.createElement("p");

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

pElement.appendChild(text);

bodyElement.appendChild(pElement);

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);

2、元素结点
getAttribute(name) 返回名为 name 的属性值。
removeAttribute(name) 删除名为 name 的属性。
setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value。
getAttributeNode(name) 返回名为 name 的属性节点(属性节点在下一节介绍)。
removeAttributeNode(node) 删除与指定节点匹配的属性节点。
getElementsByTagName(elementName) 返回具有指定名称的元素节点列表
处理属性

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);

查找嵌套元素

// 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);

}

使用 getElementsByTagName() 完成类似的功能:

// 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);

}

3、属性结点

// 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 + " " + att.nodeName + ": '" + att.nodeValue + "'";

}

alert(msg);

bodyElement.removeChild(imgElement);

}

使用简单的字符串属性设置和删除属性及其值
　　getAttribute(name) 返回名为 name 的属性值。
　　removeAttribute(name) 删除名为 name 的属性。
　　setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value。
4、文本结点

var pElements = bodyElement.getElementsByTagName("p");

for (i=0; i<pElements.length; i++) ...{

var pElement = pElements.item(i);

var text = pElement.firstChild.nodeValue;

alert(text);

}

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

利用结点类型：
　　1. Node.ELEMENT_NODE 是表示元素节点类型的常量。
　　2. Node.ATTRIBUTE_NODE 是表示属性节点类型的常量。
　　3. Node.TEXT_NODE 是表示文本节点类型的常量。
　　4. Node.DOCUMENT_NODE 是表示文档节点类型的常量

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 + "'");

}

任何时候在 JavaScript 中使用 Node 常量，Internet Explorer 都会报错。因为多数人仍然在使用 Internet Explorer，应该避免在代码中使用 Node.ELEMENT_NODE 或 Node.TEXT_NODE 这样的构造。尽管据说即将发布的新版本 Internet Explorer 7.0 将解决这个问题，但是在 Internet Explorer 6.x 退出舞台之前仍然要很多年。因此应避免使用 Node，要想让您的 DOM 代码(和 Ajax 应用程序)能用于所有主要浏览器，这一点很重要