JavaScript学习笔记——第二天

JavaScript学习笔记—第二天

JavaScript笔记 第二天

一．DOM编程【重点】

1. 概念 ---- document object model 文档对象模型

1） html是标记语言文档，解析技术一般有两种 DOM SAX

2. DOM：浏览器会将整个文档加载进内存，将文档封装成一棵“文档树”，文档里的
   所有标签都被封装成“标签对象”，成为这棵树上的一个节点（Element–标
   签 ， node – 文本）

3. DOM里的两个重要对象：
   document对象 — 代表整个文档（特指body部分，浏览器里地址栏以下，状态
   栏以上的部分）
   window对象 — 代表整个浏览器窗口，document是window的一部分（属性），
   在使用window的属性和函数时，window可以省略。

4. 作用：可以通过dom提供的api获取文档中的标签对象，进而修改其属性或者样式，
   达到添加动画效果的目的 。

2. DOM提供的API — 获取标签的api

1）根据标签的id属性值获取标签对象 【重点】
Var tag = document.getElementById(“id属性值”);
2)根据标签名获取标签对象
Var tags = document.getElementsByTagName(“ 标签名 ”）；
Var tags = 父标签.getElementsByTagName(“标签吗”）； //获取父标签里的。。。。。
3)根据标签的name属性获取标签对象
Var tags = document.getElementsByName(“标签的name属性值”);
---- 通常只有form标签里的元素会有name属性
4)根据标签的显示风格名获取标签对象

    Var tags = document.getElementsByClassName(“标签的class属性值”);

5）可以通过修改属性和样式添加动画效果
获取属性值 ----- var value = 标签对象.属性名
设置属性值 ----- 标签对象.属性名 = 值 ；
设置样式 ---- 标签.style.css样式 = 值；

    h1.style.color=”red”   h1.style.backgroundColor=”blue”

设置一种风格 ---- 标签.className = “class样式值”；

3. Dom里的常见属性

1）innerHTML ： 为标签设置标签体里的内容
2）this ：代表当前产生事件的标签对象

4. 处理下拉列表的常见属性

1）下拉列表一般使用的是onchange事件
2）options — 值为数组类型，表示获取下拉列表里的所有option选项
3）selectedIndex — 值为数字类型，表示下拉列表里被选中的option的下标
4）清空下拉列表 — select.options.length=0;
5) 向下拉列表里添加一个option选项
创建一个option对象 ： var op = new Option(text,value);
添加到select里 ： select.options[下标] = op；

5. 从网页中删除标签

1）需要通过父标签对象删除子标签对象
parentTag.removeChild( 子标签对象 );

2)对表格进行js处理时，主要针对的是tbody标签，不是table.

3)标签对象的一组相关关系属性：
tag.parentNode ----> 获取当前标签的父标签对象
tag.childNodes -----> 获取当前标签对象的所有孩子节点（标签和文本）
tag.firstChild -----> 第一个孩子节点
tag.lastChild -------> 最后一个孩子
tag.nextSibling -----> 当前标签对象的同级下一个标签（“弟弟”）
tag.previousSibling ----> 当前标签对象的同级上一个标签（“哥哥”）
注意：js存在浏览器差异，google浏览器会默认将标签间的空格也算作孩子节点

4）删除的辅助功能
var ba = window.confirm(“提示文字”);
— 方法返回boolean值，表示对话框里的选择（确认–true 取消–false）

6. 向网页中添加标签

1）产生一个新的标签
var element = document.createElement(“标签名”);
例如：

hehehe

var h1 = document.createElement(“h1”);
h1.innerHTML = “hehehe”;

2. 向网页里添加新建的标签
   I. parentTag.appendChild( 新标签 ); // 将新标签添加到父标签的最后面
   II. parentTag.insertBefore(新标签，旧标签); //将新标签添加到旧标签前
   III. parentTag.replaceChild(新标签，旧标签); //用新标签替换指定的旧标签

二．BOM

1. 概念 — browser object model 浏览器对象模型

        一组与浏览器相关的内置对象和函数。Window对象

2. 与window对象相关的函数和属性

1）打开和关闭浏览器窗口 open() close()
var w = window.open( url ) ; 新建一个新的浏览器窗口，并在窗口里显示url指定
的资源，返回值w代表新打开的浏览器窗口对象
Window.close(); 关闭当前窗口

2）window提供的各种对话框
I. Alert() ---- 警告框
II. var ba = window.confirm(提示文字); ----- 确认框
III. 提示输入框： var str = window.prompt(“提示文字”);

3)定时器
I. 单次定时器
var id = window.setTimeout( fun , time ); time的单位是毫秒
在time毫秒后执行一次fun函数
Window.clearTimeout(id); ----> 清除定时器

   II. 周期定时器
      var id = window.setInterval( fun , time ) ;   每隔time毫秒执行一次fun函数
      Window.clearInterval( id );

4)window的location属性
Location的href属性 —> 在js代码中向其他资源跳转（类似于html里的超链接）

5）window的history属性
History.back()
History.forward()
History.go(num) — num为负数表示后退 num为正数表示前进 num为0刷新

三．重构代码

1. 网页中的事件处理

1）标签式事件处理
<标签名 οnclick=”js代码或者函数”>

2)编程式事件处理

2. 可以将js代码从网页中剥离出来，单独定义在一个以.js为结尾的文件中，在网页里通过标签引入