《JavaScript DOM 编程艺术》笔记

JavaScript DOM 编程艺术（第2版）1-9章笔记，只记录了DOM的部分方法，没有记录书中对平稳退化、行为与表现分离、兼容等内容和思想。

1: DOM：document object model；

2: .getElementById(“”)返回的是对象；.getElementsByTagName返回的是数组（节点列表）；

3: 可以把.getElementById(“”)赋给一个变量，用来代替这一串长代码；

4: HTML5 DOM增加了getElementsByClassName方法；

5：每个节点都是一个对象，每个对象对应一个或一组（如数组对象）元素节点，上面记录了获取特定元素的三种方法，获取到元素后，要获取它们的属性(.getAttribute)并且能够修改(.setAttribute)；

6: .getAttribute(“attribute”);.setAttribute(“attribute”,”value”);

7: 事件处理函数（例如onclick）：一旦事件发生，相应的JS代码会执行并返回一个值，例如onclick执行后会返回一个布尔值true或false，如果是true，onclick事件处理函数就认为“链接被点击了”，就会触发默认的行为（比如在新窗口打开链接）；false同理。避免默认行为可以加一句return false；

8: .childNodes获取任一元素的子元素，返回数组。数组包含所有类型（元素、属性、文本）的节点，所以childNodes的返回值比想象的要大很多；

9: nodeType属性：元素节点的属性值为1，属性节点属性值为2，文本节点的属性值为3；

10: nodeValue能够得到一个节点的值，有时候元素本身是一个空值，我们需要的是元素的子节点的值（通过childNodes获取）；

11: node.firstChild===node.childNodes[0],node.lastChild===node.childNodes[node.childNodes.length-1]；

12: 前六章小结：getElementById和getElementsByTagName在文档中找到某个或某些特定的元素节点，这些元素通过如setAttribute（改变某个元素的属性）和nodeValue（改变某个元素节点包含的文本）之类的方法和属性来处理。以上内容改变了网页某些细节而不改变其底层结构。

13: 通过创建新元素和修改现有元素来改变网页结构：传统方法：document.write（违背行为和表现应分离原则）和innerHTML（只适合于HTML文档，不适合其他XHTML文档），都有缺陷，不建议使用。推荐使用DOM方法；

14: 创建元素：createElement创建一个未被连接到document的元素节点；

15: 将节点连接到document的节点树：appendChild；

16：有了元素节点还不够，若要放一些文本信息，需要再创建一个文本节点：createTextNode；

17: 有了appendChild能让节点连接到节点树上，但是并不能定位创建的元素位置。所以有insertBefore方法，在已有元素面前插入一个元素。用法：parentElement.insertBefore(新节点，已有节点)；parentElement可以直接用 已有节点.parentNode 代替；

18: 网页构成：结构层，表示层，行为层；

19: 使用element.style.样式 方法可以获取元素的样式，但是类似于font-family这种中间有-号的，JS会默认为是减号。对应的，使用驼峰命名法将font-family改为fontFamily就好了；

20: DOM操作获取样式只能够获取html文件中添加的style，而对于CSS文件中的样式是找不出来的；

21: 获得文档的下一个节点：nextSibling；

22: DOM除了可以根据固定样式来修改样式，也可以用className直接为元素添加一个class；如果用.className=”class”，那么会将元素本来的class替换，而如果写为.className+=”class”，那么就是追加
的效果；

23: 对函数进行抽象。写function时带参数，把对某个特定的元素的方法变成一个通用的方法。例如一开始是getElementsByTagName(“h1”)，这就只能对某个特定的元素（h1）生效，如果写function时设置形参tag，然后使用getElementsByTagName(tag)，这样就是通用的。把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象。

24: 两个通用函数：
可以让window.onload方便的加载几个函数的方法

function addLoadEvent(func){  
    var oldonLoad = window.onload;  
    if(typeof window.onload!='function'){  
        window.onload = func;  
    }  
    else{  
        window.onload = function(){  
            oldonload();  
            func();  
        }  
    }  
}  
addLoadEvent(fun);

insertafter方法

function insertAfter(newElement, targetElement){ 
    var parent = targetElement.parentNode; 
    if (parent.lastChild == targetElement) { 
        // 如果最后的节点是目标元素，则直接添加,因为默认是添加在最后。 
        parent.appendChild(newElement); 
    } 
    else { 
        //如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面。
        parent.insertBefore(newElement, targetElement.nextSibling);  
    } 
}