JavaScript DOM编程艺术

  看过的书很多，有很多经典的，不过忘记的快，现在重新看了一遍，边看还边做一些笔记，总结，加深自己的印象


DOM(Document Object Model):文档对象模型

1.基本方法：
1. getElementById(),该方法返回一个给定id属性值的元素节点相对应的对象

2. getElementsByTagName(),返回一个数组，每个对象分别对应着文档里有着给点标签的一个元素,例: alert(document. getElementsByTagName (“li”).length)

3. getAttribute(attribute),在找到一个元素之后，就可以利用这个方法把他的各种属性的值查询出来，  参数就是你打算查询的属性的名字

4. setAttribute(attribute,value),对属性的值作出修改，用该方法的优势在于可以对文档中的任何一个元素的任何一个属性作出修改

2.基本属性
1. childNodes属性：把任何一个元素的所有子元素检索出来，返回的是一个数组，包含全体子元素

2. nodeType属性：用来区分文档里的各个节点。1代表元素节点，2代表属性节点，3.代表文本节点

3. nodeValue属性：用于改变某个文本节点的值
     a) <p id=”description”></p> 如果想获得<p>元素的文本内容，就必须检索它的第一个子节点的nodeValue属性值 alert(document.getElementById(“description”).childNodes[0].nodeValue);

4. firstChild和lastChild属性
     a) firstChild就是比childNodes[0]更有意义的同义词
     b) lastChild也是node. childNodes[nodes.childNodes.length-1]

5. parentNode： 父节点
nextSibling： 下一个兄弟节点
previousSibling： 前一个兄弟节点

5. style属性，文档中的每个元素节点都有一个属性style，包含着元素的样式信息、
    a) 对于单个单词的属性，可以使用element.style. attribute,对于font-family之类的属性，采用“Camel记号”
         i.    element.style. color
        ii.    element.style. fontFamily

6.className属性


3.编程原则和良好习惯

1. 预留退路：确保网页在没有JavaScript的情况下也能正常工作
2. 分离JavaScript：把网页的结构和内容与JavaScript脚本的动作行为分开
3. 向后兼容性：确保老版本的浏览器不会因为javaScript脚本而死机



4.节点类型：
元素节点(element node)    html中的p，ul，li等都是元素节点
 文本节点(text node)       在一些元素里面的文本就是一个文本节点
 属性节点(attribute node)  元素都或多或少的有一些属性，属性的最用就是对元素作出更具体的描述。例如，几乎所有的元素都有一个title，在DOM中title=”aa”就是一个属性节点


5.动态创建HTML内容
1.document.write()方法

		function insertParagraph(text){
			var str="<p>";
			str+=text;
			str+="</p>";
			document.write(str);
}

容易导致“数据/格式非法的”错误，而且与标准不兼容

2.innerHTML属性

	window.onload=function(){
			var testDiv=document.getElementById("testDiv");
			testDiv.innerHTML="<p>I insterted <em>this</em></p>";
}

插入一份文档时，是一个很好的选择，但是任何时候，DOM都是可以替代的

3.createElement()： 创建一个元素
appendChild()： 将某个节点关联到文档里的某个节点
createTextNode()：创建一个文本节点

创建内容<p>I insterted <em>this</em></p>

var para=document.createElement("p");
var txt1=document.createTextNode("This is");
para.appendChild(txt1);

var emphsis=document.createElement("em");
var txt2=document.createTextNode("my");
emphsis.appendChild(txt2);

para.appendChild(emphsis);

var txt3=document.createTextNode(" content.");
para.appendChild(txt3);


var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);


ps:貌似这本书可以记录的东西不是很多，不过看了以后还是有很大的收获，对dom有了更加深入的理解，里面的一些工具函数也是非常有用的