JavaScript DOM 编程艺术笔记(1章-3章)

2016-07-25 本文已影响29人小毛同学

第一章

JavaScript起源于Netscape于微软的浏览器大战时期，由Netscape与Sun公司合作开发
DOM是一套对文档内容进行抽象和概念化的方法。
一开始，各家浏览器厂商都有各自的一套DOM标准，后来由W3C结合各家优点推出一套新的DOM标准，目前基本所有浏览器都对这套DOM标准有这很好的支持。

第二章

数据类型

Js是一种弱类型语言，弱类型语言是指声明变量的时候不需要指定变量的类型，强类型语言需要指定，比如C/C++就是强类型的。
声明变量使用var关键字。
JS不用提前声明变量，赋值语句会自动声明变量，但是不推荐这么做，最好提前声明。
在字符串中用反斜线\来转义。
主要有五种简单数据类型String，Number，Boolean，Undefined，Null和一种复杂数据类型Object。
各个数据类型的存储形式。
各个数据类型的存储形式
原始类型（primitive type）：存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。如数字（Number）、字符串（String）、布尔（Boolen）、Null、Undefined。
引用类型（reference type）：存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存处。引用类型就是对象，比如 Object，Number、String，Boolen，Date、Array 等等。

数组

数组是一个变量表示一个值的集合，其中每个值都是这个数组的一个元素。

声明数组的方法：

  var arr = Array(3);
  var arr = Array();//不指明数组大小
  var arr = Array("one", "two", "three");//声明的同时赋值

关联数组：

  var lennon = Array();
  lennon["name"] = "John";
  lennon["year"] = 1940;

对象

对象也是用一个值表示一组值，对象的每个值都是它的一个属性。
JavaScript中的变量都是某种类型的对象。

对象使用点号获取属性和函数：

  Object.propertyName;
  Object.functionName();

实例是对象的具体个体。
使用new关键字为对象创建新实例：
```
  var jeremy = new Person();
```
内建对象： JavaScript中预先定义好的对象，比如Array,Date,Math
宿主对象：由运行环境事先定义好的对象，在web应用里，运行环境就是指浏览器。包括Form,Image,Element,document等。

操作

使用加号拼接字符串或变量：

  var message = "hello " + "world" //hello world;
  
  var who = "world";
  var message = "hello " + who;

数值和字符串拼接,结果会是一个更长的字符串：
```
  var value = "10" + 20; //结果为"1020"
```

比较操作符号

执行相等操作的时候，建议使用"==="代替"==",会执行严格比较,会同时比较值和类型。
不等操作符"!="用"!=="代替，原因同上。

函数

变量作用域
1. 全局变量：一旦声明可以在脚步的任何位置访问。
2. 局部变量：只能在声明它的那个函数内部访问（需要用var关键字在函数内部声明）。

第三章 DOM

DOM

DOM 中的 D: document，具体到前端就是我们编写的网页文档
DOM 中的 O: object，就是第二章中提到的对象，有用户定义对象，内建对象，宿主对象
window 对象: 对应着浏览器窗口本身，这个对象的属性和方法统称 BOM （浏览器对象模型）
DOM中的M: Model-模型，代表某种事物的表现形式，DOM 把文档表示为一颗树的形式（数学意义上的树，类似家谱树），这里称为“节点树”：
文档树

节点

节点：网络术语，表示网络中的一个连接点，在 DOM 中表示文档树上的树枝和树叶。
元素节点：指文档中的各种元素，如<body>,<p>等，<html>为根元素。
文本节点：各种元素包围着的文本内容，比如<p>Hello world</p>中的这个“Hello world”。
属性节点：对元素进行描述的属性，比如大部分元素都有的title属性。
三种节点
获取元素,有三种方法
1. getElementById ，根据给定的 ID 返回特定的元素节对象点，是 document 对象特有的函数
```
 document.getElementById("id");
```
2. getElementByTagName，根据给定的标签名返回对象数组，每个对象对应文档里面有此标签的一个元素，可以使用通配符“*”来返回文档里的所有元素。
```
 document.getElementByTagName("h1")
```
3. getElementByClassName，HTML5 加入，跟 getElementByTagName 类似，返回一个对象数组，可以一次给定多个class name，以空格分隔，顺序无关。
```
 document.getElementByClassName("class1 class2");
```

对于不支持getElementByClassName的较老的浏览器，可以自己实现一个：

  function getElementByClassName(node, classname) {
      if (node.getElementsByClassName) {
          //使用现有方法
          return node.getElementsByClassName(classname)
      } else {
          var results = new Array();
          var elems = node.getElementsByTagName("*");
          for (var i = 0; i < elems.lenth; i++) {
              if (elems[i].className.indexOf(classname) != -1) {
                  results[results.length] = elems[1i];
              }
          }
          return results;
      }
  }

获取和设置属性

getAttribute函数用于获取属性
1. 只有一个参数--打算查询的属性名字；
2. 只能通过元素节点对象调用；
3. 如果没查询到对应属性，返回null。
```
    object.getAttribute(attribute);
```
setAttribute函数用于设置属性，也只能通过元素节点对象调用：
```
  object.setAttribute(attribute, value);
```

事件处理函数

在特定事件发生时调用特定的 JavaScript 代码。
有很多种事件处理函数，比如onmouseover,onmouseout,onclick等。
```
  event = "JavaScript statement(s)"；
```
JavaScript代码包含在一对引号直接，这对引号之间可以放置多个 JavaScript 语句，用“;”隔开就行：
```
  onclick = "showPic(this)";//this表示当前对象
```
在事件处理函数被触发之后，引号之间的 JavaScript 语句被执行，被调用的语句可以给这个事件处理函数返回一个值。返回true代表这个事件被触发了，false代表没有触发，利用这点，可以拦截一些默认事件,比如下面这个链接，点击之后由于返回的是false,浏览器认为这个事件没有被触发，所以不会发生跳转。
```
  <a herf="http://www.example.com" onclik="return false;">Click me</a>
```

一些常用属性

childNodes属性：用于获取任何一个元素的所有子元素，是一个包含这个元素所有子元素的数组（子元素除了元素节点还包括很多其他节点）。
nodeType属性：获取一个节点的节点类型，节点类型是通过数字表示：
- 1代表元素节点；
- 2代表属性节点；
- 3代表文本节点。
nodeValue属性：用于获得一个节点的值,一般元素节点的值是null，文本节点的值是它里面的文本内容。
firstChild属性：获得一个节点的第一个子节点，等同于childNodes[0]。
lastChild属性：获得一个节点的最后一个子节点，等同于node.childNodes[node.childNodes.length-1]。

JavaScript DOM 编程艺术笔记(1章-3章)

第一章

第二章

数据类型

数组

对象

操作

比较操作符号

函数

第三章 DOM

DOM

节点

获取和设置属性

事件处理函数

一些常用属性

猜你喜欢

热点阅读