将页面划分为由节点层次组成的结构文档
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中的注释