js中Dom的学习

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>

显示效果：