JavaScript总结

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

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

3、getElementsByTagName和getElementByClassName将返回一个对象数组，他们分别对应着文档里的一组特定的元素节点。 4、每一个节点都是一个对象。

获取元素：（属于document对象，用document对象调用） 1、getElementById

2、getElementByTagName 3、getElementByClassName

获取属性：（通过元素节点对象调用） getAttribute

更改属性节点值：（通过元素节点对象调用） setAttribute

DOM属性

1、childNode属性：可以获取任何一个元素的所有子元素，它是一个包含这个元素的所有子元素的数组:Element.childNodes 2、nodeType属性：

元素节点的nodeType属性值是1； 属性节点的nodeType属性值是2； 文本节点的nodeType属性值是3；

向后兼容： 1、对象检测

Window.onload=function() {

If(!document.getElementByTagName) return false; Var lnks=document.getElementByTagName(“a”); For(var i=0;i

If(lnks[i].getAttribute(“class”)==”popup”){ Lnks[i].onclick=function(){

Popup(this.getAttribute(“href”)); Return false; } } }

}

2、浏览器嗅探技术

性能考虑：

尽量减少访问DOM和尽量减少标记 合并和放置脚本 压缩脚本-min

代码压缩工具：

Douglas Crockford的JSMin 雅虎的YUI Compressor 谷歌的Closure Compiler

共享onload事件：

Function addLoadEvent(func){

Var oldonload=window.onload;

If(typeof window.onload!=’function’){

Window.onload=func;} Else{

Window.onload=function(){

Oldonload(); Func();} }

}

把现有的window.onload事件处理函数的值存入变量oldonload

如果在这个处理函数上没有绑定任何函数，就像平时那样把新函数添加给它

如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有的指令的末尾

DOM方法：

1、createElement方法（创建一个新元素） 语法：document.createElement(nodeName)

如创建一个p元素：

Var para=document.createElement(“p”)

2、appendChild方法：（把新元素插入节点树） 语法：parent.appendChild(child) 如：

Var para=document.createElement(“p”);——创建一个新的p元素，把其赋值给para变量

Var testdiv=document.getElementById(“testdiv”);

testdiv.appendChild(para);——把变量para插入变量testdiv里

3、createTextNode方法：

创建文本节点 语法：document.createTextNode(text);

如：var txt=document.createTextNode(“hello world”); 例子：

Window.onload=function(){

Var para=document.createElement(“p”);创建一个p元素节点 Var testdiv=document.getElementById(“testdiv”);

testdiv.appendChild(para);把这个p元素节点追加到test.html文档中的一个元素节点上 Var txt=document.createTextNode(“hello world”);创建一个文本节点

para.appendChild(txt);把这个文本节点追加到刚才创建的那个p元素节点上 }

还可以以这样的顺序： 创建一个p元素节点 创建一个文本节点

把这个文本节点追加到第一步创建的p元素节点

把这个p元素节点追加到test.html文档中的一个元素节点上

#####一个更复杂的组合：

This is mycontent.

元素节点em：文本节点my 文本节点content. 思路：

创建一个p元素节点并把它赋值给变量para 创建一个文本节点并把它赋值给txt1 把txt1追加到para上

创建一个em元素节点并把它赋值给变量emp 创建一个文本节点并把它赋值给变量txt2 把txt2追加到emp上 把emp追加到para上

创建一个文本节点并把它赋值给变量txt3 把txt3追加到para上

把para追加到test.html文档的testdiv元素上。

Window.onload=function(){

Var para=document.createElement(“p”);

Var txt1=document.createTextNode(“This is”); para.appendChild(txt1);

Var emp=document.createElement(“em”);

Var txt2=document.createTextNode(“my”); emp.appendChild(txt2); para.appendChild(emp);

Var txt3=document.createTextNode(“content.”); para.appendChild(txt3);

Var testdiv=document.getElementById(“testdiv”); testdiv.appendChild(para);

}

在已有元素前插入一个新元素insertBefore()方法 调用此方法必须告诉它三件事：

新元素：你想插入的元素newElement

目标元素：你想把这个新元素插入到哪个元素targetElement之前 父元素：目标元素的父元素parentElement

调用语法：

parentElement.insertBefore(newElement,targetElement) 在现有元素后插入一个新的元素 编写insertAfter（）函数

Function insertAfter(newElement,targetElement){

Var parent=targetElement.parentNode; If(parent.lastChild==targetElement){

parent.appendChild(newElement);} Else{

parent.insertBefore(newElemnt,targetElement.nextSibling);}

}