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

2,876
《JavaScript DOM 编程艺术》读书笔记
  • 4.20 / 5 5
4.20分(5票)
《JavaScript DOM 编程艺术》读书笔记

作为JavaScript的入门书籍,之前一直没去看,实是惭愧。以前自己几乎没有系统去学JavaScript ,技能非常渣渣,so 从头开始。下面是读书笔记,写完后发现这本书内容挺少的,但要是问真正掌握了没有?呵呵。

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

杂七乱八,不一定来自原文

一:简介

  • BOM:浏览器对象模型

  • W3C对DOM的定义是:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。

二:语法

  • 程序设计语言:解释型(js)、编译型(c++/java)

  • 数据类型(typing)

弱类型,强类型:是否必须对数据类型做出声明,js毫无疑问是弱类型

字符串、数值、布尔值、数组、关联数组

  • 对象(object):自我包含数据集合,对象中得数据可以通过属性(property)和方法(method)访问。

javaScript 中的对象分为三种类型:
用户定义的对象(user-defined object);
内建对象(native object)内建在JavaScript语言里的对象,如Array、Math和Date等;
宿主对象(host object)由浏览器提供的对象。

三:DOM

  • DOM:Document Object Model(文档对象模型)

‘M’:model–>map 图谱

  • 节点(node):元素节点(element node)、文本节点、属性节点

  • 基本操作:getElementById 返回对象,getElementsByTagName返回对象数组;getAttrubutesetAttrubute属性相关.

四:实例研究:JavaScript 美术馆

  • childNodes 属性:获取任何元素的所有子元素数组;

  • childNodes 属性:获取任何元素的所有子元素数组;

  • nodeType 的属性值:元素节点:1;属性节点:2;文本节点:3;

  • nodeValue 属性:改变一个文本节点的值,node.childNodes[0].nodeValue
    firstChild,lastChild 属性:

五:JavaScript 编程原则和良好习惯

  • HTML 中通过 javascript: 伪协议调用JavaScript代码做法不好;

  • window.open(url,name,features) :创建新的浏览器窗口;

  • 循序渐进、平稳退化、向后兼容性、分离js、浏览器嗅探技术(browser sniffung)(不清楚是什么)

六:案例研究:JavaScript 美术馆改进版

  • 把多个JS函数绑定到onload事件处理函数上:addLoadEvent();

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    function addLoadEvent(func){
         var oldonload = window.onload;
         if (typeof window.onload != 'function'){
              window.onload = func;
         }else{
             window.onload = function(){
                  oldonload();
                  func();
             }
         }
       }
  • onclick、 onkeypress(谨慎)

七:动态HTML 内容

  • innerHTML 属性:

    1
    2
    3
    4
    5
    
     
      window.onload = function() { 
      var testdiv = document.getElementById("testdiv"); 
      testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>"; 
      }
  • DOM的方法:

createElement:创造一个元素节点

createTextNode:创造一个文本节点

appendChild:将节点插入某元素中

  • insertBeforeinsertAfter(未提供)

    1
    2
    3
    4
    5
    6
    7
    8
    
      function insertAfter(newElement,targetElement) { 
      var parent = targetElement.parentNode; 
      if (parent.lastChild == targetElement) { 
      parent.appendChild(newElement); 
      } else { 
      parent.insertBefore(newElement,targetElement.nextSibling); 
      } 
      }
  • 八:充实文档内容

上章延伸

  • 九:CSS-DOM

  • Styling elements in the node tree(在结点树中进行样式设置)

  • Repetitive styling(重复性的样式设置)

  • Responding to events (响应特定事件的样式改变)

  • className 属性;

十:javascript 动画效果

  • setTimeoutclearTimeout

暂时木有评论啊,等您坐沙发呢!

打破沉默,我来发表评论鸟~