Dom(Document Object Model) 即文档对象模型,意思是HTML文档中每一个元素都是一个对象节点。
节点类型以及对应值如下:
- document根节点 — 9
- 注释节点 — 8
- 文本节点 — 3
- 属性节点 — 2
- 标签节点 — 1
js获得元素的方法
- document.getElementById 通过id获取元素
- document.getElementsByClassName 通过类获取元素
- document.getElementsByName 通过name获取元素
- document.getElementsByTagName 通过标签名获取元素
- node.firstchild 获得当前节点的第一个子元素
- node.lastchild 获得当前节点的第一个父元素
- node.childNodes 获得子元素节点的集合
- node.parentNode 获得父节点
- node.nextSibling 返回当前节点的后一个兄弟节点
- node.previousSibling 返回当前节点的前一个兄弟节点
需要注意的是 getElementById获得到的是单个节点,而其他方法获得到的是一个集合(哪怕最终取到的只有一个元素),从语义上也能看出来。
简单演示
//获取id为first的元素节点
var fisrt = document.getElementById("first");
//元素类型
console.log(first.nodeType);
//元素名
console.log(fisrt.nodeName);
//元素值
console.log(fisrt.nodeValue);
<div id="first">文本内容<p name="second"></p></div>
显示结果:
说明标签元素没有节点值
var second = document.getElementsByTagName("p");
console.log(second);
显示效果:
var fisrt = document.getElementById("first");
var third = fisrt.childNodes;
console.log(third)
for(var i=0;i<=third.length;i++){
console.log("元素类型值为:"+third[i].nodeType);
console.log("元素名为:"+third[i].nodeName);
console.log("元素值为:"+third[i].nodeValue);
}
显示效果:
注意:在dom中,一个回车也会被算作是一个文本元素。
var one = document.getElementById("div");
var two = one.firstChild;
console.log("two:"+two.nodeName);
var three = one.lastChild;
console.log("three:"+three.nodeName);
var four = two.parentNode;
console.log("four:"+four.nodeName);
var five = two.nextSibling;
console.log("five:"+five.nodeName);
var six = three.previousSibling;
if(six===five){
console.log(true);
}
<div id="div"><p></p><a href=""></a><span></span></div>
显示效果: