详细概念描述请见上一篇文章 :
一旦使用 document 元素获得对 Web 页面 DOM 树的访问,就可以直接使用元素、属性和文本
1、文档节点
createElement、createTextNode、createAttribute
2、元素结点
getAttribute(name) 返回名为 name 的属性值。
removeAttribute(name) 删除名为 name 的属性。
setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value。
getAttributeNode(name) 返回名为 name 的属性节点(属性节点在 下一节 介绍)。
removeAttributeNode(node) 删除与指定节点匹配的属性节点。
getElementsByTagName(elementName) 返回具有指定名称的元素节点列表
处理属性
任何时候在 JavaScript 中使用 Node 常量,Internet Explorer 都会报错。因为多数人仍然在使用 Internet Explorer,应该避免在代码中使用 Node.ELEMENT_NODE 或 Node.TEXT_NODE 这样的构造。尽管据说即将发布的新版本 Internet Explorer 7.0 将解决这个问题,但是在 Internet Explorer 6.x 退出舞台之前仍然要很多年。因此应避免使用 Node,要想让您的 DOM 代码(和 Ajax 应用程序)能用于所有主要浏览器,这一点很重要
<
html
>
< head >
< title > JavaScript and the DOM </ title >
< script language ="JavaScript" > ...
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 >
< img src ="http://www.headfirstlabs.com/Images/hraj_cover-150.jpg" />
< input type ="button" value ="Test me!" onClick ="test();" />
</ body >
</ html >
< head >
< title > JavaScript and the DOM </ title >
< script language ="JavaScript" > ...
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 >
< img src ="http://www.headfirstlabs.com/Images/hraj_cover-150.jpg" />
< input type ="button" value ="Test me!" onClick ="test();" />
</ 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;
// 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 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);
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);
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);
}
}
}
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);
}
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);
}
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);
}
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 + "'");
}
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 应用程序)能用于所有主要浏览器,这一点很重要