您的位置：首页 > 其它

Ajax入门到精通（二）

2009-10-09 15:43 766 查看
操纵 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。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航