分类:
2010-10-20 16:40:23
1、createElement
说明:
oElement = document.createElement(sTag)
Parameters
sTag Required. String that specifies the name of an element.
Return Value
Returns a reference to the new element.
作用:建立并返回一个TAGS(标签)对像。
我用到的实例:
var li = document.createElement("li");
将会得到一个LI,和常用的LI对象一样,可以给ID,INNERHTML之类的属性。
2、insertBefore
oElement = object.insertBefore(oNewNode [, oChildNode])
Parameters
oNewNode Required. Object that specifies the new element to be inserted into the document hierarchy. Elements can be created with the createElement method.
oChildNode Optional. Object that specifies the placement of the new element. If this parameter is specified, the new element will be inserted immediately before this existing child element.
作用:把oNewNode 结点加进object容器作为firstChild,并返回新结点对像。
oChildNode是指在哪个旧结点之前,在IE里,oChildNode可以省略,在其它浏览就不可省略了。
我用到的例子:
var ul = $('list');//容器
var li = document.createElement("li");
if(!preObj){//第一次点击
if($('vv0')){//列表没有内容
newli = $('vv0');
}else{//如果有,li0为最顶
preObj = $('li0');
var newli = ul.insertBefore(li,preObj);
}
}else{
var newli = ul.insertBefore(li,preObj);
}
preObj = newli;
newli.innerHTML = "我是新的LI。";
如果需要插入到容器的最后面时,用:appendChild
3、parentNode
说明:
HTML N/A
Scripting [ oElement = ] object.parentNode
Possible Values
oElement Object that receives the parent node.
The property is read-only. The property has no default value.
Remarks
The topmost object returns null as its parent.
返回当前对像的父结点,即上级容器,我用到的实例:
insertBefore 语法:
oElement = object.insertBefore(oNewNode, oChildNode)
在 oChildNode 之前插入新的节点 oNewNode,返回插入了的这个新节点引用。
在 IE 中如果省略 oChildNode,则当作追加 oNewNode,而其它浏览器中则不能省略,所以我们编程时,应该当作不可省略来使用。
appendChild 语法:
oElement = object.appendChild(oNode)
oNode 作为 object 子结点的身份插入 object 的最后一个元素之后。
示例:
nextSibling
定义和用法
nextSibling 属性可返回某个元素之后紧跟的元素(处于同一树层级中)。 如果无此节点,则属性返回 null。
语法:
nodeObject.nextSibling
注释:Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而 Mozilla 不会这样做。因此,在下面的例子中,我们会使用一个函数来检查首个子节点的节点类型。 元素节点的节点类型是 1,因此如果首个子节点不是一个元素节点,它就会移至下一个节点,然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这个方法,我们就可以在 Internet Explorer 和 Mozilla 得到正确的方法。
假设要取到所有页面中所有H1标题后面的下一个元素为其添加CSS属性.
var heads = document.getElementsByTagName("h1");
for(var i=0; i
elements.style.color='red'; //为其添加样式
}
function nextnode(node){
if(node.nodeType == 1){ //判断是否是元素节点,排除空的文本节点
return node;
}
if(node.nextSibling){
return nextnode(node.nextSibling);
}
}
在所有的例子中,我们将使用 XML 文件 books.xml,以及 JavaScript 函数 loadXMLDoc()。
下面的代码片段可取得 XML 文档中首个
//check if the next sibling node is an element node
function get_nextsibling(n)
{ var x=n.nextSibling; while (x.nodeType!=1) { x=x.nextSibling; } return x; }
xmlDoc=loadXMLDoc("books.xml");
var x=xmlDoc.getElementsByTagName("title")[0];document.write(x.nodeName);
document.write(" = ");
document.write(x.childNodes[0].nodeValue);
var y=get_nextsibling(x);
document.write("
Next sibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.childNodes[0].nodeValue);
输出:
title = Everyday Italian Next sibling: author = Giada De Laurentiis