1：编写js的原则：“预留退路问题” ； “js代码和html分离” ； “进行必要的检查”

2： 动态创建html内容：document.write()方法 .和 innnerHTML属性；深入剖析DOM：createElement(), appendChild(), insertBefore()以及createTextNode()等。使用js改变文档结构和内容。理解 【元素节点对象和文本节点以及属性节点的关系】。其中createElement()创建元素节点；createTextNode()创建文本节点；appendChild()添加子节点；insertBefore(ndoe1,node2)【使用insertBefore的三要素:1.明确父节点；2.明确要插入的节点node1; 3:插入那个节点之前 node2】。

3：　firstChild 和lastChild 获取到的节点也有可能会是文本节点

【<b id="child">My text <p>铁素体</p></b> :

    var bNodeOld = document.getElementById("child");

    alert(bNodeOld.firstChild); //获取的是 My text的文本节点

    alert(bNodeOld.firstChild.nextSibling)； //获取到的就是<p>元素节点

】

4：DOM文档中的每个元素都是对象。这些对象都有着不同的属性，有些属性包含着特定元素在节点树上的位置信息【parentNode, nextSibling, previousSibling, ChildNodes, firstChild, lastChild等属性都是元素位置有关的】；有些属性是元素自身的信息【nodeValue, nodeType, nodeName等属性】；除此之外每个元素节点对象还有一个style的属性，style属性包含着元素的样式信息。【值得注意的是，元素节点的style属性返回的也是一个对象】

5：在使用js处理DOM的时候，【空格换行符也是一个文本节点】例如childNodes 和 nextSibling 都有可能获取到这样的文本节点。

实例方法：

//getNextElementNode:返回第一个元素节点【只返回第一个元素节点】

function getNextElementNode(pNode){     if(pNode.nodeType == 1){ //如果是元素节点 直接返回         return pNode;     }     if(pNode.nextSibling){ //否则判断是否有下一个节点         return getNextElementNode(pNode.nextSibling); //继续递归函数     }     return null; }

//自定义的addClass方法

function addClass(element, className){

    if(!element.className){ //如果元素没有class属性，直接将新的className赋予它        element.className = className;     }else{                                //否则该元素的className = 原来的className + " " + 新的className        element.className += " " + className;     } }