javascript 获取上级、同级和下级元素

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

你可能感兴趣的:(javascript)