首页 > 网站 > WEB开发 > 正文

【读书笔记】JavaScript DOM编程艺术

2024-04-27 14:17:18
字体:
来源:转载
供稿:网友

【读书笔记】javaScript DOM编程艺术

2014-10-31 15:26 by Paranoid江凯, ... 阅读, ... 评论, 收藏, 编辑

参考:Javascript cheat sheet

javascript-cheat-sheet-v1

一:JavaScript简史/语法

image

1:JavaScript有什么不同?

  • 一个完整的JavaScript实现是由以下3个不同部分组成的:核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM
  • 程序设计语言分解释型和编译型两大类,js是由浏览器解释的解释型语言。
  • javascipt语句只要放在不同的行上,浏览器就能识别,但我们建议在每条语句的末尾加一个分号来隔开它们。
  • javascipt可以用c的两种风格的注释。也可以用<!--注释,但此时不同于HTML中<!—>的注释方式,不要求闭合标签,不可跨越多行
  • javascript允许直接对变量赋值而无需提前声明(实际上赋值操作自动对该变量进行了声明,所以为了良好的编程习惯,我们最好先声明再使用(提高效率的做法是同时声明并赋值),用var关键字声明变量。
  • javascript中的标识符是区分大小写的

2:javascript数据类型

javascript是一种弱类型的语言,即javascipt在声明变量的时候不需要对其进行类型声明。但我们仍可将其分为几种常见数据类型:

  • 1:字符串(被单双引号包含效果一样,但请在同一个文本中保持一致风格),js同样有和c一致的转义字符表。
  • 2:数值:正负,整形,浮点型
  • 3:布尔值:true false
  • 4:数组

字符串,数值,布尔值都是标量(scalar),标量在任意时刻只能有一个值,如果想用一个变量来存储一组值,就需要使用数组。

在js中数组用关键字Array来声明,声明的同时还可以指定数组的初始元素个数,也就是这个数组的长度。

js特殊的地方在于声明时也可以不指定数组长度,同c数组的初始下标也是0。

甚至可以不精确表明我们是在创建数组,用方括号把各个元素的初始值括起来就可以了。

数组元素的值可以是变量也可以是另一个数组的元素等等,数组也可以包含其他的数组(多维数组)

  • 关联数组:
var lennon = Array();lennon[“name”] = “John”;lennon[“year”] = 1940;lennon[“living”] = false;

这样的数组叫做关联数组,由于可以使用字符串来代替数字下标,因此代码更具有可读性。但是这种用法并不是一种好习惯。

本质上在创建关联数组时,你创建的是Array对象的属性,在js中所有的变量实际上都是某种类型的对象,比如一个布尔值就是一个Boolean类型的对象,一个数组就是一个Array类型的对象。在上面这个例子中,你实际上是给lennon数组添加了name,year,living三个属性,理想情况下,你不应该修改Array对象的属性,而应该使用通用的对象。

与数组类似,对象也是使用一个名字表示一组值,对象的每个值都是对象的一个属性。比如上例的数组可以创建成下面这个对象:

var lennon = Object();lennon.name = “john“;lennon.year = 1940;lennon.living  = false;

创建对象还有一种更简洁的语法:

var lennon = {name:”john“,year:1940, living:false};

用对象来代替传统数组的做法意味着可以通过元素的名字而不是数字下标来引用它们,着大大提高了脚本的可读性。

3:操作符

操作符:加,减,乘,除,自增,自减,赋值,组合运算符+=

三元操作符 variable = condition ? if true : if false

js中也可以用+直接完成对字符串连接

条件语句同c,比较操作符也同c

image

image

image

image

逻辑操作符:与,或,非,同c语言

4:循环

  • while循环:
while(condition){statements;}

关键是在while循环的内部必须发生一些会影响到循环控制条件的事情,而这将导致循环控制条件在经过有限的若干次循环后终将不满足而结束循环

  • do…while循环
do{statement;}while(condition);//直到condition不成立结束循环
  • 变体for循环
for(initial condition; test condition; alter condition){statements;}

5:函数

函数:如果需要多次使用同一段代码,可以把它们封装成一个函数。良好的编程习惯应该先对函数做出定义再调用它们。函数可以避免重复输入相同的脚本,但函数的真正威力在于可以给函数传递不同的参数(argument)。此外,定义函数应该注意变量的作用域问题。本书建议变量使用下划线法命名,函数使用驼峰命名法,以快捷的将其区分。

6:对象

对象是自包含的数据集合,包含在对象里的数据可以通过两种形式访问,属性(PRoperty)和方法(method)。

  • 属性是隶属于某个特定对象的变量
  • 方法是只有某个特定对象才能调用的函数

给对象创建一个新实例需要使用关键字new

  • 内建对象(native object):有javascript提供的,如Array,Date,Math
  • 宿主对象(host object):由javascript的运行环境(浏览器)提供的,如Form,Image,Element,document,我们可以通过这些对象获得关于网页上表单图像和各种表单元素等信息

最好的做法是把<script></script>标签放到HTML文档的最后,</body>标签之前,这样能使浏览器更快的加载页面

二:DOM

1:文档对象模型

  • BOM:在javascript的最初版本里,对编写脚本来说非常重要的一些宿主对象就已经可用了,它们当中最基础的对象就是window对象。window对象对应着浏览器窗口本身,这个对象的属性和方法统称为BOM(Browser Object Model)
  • DOM(Document object model): DOM把一份文档表示为一棵树,使用parent,child,sibling来表示成员之间的关系。

2:节点

文档是由节点构成的集合,此时的节点是文档树上的树枝和树叶

  • 元素节点(element node)
  • 文本节点(text node):文本节点总是被包含在元素节点的内部
  • 属性节点(attribute node)

有三种DOM方法可以获取元素节点

  • getElementById(“id”) id必须用单或者双引号包括,这个方法将返回一个与那个有着给定id属性值得元素节点对应的对象,这个对象对应着文档对象里的一个独一无二的元素。可以用typeof操作符来验证操作数是一个字符串,数值,函数,布尔值,还是对象
  • getElementByTagName(“tag”) 返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。即使在整个文档里这个tag只有一个元素,也会返回一个数组。getElementByTagName(“*”)允许把一个通配符作为它的参数

注:通常将document.getElementByTagName(“tag”)赋值给一个变量来避免代码变得难以阅读

  • getElementByClassName

注:这个方法是在HTNL5DOM中新增的,可能并没有被广泛支持。这个方法可以查找带有多个类名的元素,要指定多个类名,只要在字符串参数中用空格分隔类名即可

在不支持这个方法的浏览器中我们可以利用已有的DOM方法来实现自己的getElementBClassName()

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

3:获取和设置属性

  • object.getAttribute(“attribute”)

getAttribute方法不属于document对象,所以不能通过document对象调用,它只能通过元素节点对象调用。

  • object.setAttribute(“attribute”,”value”)

注意:通过setAttribute对文档做出修改之后,并不会反映在文档本身的源代码里,这种表里不一的现象源自DOM的工作模式:先加载文档的静态内容在动态刷新,动态刷新不会影响文档的静态内容。

  • DOM还提供了其他的属性和方法:nodeName, nodeValue, childNodes, nextSibling,,parentNode

三:相册实例

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8"/>    <title>Image Gallary</title></head><body>    <h1>Snapshots</h1>    <ul>        <li>         <a href="images/fireworks.jpg" onclick="showPic(this); return false;" title="A fireworks display">Firework</a>        </li>        <li>            <a href="images/coffee.jpg" onclick="showPic(this); return false;" title="A cup of black coffee">Coffee</a>        </li>        <li>            <a href="images/rose.jpg" onclick="showPic(this); return false;" title="A red, red rose">Rose</a>        </li>        <li>            <a href="images/bigben.jpg" onclick="showPic(this); return false;" title="The famous clock">Big ben</a>        </li>        <img id="placeholder" src="images/placeholder.gif" alt="my image gallery"/>    </ul><script type="text/javascript" src="script/showPic.js"></script></body></html>
  • elements.childNodes
childNodes属性:在一棵节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组
//将下面这个小函数添加到showPic.js文件function countBodyCchildren(){    var body_element = document.getElementByTagName("body")[0];    al
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表