Javascript学习笔记(2017.4.13-2017.4.17)

来源：互联网发布：淘宝百雀羚漫网专卖店编辑：程序博客网时间：2024/05/22 10:40

DOM
- DOM是什么
- 为什么会有DOM
- DOM图示
- DOM本质
- DOM模型中的节点
- DOM对HTML元素访问操作
  - 实例通过id修改HTML元素
  - 实例通过TAG修改HTML元素
  - DOM访问表单控件的常用属性和方法
  - 在elements返回的数组中访问具体的表单控件语法
  - DOM访问列表框下拉菜单的常用属性
  - 使用optionsindex返回具体选项所对应的常用属性
  - DOM访问表格子元素的常用属性和方法
  - 通过rowsindex返回表格指定的行所对应的属性
  - 通过cellsindex返回表格指定的列所对应的属性
对象
- 常用的内置对象
- 对象的创建
BOMbrower object model
- 浏览器结构
- window对象
- history对象
- location对象
- screen对象
- navigator对象
事件
- 事件的概念
- 事件流
- 通用性的事件监听方法
  - 绑定HTML元素属性
  - 绑定DOM对象属性
- IE中的事件监听方法
- 标准DOM中的事件监听方法
- 常见的事件监听
  - 访问事件对象
  - IE中的事件对象
  - 标准DOM中的事件对象
  - Event事件对象常用属性
- 常见的事件类型
  - 常用的鼠标事件
  - 常用的键盘事件
  - HTML事件

DOM

DOM是什么

DOM（Document Object Model）文档对象模型。
当网页加载时，可以将结构化文档在内存中转换成对象的树。

为什么会有DOM?

DOM是一套对文档的内容进行抽象和概念化的方法。

在现实世界里，正是因为大家对抽象的世界对象模型有着基本的共识，人们才能用非常简单的话表达出复杂的含义并得到对方的理解。
就如具体的例子中，你可以有把握地断定，其他人对“第三”和“左边”的理解和我完全一样。

有了DOM，才便于描述和去操作HTML文档。

DOM图示：

DOM本质：

DOM并不是一种技术，而是一种访问结构化文档的一种思想。

借助DOM模型，我们可以对DOM树进行增删修改等操作，让结构化文档动态化。

掌握了DOM编程模型，就可以用js脚本动态修改HTML页面的能力。

DOM模型中的节点：

DOM模型中的节点——文档可以说是由节点构成的集合。

DOM对HTML元素访问操作：

为了动态地修改HTML元素，须**先访问**HTML元素。

DOM组要提供2种方式：id或tag

实例：通过id修改HTML元素

DOM1.HTML

实例：通过TAG修改HTML元素

DOM2.HTML

DOM访问表单控件的常用属性和方法

在elements返回的数组中访问具体的表单控件语法

实例：DOM3.html

DOM访问列表框、下拉菜单的常用属性：

使用options[index]返回具体选项所对应的常用属性：

实例：DOM4.html

DOM访问表格子元素的常用属性和方法：

通过rows[index]返回表格指定的行所对应的属性：

通过cells[index]返回表格指定的列所对应的属性：

对象：

对象是JavaScript的特性之一，它是一种非常重要的数据类型，是自我包含的数据集合。

常用的内置对象

Date
Math

对象的创建

使用object直接创建对象
使用new关键字调用构造器创建对象
使用json语法创建对象

BOM（brower object model）：

JavaScript是运行在浏览器中的，所以提供了一系列对象用于和浏览器窗口进行交互，这些对象主要包括

window
document
location
navigator
screen
等。

通常称为浏览器对象模型（brower object model）

浏览器结构：

BOM的层次结构：

window对象：

window对象是整个JavaScript脚本运行的顶层对象，它的常用属性如下：

Window对象的常用方法：

window对象的方法和属性可以分成4类：

创建新窗口、维护现有窗口的行为：
在窗口中创建带分区的文档（窗体和iframe）
定时器的创建和控制
用来控制浏览器窗口内特定元素的属性，如document、navigator、screen等

实例：BOM1.html

history对象：

实例：
history1.html
history2.html
history3.html

location对象：

screen对象：

navigator对象：

实例：loaction.html

<!DOCTYPE html><html><head>    <title>test</title>    <script type="text/javascript">        document.write("hostname:"+location.hostname+"<br/>");        document.write("href:"+location.href+"<br/>");          document.write("host address:"+location.host+"<br/>");          document.write("port:"+location.port+"<br/>");          document.write("protocol:"+location.protocol+"<br/>");          document.write("availHeight:"+screen.availHeight+"<br/>");          document.write("availWidth:"+screen.availWidth+"<br/>");        document.write("colorDepth:"+screen.hostname+"<br/>");          document.write("appCodeName:"+navigator.appCodeName+"<br/>");           document.write("appName:"+navigator.appName+"<br/>");           document.write("appVersion:"+navigator.appVersion+"<br/>");         document.write("platform:"+navigator.platform+"<br/>");         document.write("userAgent:"+navigator.userAgent+"<br/>");           document.write("cookieEnabled:"+navigator.cookieEnabled+"<br/>");    </script></head><body></body></html>

事件

事件的概念：

JavaScript使我们有能力创建动态页面，网页中的每个元素都可以产生某些可以触发JavaScript函数的事件，我们可以认为事件是可以被JavaScript侦测到的一种行为。

事件流：

分为两类。

冒泡型事件（IE支持）
捕获型事件 (Firefox、chrome均支持)

使用返回值改变HTML元素的默认行为
HTML元素大都包含了自己的默认行为。例如：超链接、提交按钮等。
我们可以通过在绑定事件中加入return false 来阻止它的默认行为。

通用性的事件监听方法：

绑定HTML元素属性：

<input type= "button" value = "clickMe" onclick = "check(this)" />

绑定DOM对象属性

document.getElementById("btn1").onclick = test ;

实例：jianting1.html

IE中的事件监听方法：

标准DOM中的事件监听方法：

实例：jianting2.html

常见的事件监听：

冒泡型事件：shijianliu1.html
捕获型事件：shijianliu2.html

访问事件对象：

事件对象封装了事件发生的详细信息，尤其是鼠标、键盘事件。如果鼠标事件发生的位置、键盘事件的键盘键等。

IE中的事件对象

IE中的事件对象是一个隐式可用的全局对象：event，它是window对象一个属性。

//IE中得到事件对象op.onclick = function(){    var oEvent = window.event;}

标准DOM中的事件对象

在标准DOM浏览器检测到发生了某个事件时，将自动创建一个event对象，并隐式地将该对象作为事件处理函数的第一个参数传入。

//标准DOM中得到事件对象op.onclick = function(oEvent{ //作为参数传进来}

为了兼容不同的浏览器，通常采用下面的方法得到事件对象

op.onclick = function(oEvent){    if(window.event){oEvent = window.event;}}

Event事件对象常用属性：

实例：event.html

常见的事件类型：

常用的鼠标事件：

实例：shubiao.html

常用的键盘事件：

实例：jianpan.html

HTML事件：

0 0