Javascript学习笔记之DOM

将页面划分为由节点层次组成的结构文档

1、Node类型

每个节点都有nodeType类型，用Node的属性来表示，其中重要的类型为Node.ELEMENT_NODE(1)和Node.DOCUMENT_TYPE(9)

确定节点类型的方法：

if(someNode.nodeType == Node.ELEMENT_NODE){
    alert("Node is an element.");
}
or
if(someNode.nodeType == 1){
    alert("Node is an element.");
}

对于元素节点 nodeName保存其标签名 nodeValue为null

每个节点都有childNodes属性 保存一个NodeList类数组对象 这个对象并不是Array实例

var firstChild = someNode.childNodes[0];//someNode.firstChild
var lastChild = someNode.childNodes.item(someNode.childNodes.length-1);

节点操作方法有

someNode.appendChild(newNode);//将节点添加到NodeList尾部

someNode.insertBefore(newNode, insertPosition);//将节点插入到指定位置

someNode.replaceChild(newNode, replacePosition);//将节点插入到指定位置，该位置上的原有节点被移除

someNode.removeChild(node);//移除节点

2、Document类型

document对象是HTMLDocument的一个实例，表示整个HTML页面，同时也是BOM中window对象的一个属性，可以全局访问。

var html = document.documentElement;
//document.childNodes[0]
//document.firstChild
var body = document.body;
var doctype = document.doctype;

查找元素：

getElementById("myId")//获取id为myId的第一个元素，有些浏览器会匹配name属性，因此请保证id名称全局唯一

getElementsByTagName("img")//获取html中所有的img元素

getElementsByName("color")//获取name为color的所有元素

其他的特殊集合（HTMLCollection）

document.anchors	所有带name属性的<a>元素
document.links	所有带href属性的<a>元素
document.forms	所有的<form>元素
document.images	所有的<img>元素

3、Element类型

除Document类型外，web编程中最常用的类型

创建元素

var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";

等价于

var div = document.createElement("<div id = \"myNewDiv\" class = \"box\"></div>");

添加到html中

document.body.appendChild(div);

4、Text类型

表示文本节点，必须依附于Element节点，没有子节点

创建文本节点

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello, JavaScript");
element.appendChild(textNode);
document.body.appendChild(element);

元素也可包含多个文本子节点

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello, JavaScript");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Hello, JavaScript again");
element.appendChild(anotherTextNode);
document.body.appendChild(element);

此时两个节点中的文本就会被连起来显示，容易导致分不清哪个字符串属于哪个文本节点，因此可以使用element.normalize()方法将隶属于一个Element的所有文本节点合并成一个文本节点

5、Comment类型

表示DOM中的注释