博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

javascript DOM操作

Posted on 2009-02-25 20:32  Zhiyett  阅读(282)  评论(0编辑  收藏  举报
1.创建节点
createElement()方法按照给定的标签名创建一个新的元素节点,它的nodeType属性值为1。
createTextNode()方法将创建一个包含着给定文本的新文本节点,它的nodeType属性值为3.
返回值是一个指向新建节点的引用指针。
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.body.appendChild(para);

2.复制节点
cloneNode()方法将为给定的节点创建一个副本。这个方法的返回值是一个指向新克隆节点的引用指针。
这个方法只有一个布尔类型的参数,它的可取值只能是true或false。参数是true时新节点将包含着与被复制节点完全一样的子节点。如果这个参数值 是false,新节点将不包含任何子节点——如果被复制节点是一个元素节点,这意味着包含在被被复制节点里的所有文本将不会被复制,但属性节点将被复制:
var para = document.createElement("p");
var newpara = para.cloneNode(true);
var newpara2=para.cloneNode(false);

3.插入节点
appendChild()方法给元素节点追加一个子节点,它的返回值是一个指向新增子节点的引用指针。
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.body.appendChild(para);
insertBefore()方法将一个给定节点插入到一个给定原属节点的给定子节点前面,它的返回值是一个指向新增子节点的引用指针:
reference = element.insertBefore(newNode,targetNode);
insertBefore()方法不仅可以用来插入新创建的元素,还可以用来挪动文档中的现有节点。
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var annoncement = document.getElementById("headline");
container.insertBefore(annoncement,message);
headline先被删除,然后再被重新插入到content元素所包含的fineprint元素的前面。


4.删除节点
removeChild()方法将从一个给定元素里删除一个子节点,它的返回值是一个已经被删除的子节点的引用指针:
reference = element.removeChild(node);

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
container.removeChild(message);
如果想删除某个节点,不知道它的父节点是哪一个,parentNode属性可以帮上忙:
var message = document.getElementById("fineprint");
var container = message.parentNode;
container.removeChild(message);


5.替换节点
replaceChild()方法将把一个给定父元素里的一个子节点替换为另一个子节点,它的返回值是一个指向已被替换的那个子节点的引用指针:
reference = element.replaceChild(newChild,oldChild)

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);

replaceChild()方法也可以用文档树上的现有节点去替换另一个现有节点。
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var announcement = document.getElementById("headline");
container.replaceChild(announcement,message);
headline替换掉fineprint

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var announcement = document.getElementById("headline");
var oldmessage = container.replaceChild(announcement,message);
container.appendChild(oldmessage);
headline替换掉fineprint,把fineprint重新再插入content

6.设置属性节点
setAttribute()方法为给定元素节点添加一个新的属性值或是改变它的现有属性值:
element.setAttribute(attributeName,attributeValue)

var para = document.createElement("p");
para.setAttribute("id","fineprint");
var container = document.getElementById("content");
container.appendChild(para);

删除属性
element.removeAttribute("href");

7.查找节点
getAttribute()方法将返回一个给定元素的一个给定属性的节点的值:
attributeValue = element.getAttribute(attributeName)
getElementById()方法的用途是寻找一个有着给定id属性值的元素,该方法返回的元素节点是一个对象,这个对象有nodeName、nodeType、parentNode、childNodes等属性。
element = document.getElementById(ID)
getElementsByTagName()方法的用途是寻找有着给定标签名的所有元素:
elements = document.getElementsByTagName(tagName)
这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的length属性等于当前文档里有着给定标签名的所有元素的总个数。这个数组里的每个元素都是
一个对象,它们都有着nodeName、nodeType、parentNode、childNodes等属性。
hasChildNodes方法可用来检查一个给定元素是否有子节点:
blooleanValue = element.hasChildNodes
这个方法将返回一个布尔值true或false。

DOM属性
1.nodeName属性返回一个字符串,其内容是给定节点的名字:
name = node.nodeName

2.nodeType属性返回一个整数,这个数值代表着给定节点的类型:
integer = node.nodeType

3.nodeValue属性将返回给定节点的当前值:
value = node.nodeValue

遍历节点树
1.childNodes属性将返回一个数组,这个数组由给定元素节点的子节点构成:
nodeList = node.childNodes

2.firstChild属性将返回一个给定元素节点的第一个子节点:
reference = node.firstChild

3.lastChild属性将返回一个给定元素节点的最后一个子节点:
referance = node.lastChild

4.nextSibling属性将返回一个给定节点的下一个子节点
referance = node.nextSibling

5.parentNode 属性将返回一个给定节点的父节点:
referance = node.parentNode

6.previousSibling属性将返回一个给定节点的前一个子节点
referance = node.previousSibling