1. javascript 获取上级元素(父节点)
1) parentNode 获取上级元素
//当前元素直接父元素,parentNode 是 W3C 标准
var parent = document.getElementById('test').parentNode;
2) parentElement 获取上级元素
//当前元素直接父元素,parentElement 是 IE 的标准
var paernt = document.getElementById('test').parentElement;
3) offsetParent 获所有上级元素(牛逼)
//offset(偏移量) 与这位置有关的上下级
var parents = document.getElementById('test').offsetParent;
2. javascript 获取同级元素(兄弟节点)
1) previousElementSibling,nextElementSibling:直接匹配节点;previousSibling,nextSibling:会匹配空格
//不匹配空格、换行,直接匹配元素
var pre_brother = document.getElementById('test').previousElementSibling;
var next_brother = document.getElementById('test').nextElementSibling;
//匹配空格、换行
var pre_brother = document.getElementById('test').previousSibling;
var next_brother = document.getElementById('test').nextSibling;
3. javascript 获取下级元素(子节点)
1) 首选 children
//children 返回数组
var Chlid = document.getElementById('test').children[0]
2) DOM 方式 getElementByTagName
//getElementByTagName 返回数组,需按数组形式访问
var child = document.getElementById('test').getElementsByTagName('p');
3) childNodes 方式
//childNodes 返回子节点的集合(数组格式)注意:换行、空格也当作节点信息
var child = document.getElementById('test').childNodes;
4) 获取第一个子节点或最后一个子节点(firstChild,firstElementChild,lastChild,lastElementChild)
//firstChild,lastChild 空格、换行也会当成字节点,所以可能会现 undefined
var firstchild = document.getElementById('test').firstChild;
var lastchild = document.getElementById('test').lastChild;
//firstElementChild,lastElementChild 不匹配空格、换行
var firstchild = document.getElementById('test').firstElementChild;
var lastchild = document.getElementById('test').lastElementChild;
总结:Element 指的是元素,带这个就是直接匹配元素,不匹配空可行和换行。
注意:如果返回是数组 Elements