JavascriptDom编程艺术笔记

第一章 Javascript简史

DOM: DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。
DOM: DOM 本身像是一颗树的结构
DHTML: DHTML(Dynamic HTMl)是HTML/XHTML、CSS、Javascript相结合的产物

第二章 Javscript 语法

第三章 DOM

在HTML引用JavaScript脚本:

1
2
3
<script type="javascript">
    alert("Hello world");
</script>

或者在head里面应用外部js文件:

1
<script src="main.js" type="javascript"></script>
  1. DOM中的D就是document
  2. DOM里的O就是Object(Javascript语言里的方法)
    Javascript 语言的对象可以分为三种类型：
    1. 用户定义对象(user-defined object): 由程序员自行创建的对象
    2. 内建对象(native object): 内建在Javscript里面的对象
    3. 宿主对象(host object): 由浏览器提供的对象

      window对象对应着浏览器窗口本身，这个对象的属性和方法成为BOM(浏览器对象模型)

  3. 节点(Node)
    DOM树就是由节点构成的,<HTML>是根节点
    1. 元素节点(element node)
      DOM的原子是元素节点(element node),像<body> <ul> 这种都是元素节点
    2. 文本节点(text node)
      <p>Inside html</p>
      里面的 Inside html就是文本节点
      <p>Inside <em>html</em></p>
      里面Inside才是文本节点
    3. 属性节点(attribute node)
      <p title=”t”> Inner html </p> title=”t”
      就是一个属性节点
  4. 一些基本的使用方法
    1. typeof
      使用typeof可以返回该元素的类型(字符串、数值、函数、布尔值、对象)
    2. getElementById(id)
      方法返回一个与那个有着给定id属性值的元素节点相对应的对象。

      getElementById 只返回一个对象，因为html里面id唯一

    3. getElementsByTagName(tag)
      方法返回一个对象数组，每个对象分别对应着document里tag的元素
    4. getAttribute(attName)
      方法返回attName属性的值
      比如: 返回img元素里src属性的值
       document.getElementById("img").getAttribute("src");
    5. setAttribute(attName, attValue)
      方法设定给定元素给定属性的值
      比如: 把img元素里src属性值设定为”icon.jpg”
       document.getElementById("img").setAttribute("src", "icon.jpg");

第四章：Javascript美术馆

  1. 有些时候可以不用setAttribute
    比如要改变某个元素的value属性，可以:
     element.value = "the new value";
    比如要改变某个元素的src属性，可以:
     element.src = "the new source";

    setAttribute的优势在于可以对文档中的任意属性来做出修改，而不是每个属性都可以用元素的属性来读。
    document.body也可以方便地选择body节点

  2. 在HTML里面可以用属性值来设定事件
     <a href="#" onclick="return false;">Click me</a>
    在Onclick时间里面返回false,表示这个链接没有被点击,返回true,表示这个链接被点击了
    在这个情况下，如果点击这个链接的话，会没有任何反应
  3. childNodes返回一个节点的子节点（数组）
    文本节点、属性节点都是这个节点的子节点
  4. nodeType
    获取一个节点的nodeType属性:
     element.nodeType
    nodeType总共有12种可取值，但是仅有3种具有使用价值
    • 元素节点的nodeType属性值是1
    • 属性节点的nodeType属性值是2
    • 文本节点的nodeType属性值是3
  5. nodeValue
    如果要改变某个文本节点的值，就要使用nodeValue属性
    获取一个节点的nodeValue属性：
     element.nodeValue
  6. firstChild和lastChild
    使用firstChild和lastChild不仅更加简短，还更加具有可读性