DOM对象的常用方法(自己总结觉得有用的)

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(IE)

返回所有子节点: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();(可以用来减少页面多次刷新,上篇文章有详细说过)

常用的添加节点:

pnode.appendChild(node);//在节点pnode的子节点后追加node子节点

pnode.insertBefore(newChild,oldChild);//在现有的子节点前插入一个新的子节点

//newChild作为的pnode的子节点插入到其子节点oldChild之前,oldChild为可选项参数,当为null时其效果与appendChild一样,记住这句话,两个参数就不会记倒了,这里注意可没有node.insertAfter(),只能自己定义

删除节点:pnode.removeChild(node)

复制节点:pnode.cloneNode(include_all);//include_all为true时,则同时复制所有子节点,为false时,则只复制该节点(注意id也会被复制)

替换节点:pnode.replaceChild(newnode,oldchild)

访问节点:

访问html元素:varoHtml=document.documentElement;

获取head元素:varoHead=oHtml.firstChild;

获取body元素:varoBody=oHtml.lastChild;或者varoBody=document.body;

也可以通过childNodes来做同样的工作:

varoHead=oHtml.childNodes[0]或者oHtml.childNodes.item(0);

varoBody=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)——顾名思义

为了简化创建表格,HTMLDOM提供了一系列的表格方法,常用几个:

cells——返回</tr>元素中的所有单元格

rows——表格中所有行的集合

insertRow(position)——在rows集合中指定位置插入新行

deleteRow(position)——与insertRow相反

insertCell(position)——在cells集合的指定位置插入一个新的单元格

deleteCell(position)——与insertCell相反

相关推荐