JavaScript的总结（三、DOM）

概述

关于DOM的理论上面（JavaScript总结（一：基本概念））已经讲过了，下面主要讲的就是DOM里***体的东西了，浏览器支持JavaScript后，就为用户提供了相应的API函数，我们通过DOM机制操作文档的时候，只需要调用相应的API就可以了。浏览器在接收到HTML文档后，会将其解释为一颗树，并以此来进行管理，具体如下图：



下面说一下DOM的中一些API，看看我们是如果通过这些系统为我们提供好了的函数来访问并操控HTML文档中的内容的。

常用DOM

//通过某种方式来获得HTML中相应的标签
//通过标签id属性访问某一元素
var objElement = document.getElementById("button1"); //button1为标签的id
alert(objElement.tagName);			
//通过标签访问一组元素(数组)
var objElements = document.getElementsByTagName("input"); //input为HTML标签
alert(objElements[0].tagName);		
//通过name属性访问一组元素(数组)
var objElementsN = document.getElementsByName("button"); //button为标签的name
alert(objElementsN[0].tagName);

//从元素数组中取出某个元素的方法
var obj = objElementsN[0];
var obj = objElementsN.button1; //button1为标签的id
var obj = objElementsN.item(0);

//通过某个元素来访问其父元素，子元素或同级元素
var obj = objElement.parentNode;  //父元素，只能有一个
var obj = objElement.previousSibling;   //同层上一个元素
var obj = objElement.nextSibling; //同层下一个元素
var obj = objElement.childNodes;  //子元素数组，子元素可能有多个标签元素
var obj = objElement.firstChild;  //第一个子元素
var obj = objElement.lastChild;   //最后一个子元素

//访问元素内的内容（内容：开始标签和结束之间的字符串；内容为HTML(HTML标签的嵌套)，需要解释；内容为Text，直接显示；）
objElement.innerHTML：标签修饰的内容为HTML
objElement.innerText：标签修饰的内容当成文本
objElement.firstChild.nodeValue:相当于innerText属性

//访问元素的属性值，也可以设置
alert(objElement.id);   //元素名.属性名;这样就可以操作元素的属性值了
objElement.setAttribute("属性名",属性值);

//增加新的节点
var objImg = document.createElement("img");  //创建一个新元素
objImg.setAttribute("src","a.gif");  //为新元素设置相应的属性值
objFather.appendChild(objImg);  //为objFather元素添加一个子元素
element.appendChild();