父元素:
parentNode;(没有兼容性问题);
offsetParent; (获取的是首个获得(绝对定位或者相对定位)的 元素;最终会找到html;)
子元素:
1、childNodes 属性。
标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性 文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素 节点,2是属性节点,3是文本节点。 node.childNodes[0] 完全等价于 node.firstChild
2、children 属性
非标准的,它返回指定元素的子元素集合。经测试,它只返回HTML节点,甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样,在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点,可以使用children[0]来替代上面的getFirst函数。需注意children在IE中包含注释节点。
第一个子元素:
1. 有时候需要获取指定元素的第一个HTML子节点(非属性/文本节点),最容易想到的就是firstChild属性。代码中第一个HTML节点前如果有换行,空格,那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。
function getFirst(elem){
for(var i=0,e;e=elem.childNodes[i++];){
if(e.nodeType==1)
return e;
}
}
2. 可以使用children[0]来替代上面的getFirst函数。
3.或者利用兼容的写法:
//IE
//obj.firstChild.style.background='red';
//FF
//obj.firstElementChild.style.background='red';
var oFirst=obj.firstElementChild || obj.firstChild;
最后一个子元素:
1. 模仿getFirst
function getLast(elem){
var len=elem.childNodes.length;
for(var i=len-1,e;e=elem.childNodes[i--];){
if(e.nodeType==1)
return e;
}
}
2. 可以使用 children[len-1]
来代替lastFirst
3. 或者利用兼容的写法:
var oLast=obj.lastElementChild || obj.lastChild;
上一个元素:
function prev(elem){
do{
elem = elem.previousSibling;
}while(elem && elem.nodeType != 1);
return elem;
}
或者:var oPrev=obj.previousElementSibling ||obj.previousSibling ;
(previousSibling: IE将跳过在节点之间产生的空格文档节点(如:换行字符),而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取,因此,在ie中用previousSibling便可读取到的上一个节点元素,在FF中就需要这样写:previousElementSibling了。)
下一个元素:
function next(elem){
do{
elem = elem.nextSibling;
}while(elem && elem.nodeType != 1);
return elem;
}
或者:var oNext =obj.nextElementSibling ||obj.nextSibling; (ie8以下有bug)
(nextSibling: IE将跳过在节点之间产生的空格文档节点(如:换行字符),而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取,因此,在ie中用nextSibling便可读取到的下一个节点元素,在FF中就需要这样写:nextElementSibling了。)
删除一个元素
obj.parentNode.removeChild(obj)
插入到目标元素的前面:
obj.parentNode.insertBefore(newchild,obj)
appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。insertBefore 方法 是在已有的节点前添加新的节点(相对于子节点来说的)。
插入到目标元素的后面:
function insertAfter(newchild,refchild){
var oParent=refchild.parentNode;
var oChilds=oParent.children;
var len=oChilds.length;
if(oChilds[len-1]==refchild){
oParent.appendChild(newchild)
}else{
refchild= refchild.nextElementSibling || refchild.nextSibling;
oParent.insertBefore(newchild,refchild);
}