《JavaScript DOM 编程艺术》 读书笔记

1.document.getElementById(string)返回的是一个对象，这个对象是怎样的？

2.document.getElementsByTagName(tag)返回的是一个对象数组，tagName可以用通配符"*"（有引号），该方法不必非得用在整个文档上，也可以用在其它元素上。

3.DOM与浏览器宿主window的关系？

4.DOM常用的三种节点：元素节点，文本节点，属性节点。

5.元素节点对象的方法：

  1) nodeObj.getAttribute(attributeName),如果为空，则返回null。这个方法不能用document调用。

  2) nodeObj.setAttribute(attributeName, value)。注意，这里的setAttribute对文档的修改，将使文档在浏览器窗口的行为/效果发生变化。但是这种变化不会反应在文档中，用view source方法查看文档，文档的属性是没有变化的。（在Firefox下用firebug看是会有变化的）。这种现象源自DOM的工作模式：先加载静态内容，然后以动态的方式对它们进行刷新，动态刷新不影响静态的文档内容。浏览器显示的是DOM节点树。

    DOM之前改变元素对节点对象的属性方法可以用类似如：elementObj.title=  "new title";的形式修改，现在如何待进一步研究。

6.事件处理机制的一点：给某个元素添加了事件处理函数后，一旦发生预定事件，相应的javascript代码就会得到执行；那些javascript代码可以返回一个结果，而这个结果可以传递回那个事件处理函数。

    如：<a href="http://hackooo.blogbus.com" onlick="alert('Hi,man!');return false;" >my blog </a>

   这样点击超链接不会触发a标签的默认行为；如果是return true;的话，则执行完javascript代码后会继续执行它的默认行为。

7.元素节点对象的属性：

  1) nodeObj.childNodes,返回一个节点对象数组；节点对象包括所有类型的节点，常用的是元素节点对象，属性节点对象，文本节点对象。

  2) nodeObj.nodeType，返回一个数值，共有12种取值，元素节点：1，属性节点：2，文本节点：3；

  3) nodeObj.nodeValue,返回节点的值。如：text。

 p标签元素对象的nodeValue是null, 里面的文本是p标签的第一个节点，因此p标签的childNodes[0]就是这里p标签的文本节点，这里p标签的childNodes[0].nodeValue 的值是"text"。

4) nodeObj.firstChild,返回节点的第一个子节点对象，跟nodeObj.childNodes[0]相同

5) nodeObj.lastChild,返回节点的最后一个子节点对象，跟nodeObj.childNodes[nodeObj.childNodes.length-1]相同

8.浏览器加载整个文档和javascript、css的渲染等的顺序是怎样的？

9.在head标签中加载的javascript代码是加载完后立刻执行的。此时DOM模型并未不完整，getElementById等方法并不能按预期那样工作。HTML文档全部加载完毕后将触发一个事件。window对象触发onload时，document对象已经存在。

10.window.onload绑定多个事件的最简单的方法：

function addOnLoadEvent(func){
        var onload = window.onload;
        if(typeof onload != 'function'){
           window.onload = func;
        }else{
             window.onload = function (){
               onload();
               func();
            }
        }
    }

11.css的渲染时间是什么时候？

12.DOM-Core与HTML-DOM

13.innerHTML的缺点：innerHTML是一项专利技术，不是业界标准，虽然它得到广泛的支持。

14.创建DOM节点：

    1) document.createElement(nodeName);创建元素节点对象

    2) document.createTextNode(text);创建文本节点对象

15.添加节点：

    1) nodeObj.appendChild(sonNodeObj);把子节点对象，追加到父节点里。该方法返回的是指向新增子节点的指针。可以使用该方法挪动文档中的现有元素。

    2) parentNodeObj.insertBefore(newNodeObj, targetNodeObj);首先找到两个节点的共同父节点，然后把新节点插入到目标节点的前面。targetNodeObj.parentNode属性值就是它的父元素节点。在DOM里，元素节点的父节点必须是另一个元素节点，所以属性节点和文本节点的子节点不允许是元素节点。但是document除外，document的parentNode返回null。该方法返回指向新增子节点的指针。该方法也同appendChilde一样可以用来移动元素。

    3) DOM没提供insertAfter()方法，不过可以这样：

function insertAfter(newNodeObj, targetNodeObj){
    var parent = targetNodeObj.parentNode;
    if(parent.lastChild == targetNodeObj){
      parent.appendChild(newNodeObj);
    }else{
      parent.insertBefore(newNodeObj, targetNodeObj.nextSibling);
    }  
}

16.

<blockquote cite="http://hackooo.blogbus.com">
  <p>
    text
  </p>
</blockquote>

blockquote和p的结束标签中间还有一个换行符，有的浏览器会把这个换行符解释为一个文本节点，这样，这里的p标签就不是blockquote标签的最后一个子节点了。解决办法是用getElementByTagName("*");获得blockquote的所有子元素节点对象，然后取它的最后一个。
17.标签的accesskey属性，可以把某个元素与键盘的某个按键关联在一起。(html5不支持)

18.elementObj.style属性是一个对象。elementObj.style.color颜色，而要读取像font-family这样的属性，由于javascript不允许像elementObj.style.font-family这样读取，横杆被理解为减号了，DOM的解决办法是elementObj.style.fontFamily，驼峰名字读取，不管有多少个连字符，都采用驼峰命名。但是用外部样式表里声明的样式信息不会进入style对象，style对象只包含在标签中的style属性声明的样式信息。但是用DOM设置样式信息，就可以用DOM再把它们检索出来。

19.有时，DOM对样式属性的检索结果与它们的css设置值会采用不同的计量单位。例如color属性，在某些浏览器里，color属性返回的是一个RGB颜色值。
20.许多DOM属性是只读的，例如previousSibling,nextSibling,parentNode,firstChild,lastChild。但是style对象的各个属性都是可读写的。

21.获取节点的下一个元素节点

function getNextElement(node){
  if(node.nodeType == 1){
    return node;
  }
  if(node.nextSibling){
    return getNextElement(node.nextSibling);
  }
  return null;
}

22.在现在的大多数浏览器里，对css的伪类支持还有不足。

23.修改元素的样式，与其使用DOM直接设置或修改，不如通过javascript去刷新（替换或者追加）这个元素的class属性。

function addClass(elementObj, class){
    if(elementObj.className){
      var newClassName = elementObj.className;
      newClassName += " ";
      newClassName += class;
      elementObj.className = newClassName;
    }else{
      elementObj.className = class;
    }
}

24.使用link标签链入外部css文件与用style标签中使用@import url();链入外部css文件有什么不同没？

25.用javascript与DOM控制元素从一个点到另一个点移动，速度由快到慢，一个简单的思路：每次移动从起点到终点的1/10,并不断刷新起点的值。

26.css分块：布局，颜色，字体分开。

27.css布局中，*{padding:0;margin:0;}，可以去掉不同浏览器的默认设置。

28.当XHTML代码不在你爹控制范围内时，才应该考虑基于javascript的解决方案。

29. label标签的for属性可以把一条文本与某个表单字段关联在一起。这对于一些屏幕读取软件特别有价值。许多浏览器会为label元素创建一个默认的行为：如果用户点击了label元素所包含的文本，与之相关联的字段就会获得输入焦点，并等待用户输入数据。但并非所有浏览器都实现了这个行为，可以自己写个简单的javascript实现这个行为。

30.表单元素对象的defalutValue保存着该元素的初始值。

31.onfocus事件可以用鼠标触发，也可以用Tab键触发。

32.网页设计思路：结构层（X）HTML，表示层CSS，行为层javascript+DOM。

33.DOM一些方法：

  1)  复制：refrence = node.cloneNode(deep),参数决定是否深层复制。文本节点是元素节点的子节点，但是属性节点不是。

  2)  删除：refrence = node.removeChild(childNode);该方法返回被删除的节点的指针，被删除的节点的子节点也一并被删除。

  3)  替换：refrence = node.replaceChilde(newChild, oldChild),oldChild必须是父节点的子节点，该方法返回被替换的节点的指针。

  4)  查询：boolvalue = node.hasChildNodes,查询给定元素是否有子节点，对于属性节点和文本节点，该方法返回false。

34.DOM一些属性：

  1) nodeType:

      1.ELEMENT_NODE,

      2.ATTRIBUTE_NODE,

      3.TEXT_NODE,

      4.CDATE_SECTION_NODE,

      5.ENTITY_REFRENCE_NODE,

      6.ENTITY_NODE,

      7.PROCESSING_INSTRUCTION_NODE,

      8.COMMENT_NODE,

      9.DOCUMENT_NODE,

      10.DOCUMENT_TYPE_NODE,

      11.DOCUMENT_FRAGMENT_NODE,

      12.NOTATION_NODE

  2) nodeValue：1.元素节点：返回null,2.属性节点返回该属性值,3.文本节点返回该文本节点的内容。

  3) nextSibling,previousSibling,

      firstChild,lastChild,

      parentNode,childNodes,

      nodeName,nodeType,nodeValue.