《JavaScript DOM编程艺术》【一】

先看个小例子：

创建insertAfter方法

DOM常用的5个方法：

• getElementById

• getElementsByTagName

• gettElemensByClassName

• getAttribute

• setAttribute

DOM中的D表示文档，O表示对象，M表示模型。其中，对象分为3种：

• 用户定义的对象

• 内建对象，如Array,Math,Date等

• 宿主对象，由浏览器提供的对象，,如window.open,window.blur.

getElementsByClassName兼容性处理：

//node表示DOM树中搜索起点
 function getElementsByClassName(node,classname){
 	if(node.getElementsByClassName){
 		//使用现有方法
 		return node.getElementsByClassName(classname);
 	}else{
 		var results=new Array();
 		var elems=node.getElementsByTagName("*");
 		for(var i=0;i<elems.length;i++){
 			if(elems[i].className.indexOf(classname) != -1){
 				results[results.length]=elems[i];
 			}
 		}
 		return results;
 	}
 }

小结：

一份文档就是一颗节点树。

节点分为不同类型：元素，属性，文本节点等。

getElementById将返回一个对象，该对象对应着文档里的一个特定的元素节点。

getElementsByTagName和getElementsByClassName将返回一个数组，分别对应文档里一组特定的元素节点。

每一个节点都是一个对象。

获取和设置属性：

getAttribute是一个函数，只有一个参数：

object.getAttribute(attribute)
...
getAttribute不属于document对象，所以不能通过document对象调用，调用方法：

var paras=document.getElementsByTagName(“p”);
//方法一：
for(var i=0;i<paras.length;i++){
var title_text=paras[i].getAttribute(“title”);
if(title_text!= null){
alert(title_text);
}
}
//方法二：
for(var i=0;i<paras.length;i++){
var title_text=paras[i].getAttribute(“title”);
if(title_text) alert(title_text);
}
…

setAttribute

getAttribute是一个函数，有2个参数：

object.setAttribute(attribute,value)

用setAttribute改变原有属性的值：

var paras=document.getElementsByTagName("p");
for(var i=0;i<prras.length;i++){
	var title_text=paras[i].getAttribute("title");
    if(title_text){
    	paras[i].setAttribute("title","brand new title text");
        alert(paras[i].getAttribute("title"));
    }
}

childNodes属性：

该属性可获取任何一个元素所有的子元素，他是一个所有子元素的数组。

显示body所有子元素的总个数：

function countBodyChildern(){
	var body_element = document.getElementsByTagName("body")[0];
    alert(body_element.childNodes.length);
}

//在页面加载时执行
window.onload = countBodyChildren;

nodeType属性：

语法：

node.nodeType

nodetype得值是个数字，而不是像“element”,”attribute”那样的字符串。

nodeType只有12种，但只有3种有实用价值：

元素节点的nodeType属性值为1

属性节点的nodeType属性值为2

文本节点的nodeType属性值为3

动态改变属性值：

function showPic(whichpic){
	var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",socuse);
    var text = which.getAttribute("title");
    var description = document.getElementById("description");
}

nodeValue属性

改变文本节点的值：

node.nodeValue
//改变属性的值
function showPic(){
    var source=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text=whichpic.getAttribute("title");
    var description=document.getElementById("description");
    description.firstChild.nodeValue=text;
}

firstChild与lastChild属性：

node.firstChild
node.childNodes[0]
node.lastChild

动态创建标记

传统方法：document.write和innerHTML

DOM方法：creatElement,createTextNode,appendChild和insertBefore

window.onload=function (){
    var pra=document.createElement("p");
    var div=document.getElementById("div");
    div.appendChild(pra);
    var txt=document.createTextNode("hello world!");
    pra.appendChild(txt);
}
//我更倾向这种写法
 window.onload=function (){
    var pra=document.createElement("p");
    var txt1=document.createTextNode("This is ");
    var em=document.createElement("em");
    var txt2=document.createTextNode("my");
    var txt3=document.createTextNode(" content.");
    var div=document.getElementById("div");
    pra.appendChild(txt1);
    em.appendChild(txt2);
    pra.appendChild(em);
    pra.appendChild(txt3);
    div.appendChild(pra);
}

insertBefore方法，这里需要注意没有insertAfter方法，但我们可以编写它，代码如下：

function insertAfter(newElement,targetElement){
    var parent=targetElement.parentNode;
    if(parent.lastChild==targetElement){
    	parent.appendChild(newElement);
    }else{
   		parent.insertBefore(newElement,targetElement.nextSibling);
    }
    //nextSibling表示目标元素的兄弟元素
}

最终代码如下：

function preparePlaceholder(){
    if(!document.createElement) return false;
    if(!document.createTextNode) return false;
    if(!document.getElementById) return false;
    if(!document.getElementById("pic")) return false;
    var placeholder=document.createElement("img");
    placeholder.setAttribute("id","placeholder");
    placeholder.setAttribute("src","img/a4.jpg");
    placeholder.setAttribute("alt","This is a photo");
    var description=document.createElement("p");
	description.setAttribute("id","description");
    var txt=document.createTextNode("Choose an pic");
    description.appendChild(txt);
    var gallery=document.getElementById("pic");
    insertAfter(placeholder,gallery);
    insertAfter(description,placeholder);
}

持续更新完善中。。。