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

第一章

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

第二章

数据类型

  • Js是一种弱类型语言,弱类型语言是指声明变量的时候不需要指定变量的类型,强类型语言需要指定,比如C/C++就是强类型的。

  • 声明变量使用var关键字。

  • JS不用提前声明变量,赋值语句会自动声明变量,但是不推荐这么做,最好提前声明。

  • 在字符串中用反斜线\来转义。

  • 主要有五种简单数据类型StringNumberBooleanUndefinedNull和一种复杂数据类型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]
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容

  • 前言 归根结底,代码都是思想和概念的体现。没人能把一种程序设计语言的所有语法和关键字都记住,可以查阅参考书来解决。...
    朱细细阅读 2,913评论 4 14
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock阅读 3,370评论 2 36
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,752评论 0 8
  • 遇见夏小姐之前,我从未想过结婚这件事情。 我对夏小姐说:“和你在一起,就是我人生中最后一段爱情了。” 她不置可否,...
    江凌阅读 2,648评论 24 89
  • 文|峰语 我本来就是孩子 所以我要用孩子的单纯去爱 不是说说而已
    代峰语阅读 210评论 0 1