JavaScript Dom方法

Dom 常用方法

Dom

定义：文档对象模型;
作用：通过JS操作网页;

获取元素节点

getElementById()

通过Id属性获取一个元素节点对象

//获取Id为btn01属性元素节点对象
var btn01 = document.getElementById("btn01");

getElementsByTagName()

通过标签名获取一组元素节点对象

//获取所有标签名为li的元素节点对象,并以数组的方式进行返回
var lis = document.getElementsByTagName("li");
//遍历lis数组
for(var i=0;i<lis.length;i++){
	alert(lis[i].innerHTML);
}

getElementsByName()

通过name属性获取一组元素节点对象

//获取name属性为gender的元素节点对象,并以数组的方式进行返回
var gender = document.getElementsByName("gender");

获取元素节点的子节点

getElementsByTagName()

获取当前节点的指定标签名后代节点

var city = document.getElementById("city");
//获取city节点的li节点
var lis = city.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
	alert(lis[i].innerHTML);
}

childNodes

获取包括文本在内的所有子节点

//获取Id为city属性元素节点对象
var city = document.getElementById("city");
//返回#city下所有的子节点
var cns = city.childNodes;
for(var i=0;i<cns.length;i++){
	alert(cns[i].innerHTML);
}

children

获取当前元素的子元素(标签)

//获取Id为city属性元素节点对象
var city = document.getElementById("city");
//返回#city下所有的子节点
var cns = city.children;
for(var i=0;i<cns.length;i++){
	alert(cns[i].innerHTML);
}

firstChild

获取当前元素的第一个子节点

var phone = document.getElementById("phone");
var fir = phone.firstChild;
alert(fir.innerHTML);

firstElementChild

	获取当前元素的第一个子节点

var phone = document.getElementById("phone");
var fir = phone.firstElementChild;
alert(fir.innerHTML);

lastChild

当前节点的最后一个子节点

var phone = document.getElementById("phone");
var fir = phone.lastChild;
alert(fir.innerHTML);

获取父节点和兄弟节点

parentNode

获取父节点

var bj = document.getElementById("bj");				
var pn = bj.parentNode;
alert(pn.innerText);

previousSibling

获取当前节点的前一个兄弟节点(可能会获取到空白的文本)

//获取id为android的元素
var and = document.getElementById("android");
var ps = and.previousSibling;
alert(ps.innerHTML);

previousElementSibling

获取前一个兄弟元素(不包括空白文本)

var and = document.getElementById("android");
var pe = and.previousElementSibling;
alert(pe.innerHTML);

nextSibling

获取后一个兄弟元素(不包括空白文本)

var and = document.getElementById("android");
var pr = and.nextSibling;
alert(pr.innerHTML);

扩展

innerText

获取内容没有标签

alert(btn01.innerText);

innerHTML

获取内容有标签

alert(btn01.innerHTML);