DOM对象的常用方法
转:http://blog.csdn.net/nevergiveup54/article/details/6895473
DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动? document.documentElement 返回文档的根节点<html> ----------------------------------------------------------------------------- document.body <body> ----------------------------------------------------------------------------- document.activeElement 返回当前文档中被击活的标签节点(ie) ----------------------------------------------------------------------------- event.fromElement 返回鼠标移出的源节点(ie) ----------------------------------------------------------------------------- event.toElement 返回鼠标移入的源节点(ie) ----------------------------------------------------------------------------- event.srcElement 返回激活事件的源节点(ie) event.target 返回激活事件的源节点(firefox) ------------------------------------ 当前对象为node 返回父节点:node.parentNode, node.parendElement, 返回所有子节点:node.childNodes(包含文本节点及标签节点),node.children 返回第一个子节点:node.firstChild 返回最后一个子节点: node.lastChild 返回同属上一个子节点:node.nextSibling 返回同属下一个子节点:node.previousSibling parentNode和parentElement功能一样,childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持 ,所以大家只要记得有parentElement和children就行了 ------------------------------ 节点的操作: 创建节点: document.createElement("div");//好像大都只能用document,不知道还能换成什么 document.createTextNode("fdsafdas"); 还有一个创建节点碎片: document.createDocumentFragment();(可以用来减少页面多次刷新) 例如: var oFragmeng = document.createDocumentFragment(); //先创建文档碎片 for(var i=0;i<10000;i++){ var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); oFragmeng.appendChild(op); //先附加在文档碎片中 } document.body.appendChild(oFragmeng);//最后一次性添加到document中 常用的添加节点: pnode.appendChild(node);//在节点pnode的子节点后追加node子节点 pnode.insertBefore(newChild, oldChild);//在现有的子节点前插入一个新的子节点 //newChild作为的pnode的子节点插入到其子节点oldChild之前 oldChild为可选项参数,当为null时其效果与appendChild一样,记住这句话,两个参数就不会记倒了 这里注意可没有pnode.insertAfter(),只能自己定义 删除节点: pnode.removeChild(node) 复制节点: pnode.cloneNode(include_all); //include_all为true时,则同时复制所有子节点,为false时,则只复制该节点(注意id也会被复制) 替换节点: pnode.replaceChild(newnode,oldchild) 访问节点:: 访问html元素:var oHtml=document.documentElement; 获取head元素:var oHead=oHtml.firstChild; 获取body元素:var oBody=oHtml.lastChild; 或者 var oBody=document.body; 也可以通过childNodes来做同样的工作: var oHead=oHtml.childNodes[0] 或者 oHtml.childNodes.item(0); var oBody=oHtml.childNodes[1] 或者 oHtml.childNodes.item(1); 判断节点间关系: alert(oHead.parentNode==oHtml); alert(oBody.previousSibling==oHead); alert(oHead.nextSibling==oBody); alert(oHead.ownerDocument==document); 访问指定节点: 熟知的getElementsByTagName(name),getElementsByName(name),getElementById(id)三个方法,不再展开。 属性操作: getAttribute(name) ——返回名称为name的属性的值 setAttribute(name,value) ——顾名思义 removeAttribute(name) ——顾名思义 为了简化创建表格,HTML DOM提供了一系列的表格方法,常用几个: cells ——返回</tr>元素中的所有单元格 rows ——表格中所有行的集合 insertRow(position) ——在rows集合中指定位置插入新行 deleteRow(position) ——与insertRow相反 insertCell(position) ——在cells集合的指定位置插入一个新的单元格 deleteCell(position) ——与insertCell相反
若欲放下即放下,欲待了期无了期。此身不向今生度,更向何生度此身。