首页 > 编程语言 > 详细

《Javascript DOM编程艺术》学习笔记 第1-6章

时间:2020-02-28 17:18:56      阅读:67      评论:0      收藏:0      [点我收藏+]

 

第1章 Javascript简史

Javascript是Netspace公司与Sun公司合作开发的,Javascript 1.0版于1995年推出。

 

为与微软公司竞争,Netspace公司和Sun公司联合ECMA制定了Javascript标准,因此Javascript有另一个名字:ECMAScript。

 

DOM是一套对文档内容进行抽象和概念化的方法。个人理解,就是浏览器把每一个加载的网页视作一个实例化的DOM类型对象,DOM相当于C++/Java中的class类,该class有一些数据成员/字段和成员函数/方法,我们可以通过成员函数/方法来访问和操作这个实例化的DOM对象。

 

浏览器开发商(Netspace、微软等)在1998年与W3C完成了第一版的DOM通用标准制定(大致可以视作大家统一了成员函数/方法API接口)。

 

第2章 Javascript语法

Javascript代码通过放在HTML的script标签中来引用,一种是直接内嵌,如下:

<script>
your javascript code
</script>

另外一种是分离风格,如下:

<script src="script_file.js"></script>

Javascript脚本运行不需要在浏览器和操作系统里面安装任何软件或插件。浏览器能够直接识别并解析Javascript脚本,因为现代浏览器都内置有解释引擎(不支持Javascript的浏览器赶紧卸载了)

 

Javascript语法风格和C系很接近。分号分割语句(可省略),花括号表示语句块。使用和C/C++/Java相同风格的单号注释(//)和多行注释(/* */)

变量声明和上述静态类型语言不同,不需要指定类型,同一变量可以接受不同类型的值。

虽然Javascript声明变量不需要明确指定类型,但是不代表Javascript没有数据类型,其还是存在基本类型。如数值类型、字符串类型、布尔类型。

Javascript中也有数组和对象。

Javascript还有很多的操作符:算术操作符(+, - , *, /, ++, --)、位运算符、赋值运算符、比较运算符、逻辑运算符等。

Javascript也提供条件语句(if)、循环语句(for、while、do while)。

运算符和功能语句基本同C系语言。

 

Javascript函数的定义使用关键词 function,并且不需要声明返回值(因为Javascript不需要说明变量的类型)。同样地,参数只需参数名,无需参数类型。

Javascript中的变量一样存在作用域,分为全局作用域和局部作用域。

Javascript中的对象也是有数据成员和成员函数的,它们在Javascript中的术语称呼为属性(property)和方法(method)。Javascript的对象通过new关键字来实例化得到。

 

第3章 DOM

D:表示document,就是表示浏览器加载的那个HTML页面。

O:表示object,就是HTML页面中一个个对象。

M:表示model,我的理解是结构和关系,也即各个对象间如何组织构成。

 

节点

浏览器加载得到的HTML页面可以视作一棵树,下面是我从 https://segmentfault.com/a/1190000010721007 抄过来的一个说明图:

技术分享图片

 

从上面的图可以看出,一个HTML树有3种类型节点,一种是元素(标签)节点,一种是属性节点,还有一种是一些文本内容,这种是文本节点。但是根据最新的W3C标准,属性已经不再算是节点。

关于文本节点的演示如下:

1 <p>
2 this is a paragraph
3 <span> some text </span>
4 <p>

上述代码段中第2行是一个文本节点,它在p元素节点下面,但是第3行中的文本并不是p元素节点的文本节点,因为它被包含在span标签中,它是span标签的文本节点。

 

获取元素

在DOM中有3种方法可以获取元素,第一种是通过元素的 id 属性标记,第二种是通过 class 属性标记,第三种则是通过标签的名字。

id 属性获取:getElementById(id)  id唯一,因此返回值唯一

class 属性获取:getElementsByClassName(class)  class可重复使用,返回值是数组

标签名获取:getElementsByTagName(tag)  标签可重复使用,返回值是数组

 

获取和设置属性(仅支持元素节点,只有元素节点有属性)

属性获取:getAttribue(dst_attr)

属性设置:setAttribue(dst_attr)

《Javascript DOM编程艺术》学习笔记 第1-6章

原文:https://www.cnblogs.com/pluse/p/12377816.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!