javascript DOM编程笔记

《JavaScript DOM编程艺术》是一本非常适合初学者看的书籍,这份笔记是我之前学习这本书的时候所记录的。只包含了1-6章的内容,涉及的是js的基本语法部分。

第一章:JavaScript简史

JavaScript的起源

    1. Netscape公司于Sun公司合作开发
    2. 1995年,JavaScript 1.0版出现在Netscaoe Navigator2浏览器中
    3. 微软推出IE3的时候发布了VBScript语言,同时以JScript为名发布JavaScript的一个版本
    4. Netscape和Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript语言进行了标准化。出现了ECMAScript语言,这是同一种语言的另一个名字
    5. 1996年,Netscape和微软公司在格子的第3版浏览器中不同程度的支持JavaScript 1.1语言
    6. 注:
      1. JvaScript与Sun公司开发的Java没有任何联系
      2. JavaScript最开始的名字是LiveScript,JavaScript倾向与只应用在Web浏览器

DOM

    1. DOM是一套对文档的内容进行抽象和概念化的方法
    2. JavaScript走起版本提供了查询和控制Web文档的某些实际内容(主页是图像和表单)
    3. 这种实验性质的初级DOM被称为“第0级DOM”(DOM Level 0)
    4. 在未形成统一的初期,“第0级DOM”常见用途是反转图片和验证表单数据
    5. Netscape和微软推出第四代浏览器以后,DOM陷入困境

浏览器战争

    1. Netscape Navigator4发布于1997年6月
    2. IE4发布与同年10月
    3. 两种浏览器都对早起版本进行了许多改进,大幅拓展了DOM,使能够通过JavaScript完成的功能大大增加
    4. 网页设计人员开始接触到新名次:DHTML

DHTML

    1. DHTML是“Dynamic Html”(动态HTML)的简称。
    2. DHTML不是新技术,是描述HTML、CSS JavaScript技术组合的术语
    3. DHTML背后的含义是
      1. 利用HTML把网页标记为各种元素
      2. 利用CSS设置元素样式和它们的显示位置
      3. 利用JavScript实时地操控页面和改变样式
    1. 利用DHTML,复杂的动画效果一下子变得非常容易实现
    2. 然而,NN 4和IE 4浏览器使用的是两种不兼容的DOM
//利用DHML实现复杂动画

//html代码
<div id="myelement"> This is my element </div>

//css代码
#myelement {
    position: absolute;
    left: 50px;
    top: 100px;
}

//接下来只需利用js改变myelement元素的left和top样式,就可以让它在页面上随意移动

制定标准

W3C结合两者的优点,推出一个标准化的DOM

1998年10月,完成了“第1级DOM”(DOM Level 1)

W3C推出的标准化DOM让任何一种程序设计语言对使用任何一种标记语言编写出来的任何一份文档进行操控

浏览器以外的考虑

    1. DOM是一种API(应用编程接口),API就是一组已经得到有关各方共同认可的基本约定
    2. W3C对DOM的定义是:“一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式”。

浏览器战争的结局

    1. 微软公司因为windows操作系统都预装了IE浏览器,从而战胜了Netscape
    2. 因为浏览器制造商的自私姿态,一个名为Web标准计划(简称WaSP)的小组出现
    3. WaSP鼓励浏览器制造商采用W3C制定和推荐的各项标准
    4. 下一代浏览器对WeB标准的支持得到了极大改善

崭新的起点

    1. Netscape Navigator消失
    2. 新一代浏览器陆续登台亮相
    3. 2003年,苹果发布Safari浏览器 (基于WebKit),坚定不移的遵循DOM标准
    4. WebKit是Safari和Chrome采用的一个开源Web浏览器引擎
    5. 以WebKit和Gecko(Firefox的核心)在促进微软Trident(IE的核心)等专有浏览器引擎逐步向Web标准靠拢方面起到积极作用

第二章:JavaScript语法

数据类型

  • 字符串
    1. 包括(但不限于)字母、数字、标点符号和空格
    2. 字符串必须包在引号里
    3. 反斜线对字符进行转义
//字符串声明
var mood = "happy";
//转义符
var mood' don\'t ask’;
  • 数值
    1. 不必限定数据类型
    2. js只有2中数值:整数与浮点数
//数值声明:
var age = 24;
var age = 33.3333;
  • 布尔值
    1. 两个可选值:true和false
    2. 布尔值!=字符串,不能用引号括起来
//布尔值声明
var sleeping = true;
  • 数组
    1. 不同与字符串、数值和布尔值等标量(标量:任意时刻只能有一个值)
    2. 数组是用数组存放一组值,用一个变量表示一个值的集合。
    3. 集合中的每个值都是这个数组的一个元素
//数组声明
var beatles = [ "John" , "Paul" , "George" , "Ringo" ];
  • 对象
    1. 同样是使用一个名字表示一组值
    2. 对象的每个值都是对象的一个属性
//对象声明
var lennon = {
  name: "John" ,    
  year:"1940" , 
  living:false };

条件语句

//if语句
if(condition){
  statements;
}

//if……else语句
//条件为真时执行
if(1>2){
alert(" The world gone mad! ");
}
//条件不成立时执行
else{
alert(" All well with the world ");
}

比较操作符

    1. >大于
    2. <小于
    3. >=大于等于
    4. <=小于等于
    5. =赋值
    6. ==不严格比较(比较值。类型不同会尝试转换类型)
    7. ===严格比较(比较变量的值,还有比较变量的类型)

逻辑操作符

操作对象是布尔值,每个逻辑照做返回一个true或false

&&与(并且)全真为真
\\ 或(或者)有真为真
非(取反)真变成假
//检查变量num是否在5~10之间  &&
if(num >= 5 && num <= 10){
    alert("这个数字在范围内。");
}

//检查变量是否在5~10的范围内 ||
if(num>10 || num< 5){
    alert("这个数字不在范围内。");
}

//检测变量是否在5~10的范围内
if(!(num>10) || !(num<5)){
    alert("这个数字在范围内");
}

循环语句

while循环

    1. 与if语句语法几乎完全一样
    2. 与if的区别:只要给定的条件是true,花括号的代码将反复执行
    3. 在内部必须发生以下影响循环控制条件的事情。在下例中,用“++”对变量值进行+1,不然将一直循环
//while例子
var count = 1;          //创建变量count,赋值为1
while (count < 11){       //只要变量count的值小于11,就重复执行花括号内容
    alert(" count ");           //执行10次弹窗
  count++;                          //对变量count进行加1操作,将重复执行10次
}                                               //这条循环语句执行完毕后,变量count的值为11

do……while循环

    1. 包含在循环语句内部的代码至少执行一次
    2. 与while循环的区别,对循环控制条件的求值发生在每次循环之后
    3. 即使循环控制条件的首次求值结果是false,包含在花括号的语句也至少执行一次
//do……while语法
do{
    statements;
}while (condition);

//while循环的例子改为do……while
var count = 1;
do{
    alert(count);
  count++;
}while(count < 11);     //执行结果与while一样:alert消息闪现10次,count的值为11

//例子变体
var count = 1;
do{
    alert(count);
  count++;
}while(count < 1); //条件永远不为true,但是花括号的部分依然执行了一次:一条alert信息,count值为2

for循环

    1. whlie循环的变体
    2. 循环控制结构更加清晰,与循环相关的内容包含在for的圆括号内
    3. 最常见的用法就是遍历某个数组的全体元素,需要用到array.length
//以上述例子举例,for语法
for(count=1; count<11; count++){
    alert("count");
   }

//循环遍历数组
var beatles = Array ("John","Paul","George","Ringo");
for(var count=0; count< beatles.length; count++){
        alert(beatles[count]);
    };          //运行代码,将有4条alert信息,分别对应数组中的4个字符串

函数

    1. 多次使用同一段代码,可以封装成一个函数
    2. 函数就是允许在代码中随时调用的语句
    3. 每个函数实际上是一个短小的脚本
    4. 先到函数做出定义再调用,养成良好的编程习惯
    5. 可以把不同的数据传递给函数,它们使用这些数据去奇迹预定的操作,传递给函数的数据称为参数
    6. 函数不仅能够接受函数,还能够返回数据(数值、字符串、数组、布尔值)
    7. 还可以把函数当作一种数据类型使用,可以把函数的调用结果赋给一个变量
//定义一个函数的语法
function name(arguments){
    statements;
}

//设立参数
function multiply(num1, num2){
    var total = num1*num2;
  alert(total);
}
multiply(10,2) //调用函数multiply,alert显示结果为20

//函数返回数据:华氏温度值返回同一温度摄氏温度值
function convertToCelsius(temp){    //接受参数华氏温度
    var result = temp - 32;                 //处理
  result = result / 1,8;    
  return result;                                    //返回摄氏温度值
}
var temp_fahrenheit = 95;           //定义华氏温度值
var temp_celsius = convertToCelsius(temp_fahrenhrit);   //把函数返回值赋值给temp_celsius
alert(temp_celsius);                        //获得转换结果

变量的作用域

    1. 全局变量:可以在脚本的任何位置被引用。全局变量的作用域是整个脚本
    2. 局部变量:只存在与声明它的那个函数内部。局部变量的作用域仅限于某个特定的函数
    3. 某个函数中使用了var,那个变量将被视为一个局部变量,只存在与上下文中
    4. 如果没有使用var,那个变量就将视为一个全局变量,如果脚本已经存在一个与之同名的全局变量,这个函数就会改变那个全局变量的值
//错误的使用全局变量
function square(num){
  total = num num;          //使用了一个和全局变量相同的变量名;未声明成局部变量
  return total
 }
var total = 50;                 //定义全局变量为50
var number = square(20);    //调用函数:把参数20传递给函数
alert(total);                       //此时的全局变量值被函数改为了400

//正确使用:把函数写成如下所示
function square(num){
    var total = num * num;
  return total;
}

对象

    1. 自包含的数据集合
    2. 包含在对象的数据可以通过两种方式访问——属性(peoperty)和方法(method):
      1. 属性是隶属于某个特定对象的变量
      2. 方法是只有某个特定对象才能调用的函数
    1. 对象就是由一些属性和方法组合在一起二构成的数据实体
    2. 在js中,属性和方法都使用“.”语法来访问:
      1. Object.property
      2. Object.method()

用户定义对象

由程序员自行创建的对象,该书未讨论

内建对象

js提供的预先定义好的对象,可以拿来就用的对象被称为内建对象:

    1. Array对象
    2. Math对象
    3. Date对象
    4. ……

宿主对象

不是js语言本身而是由它的运行环境提供的,具体的环境就是浏览器。由浏览器提供的预定义对象被称为宿主对象:

    1. Form对象
    2. Image对象
    3. Element对象

第三章:DOM

5个常用DOM方法

    • getElementById ——————返回一个对象,该对象对应着文档里的一个特定的元素节点
    • getElementsByTagName ————返回一个对象数组
    • getElementsByClassName ———— 返回具有相同类名的元素的数组。如果有多个类名,可以用空格分开
    • getAttribute ———— 获取元素的属性值。只能通过元素节点对象调用
    • setAttribute ———— 对属性节点的值做出修改,只能用于元素节点
//通过id获取
 var ID = getElementById("ID_name");

//通过标签名获取
var Tag = getElementsByTagName("Tag_name");

//通过类名获取
var ClassName = getElementsByClassName("Class_name");

//获取元素的属性值
var ID = getElementById("ID_name");         //通过id查找元素名,赋值给变量ID
var Title=ID.getAttribute("title");         //获取变量的的title属性,赋值给变量Title
alert(Title)                                        //弹出变量Title的值,如果没有设置title属性,值为空或null

//对属性节点做出修改
var ID = getElementById("ID_name");              //通过id查找元素名,赋值给变量ID
ID.setAttribute("title","a list of goods"); //为变量ID创建title属性,值为a list of goods”
//如果变量ID本身有title值,setAttribute会改变原来的值。
//但是在查看源码的时候依然是原来的值,因为DOM的工作模式是先加载静态内容,再动态刷新
//动态刷新被影响文档的静态内容
//DOM是对页面内容刷新却不需要在浏览器里刷新页面

节点

文档是由节点构成的集合,只不过此时的节点是文档树上的树枝和树叶而已。

在DOM中由许多不同类型的节点。也有很多类型的DOM节点包含着其他类型的节点。

元素节点

    1. DOM的原子是元素节点。
    2. 标签的名字就是元素的名字
    3. 元素可以包含其他元素。唯一没有被包含在其他元素的唯一元素是<html>,它是我们的节点树的根元素

文本节点

    1. 在XHTML文档里,文本节点总是被包含在元素节点的内部
    2. 但并非所有的元素节点都包含有文本节点

属性节点

    1. 属性节点用来对元素做出更具体的描述
    2. 所有的属性节点总是被包含在元素节点中
    3. 并非所有的元素都包含着属性

第四章:案例研究--JavaScript图片库

chilNodes属性

用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组:element.childNodes

//获取body元素的全体子元素
var body_elements = document.getElementsByTagName("body")[0];
body_elements.childNodes;

//用数组的length属性查询它所包含的元素的个数
body_elements.childNodes.length;

nodeType属性

    1. 每一个节点都有一个nodeType属性:node.Type
    2. nodeType的值是一个数字而不是像“element”或“attribute”那样的英文字符串
    3. nodeType属性共有12种可取值,其中仅有3种具有实用价值:
      1. 元素节点的nodeType的属性值是 1
      2. 属性节点的nodeType的属性值是 2
      3. 文本节点的nodeType的属性值是 3

nodeValue属性

使用nodeValue属性来得到(和设置)一个节点的值:node.nodeValue

//举例
<p>choose an inage</p>

//此时如果用nudewalue属性获取<p>的文本值,得到的并不是包含在这个段落里的文本
//使用P.nodeValue将返回一个null值。
//因为<p>本身nodeValue属性是一个空值,我们需要的是<p>元素包含的文本的值

p.childNode[0].nodeValue
//这个才是获取的文本的值

firstChild和lasChild属性

    1. childNode[0] === node.firstChild
    2. childNode[node.childNodes.length-1] === node.lastChild

第五章 最佳实践

平稳退化

  1. 让访问者在他们的浏览器不支持JS的情况下仍能顺利的浏览网站,基本的操作仍能顺利完成
  2. JS使用window对象的open()方法来创建新的浏览器窗口,有三个参数:window open(url,name,features)
    1. 第一个参数是想在新窗口里打开网页的URL地址。如果省略这个参数,屏幕将弹出一个空白的浏览器窗口
    2. 第二个参数是新窗口的名字。可以在代码里通过这个名字与新窗口进行通信
    3. 最后一个参数是一个以逗号分隔的字符串,其内容是新窗口的各种属性
      1. 新窗口的尺寸(宽度和高度)
      2. 新窗口被启用或禁用的各种浏览功能(工具条、菜单条、初始位置等等)
      3. 对于这个参数的掌握原则是:新窗口的浏览功能要少而精
//window.open()方法的典型应用
function popUP(){
        window.open(winURL,"popup","width=320,herght=480");
}
//这个函数将打开一个宽320px,高480px的新窗口“popup”

“javascript:” 伪协议

    1. “真”协议用来在因特网上的计算机之间传输数据包,如HTTP协议(http://)、FTP协议(ftp://)等
    2. 伪协议是非标准化的协议。“javasript:”伪协议让我们通过一个链接来调用JS函数
    3. 在HTML文档中通过“JavaScript:”伪协议调用JavaScript代码的做法非常不好
//通过”javascript:" 伪协议调用上方popUP()函数的具体做法
<a href="javescript:popUP(‘http://www.example.com/’);">example</a>

//该语句在支持“JavaScript:"伪协议中运行正常
//较老的浏览器会去尝试打开那个链接但失败
//禁用了JavaScript功能的浏览器会什么也不做

内嵌的事件处理函数

    1. 在某个链接用onclick事件处理函数去打开新窗口时,href的没有什么用处
    2. 使用下例的做法很糟糕,不能平稳退化,如果用户禁用了JavaScript,这样的链接毫无用处
//<a>元素的href和onclick事件
<a href="#" onclick="pupUP('http://www.example.com/'); return false;">example</a>

//因为使用了return false语句,这个链接不会真的被打开
//“#”是一个仅供文档内部使用的链接记号,在某些浏览器它指向当前文档开头
//“#”只是为了创建一个空链接,实际工作由onclick属性负责

谁关心这个(平稳退化)

    1. 各大搜索引擎用类似搜索机器人的程序将各种网页添加到搜索引擎的数据库
    2. 极少数搜索机器人能理解JavaScript代码,如果无法平稳退化,会影响在搜索引擎上的排名
//让以上的例子实现平稳退化
//完整冗杂版
<a href="http://www.examplecom/"
    onclick="popUP('http://www.example.com';return false;"> example </a>

//因为出现了2次URL地址,代码冗长,可以利用JavaScript语言改得简明
//this可以用来代表任何一种当前元素,所以可以用this和getAttribute()方法提取href的值
<a href="http://www/example.com/"
    onclick="popUP(this.getAttribute('href');return false;")example</a>

//由DOM提供的更简明的引用方法:this.href属性
<a href="http://www.example.com/"
    onclick="popUP(this.href; return false">example</a>

//目前href已经有了合法值
//即使JavaScript被禁用,这个链接依然有效

分离JavaScript

  1. 把一个事件添加到指定id属性的元素上,用getElementById解决
  2. 如果事件涉及多个元素,可以用类名/标签名获取。具体如下:
    1. 把文档里的所以链接全放入一个数组里
    2. 遍历数组
    3. 如果某个链接的class属性等于popup,就表示这个链接在被点击时应该调用popUP()函数
  3. 于是:
    1. 把这个链接的href属性值传递给popUP()函数;
    2. 取消这个链接的默认行为,不让这个链接把访问者带离当前窗口
//示例
    //获取a元素赋值给变量link
    var link = document.getElementsByTagName("a");
    //循环,为每个类名为popup的link注册点击事件
    for(var i=0;i<links.length;i++){
    if(links[i].getAttribute("class")=="popup"){
        links[i].onclick = function(){
        //点击进入它设置的链接
        popUP(this.getAttribute("href"));
        //禁用herf
        return false;
      }
    }
  }

//这个语句在js文件被加载时立刻执行,如果js文件是从html文档的头部调用,它减灾html文档之前加载到浏览器
//如果<script>标签在<body>之前,不能保证那个文件最先结束(浏览器可能一次加载多个)
//脚本加载时候文档可能不完整,所以模型也不完整,没有完整的DOM,getElementsByTagName就不能正常工作
//因此必须让文档加载到浏览器后马上开始执行
//文档将被加载到一个浏览器窗口里,document对象是window对象的一个属性
//当window对象触发onload事件时,document对象已经存在
//因此,把这个函数添加到window对象的onload事件上去

    window.onload = perparelinks;
    var link = document.getElementsByTagName("a");
    //循环,为每个类名为popup的link注册点击事件
    for(var i=0;i<links.length;i++){
    if(links[i].getAttribute("class")=="popup"){
        links[i].onclick = function(){
        //点击进入它设置的链接
        popUP(this.getAttribute("href"));
        //禁用herf
        return false;
      }
    }
  }

本文链接:

https://bahargul.xyz/index.php/archives/14/
1 + 3 =
快来做第一个评论的人吧~