DOM笔记2

<!--

节点类型检查

if(someNode.nodeType==ElementNode){

alert("Node is an element");

}

或者

if(someNode.nodeType==1){

alert("Node is an element");

}

使用nodeName和nodeValue这两个属性

if(someNode.nodeType==1){

var someNode.nodeName();//nodeName的值是元素的标签名

}

每一个节点都有一个childNodes属性。当中保存NodeList对象，NodeList是一种类型数组对象，用于保存一组有序的节点

这个对象也有length属性，能够通过位置来訪问这些节点

var firstChild=someNode.childNodes[0];

var secondChild=someNode.childNodes.item(1);

var length=someNode.childNodes.length;

每一个节点都有一个parentNode属性。该属性指向文档树中的父节点

if(someNode.nextSibling===null){

alert("last node in the parent's childNodes list...");

}else if(someNode.previousSibling===null){

alert("First node in the parent's childNodes list...");

假设列表中仅仅有一个节点，那么该节点的nextSibling和previousSibling都为null

}

父节点和第一个子节点和最后一个子节点也存在关系

firstChild

lastChild

即存在这种关系

(someNode.childNodes[0]===someNode.firstChild)

(someNode..childNodes[childNodes.length-1]===someNode.lastChild)



操作节点

最经常使用的方法是appendChilde();//用于向childNodesd的末尾加入一个节点

var returnNode=somenNode.appendChild(newNode);

alert(returnNode==newNode);//true

alert(someNode.lastChild==newNode);//true

使用insertBefore()方法将节点附加到ChildNodes的任何位置

var returnNode=someNode.appendChild(newNode,null);

alert(returnNode==someNode.lastNode);//true

//插入后成为一个子节点

var returnNode=someNode.appendChild(newNode,someNode.firstNode);

alert(returnNode===newNode);

alert(returnNode===someNode.firstNode);

//插入后成为最后一个节点的前一个节点

var returnNode=someNode.appendChild(newNode,someNode.lastNode);

alert(returnNode===someNode.childNodes.length-2);//true

alert(returnNode===newNode);//true

//注意：appendChild()和insertBefore不会删除节点

//replaceChild()方法接受两个參数，要插入的节点和要替换的节点，要替换的节点将由这种方法返回并从文档树中删除

//替换第一个子节点

var retuenNode=someNode.replaceChild(newNode,someNode.firstChild);

//替换最后一个子节点

var returnNode=somNode.replaceChild(newNode,someNode.lastChild);

//使用removeChild()方法删除一个子节点

var formerFirstNode=someNode.removeChild(someNode.firstNode);

//删除最后一个子节点

var lastNode=someNode.removeChild(someNode.lastNode);

//parentNode属性

。。。

//其它方法

cloneNode():用于创建调用这种方法的节点的全然一样的一个副本

CloneNode()接受一个布尔值用于运行是否深度复制，在參数为true时。运行深度复制

也就是复制节点和整个子树节点，在參数为FALSE时。仅仅复制本身

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

var deepList=Mylist.clondNode(true);

alert(deeplist.childNodes.length);

//查找元素

对于document对象来说，提供了两个方法

getElementById();

getElementsByTagName();

var images=document.getElementsByTagName("img");

alert(images.length);

alert(images.item(0).src);

alert(images[0].src);

//文档写入 write(),writeln(),open(),clost();

document.writeln("当前的时间是："+new Date()+";");

//取得属性

var div=document.getElementById("div");

alert(div.getAttribute("id"));

alert(div.getAttribute("title"));

alert(div.getAttribute("class"));

alert(div.getAttribute("dir"));

//设置属性

div.setAttribute("id","someId");

div.setAttribute("class","someClass");

//创建元素

var dir=document.createElement("div");

//为元素的属性复制

dir.id="someId";

dir.class="someClass";

dir.height="200"+"px";

dir.width="200"+"px";

//将创建的元素加入到document.body元素中去

document.body.appendChilde(div);

var dir=document.createElement("<div...>");



-->

版权声明：本文博客原创文章。博客，未经同意，不得转载。