JavaScript DOM 编程艺术 学习笔记01

230 阅读5分钟

JavaScript DOM 编程艺术 01

网站查了JavaScript的学习书籍,最终选择了这本JavaScript DOM 编程艺术(第二版),没办法,三水校区的图书馆只能借到第二版的。 大概看了四分之一吧,我大概把我学习过程中的一些个人认为比较关键的信息记录下来,毕竟很多语法和以前学过的语言相同,这部分就不再多说

弱类型语言

JavaScript是一种弱类型语言,无需声明变量类型,我目前接触过的弱类型语言有JavaScript和Python,强类型语言有C,Java

数组声明

var beatles = new Array(length);
var beatles = new Array();  //不要求一定要声明元素个数
array[index] = element;  //赋值语句

数组可以包含其他数组,数组中的任何一个元素都可以把一个数组作为它的值

var lennon = new Array("John",1940,false);
var beatles = new Array();
beatles[0] = lennon;

现在,beatles数组的第一个元素的值就是另一个数组,此时想获得lennon数组的值我们可以通过使用更多的中括号,beatles[0][0]的值就是"John"。

关联数组

当我们不得不去记住数组的每个下标数字代表的含义的时候,JavaScript给出了一种更好的方式可以让我们去以更可读的方式去填充数组。 我们通过在填充数组时为每一个新元素明确地给出下标的方式来改变这种默认的行为,在为新元素给出下标的时候,不必局限于整形数字,数组下标可以是字符串:

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

变量拼接

var year = 2005;
var message = "The year is "+year;

如果把字符串和数值拼接在一起,结果将是一个更长的字符串。数值将会自动转换为字符串。

创建函数无需声明函数类型,一致用function声明

function name(arguments){
    statements;
}

变量的作用域

变量既可以是全局的,也可以是局部的,在讨论全局变量和局部变量之间的区别时,我们其实是在讨论变量的作用于(scope)。

全局变量VS局部变量, 区别在于变量声明是否使用关键字var

var tatal=num*num;  //局部变量
tatal = num*num;  //全局变量

对象与实例

实例的创建:

var ben = new Preson;

对象包括有用户定义对象,内建对象(JavaScript提供),宿主对象。 用户定义对象暂时还没有讲到。 内建对象是JavaScript预先定义好的一系列对象。数组就是一种JS内建对象。当我们用new关键字去初始化一个数组的时候,其实就是在创建一个Array对象的新实例。

var beatles = new Array();

当需要了解某个数组有多少个元素的时候,我们利用Array对象的length属性来获得这一信息。

beatles.length;

JS内建对象其他包括Math对象和Date对象,它们分别提供了很多非常有用的方法供人们与数值和日期打交道。例如,Math对象的round方法可以吧十进制数值舍入为一个与之最接近的整数。

var num = 7.561;
var num = Math.round(num);
alert(num);

宿主对象不是由JS语言本身而是由它的运行环境提供的。具体到web应用,这个环境就是各种浏览器。由web浏览器提供的预定义对象被成为宿主对象。 宿主对象主要包括Form、Image和Element。我们可以通过这些对象获得关于某给定网页上的表单、图像和各种表单元素的信息。

DOM

DOM是document object model(文档对象模型)的首字母缩写

把网页中的元素表示为一颗节点树

节点

文档也是由节点构成的集合

元素节点

DOM的原子是元素节点
元素可以包含其他的元素。事实上,唯一没有被包含在其他元素里的唯一元素是<html>元素,它是我们节点树的根元素。

属性节点

元素都或多或少地有一些属性,属性的作用是对元素做出更具体的描述。例如,几乎所有的元素都有一个title属性,而我们可以利用这个属性对包含在元素里的东西做出准确的描述:

<p title="a gentle reminder">Don't forget to buy this stuff. </p>

在DOM中title="a gentle reminder"是一个属性节点,因为属性总是被放在起始标签里,所以属性节点总是被包含在元素节点中。 并非所有的元素都包含这属性,但所有的属性都会被包含在元素里。

文本节点

<p>元素包含着文本"Don't forget to buy this stuff."

getElementById()和getElementsByTagName()和getAttribute()

getElementById()这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象 getElementsByTagName()方法将返回一个对象数组,注意是数组,

document.getElementsByTagName("li")

这个调用将返回一个对象数组,每个对象分别对应着document对象中的一个列表项(li)元素。 getAttribute()方法不能通过document对象调用,我们只能通过一个元素节点对象去调用它。
例如,你可以把它与getElementsByTagName()方法结合起来,去查询每个<p>元素的title属性:

var paras = document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++)
    alert()paras[i].getAttribute("title");