js的DOM编程艺术的笔记（二）-优快云博客

本文介绍了JavaScript编程中处理DOM的基本原则和方法，包括如何通过不同方式动态创建HTML内容，解析DOM结构，以及如何通过JS来改变文档结构和内容。同时探讨了节点之间的关系及属性，如元素节点、文本节点等，并提供了具体的实现示例。

2019独角兽企业重金招聘Python工程师标准>>>

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 获取到的节点也有可能会是文本节点

【My text 铁素体 :

var bNodeOld = document.getElementById("child");
alert(bNodeOld.firstChild); //获取的是 My text的文本节点

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

】

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;
   }
}

转载于:https://my.oschina.net/u/2870118/blog/853715