- 一、js的事件处理机制及dom模型
- 1、js的数据验证
- 2、dom模型：
- (1)什么是dom?
- document object model,将一个结构化的文档（比如
- xml,html）转化为一棵符合dom要求的树。通过对树的
- 操作（crud），来间接实现对结构化文档的操作。
- (2)浏览器如何显示html文档
- 浏览器读取html文档，将其转化为w3c dom树（即
- 一棵对象树）放在内存里。如果dom树的节点发生任
- 何改变，浏览器就会立即显示这种改变。对w3c dom
- 树，我们可以使用js来操控。
- (3) w3c dom的结构
- A.继承关系图
- 除了Node,Document,Element,HTMLElement
- 这四个节点以外，其它节点都与html文档中的
- 元素一一对应。
- Node
- Document
- HTMLDocument（代表整个html文档）
- HTMLBodyElement（body）
- Element
- HTMLElement
- HTMLFormElement（form）
- HTMLInputElement（input控件，包括 text password button checkbox radio ...）
- HTMLSelectElement （下拉列表、多选框）
- HTMLOptionElement （option）
- HTMLDivElement （div）
- HTMLTableElement（表格）
- HTMLTableCaptionElement （caption）
- HTMLTableRowElement（行）
- HTMLTableCellElement（单元格）
- HTMLULElement
- HTMLOLElement
- HTMLLIElement
- B.如何访问某个节点
- 方式一：document.getElementById(id);
- 依据标记的id查找。
- 方式二：parentNode previousSibling nextSibling
- childNodes firstChild lastChild
- 因为不同浏览器对dom模型中的空节点支持不一，
- 所以，以上方法用得不多，尽量使用方式一。
- getElementsByTagName(tagName):
- 依据标签名查找，返回的是一个HTMLCollection。
- 对于某些节点，可以采用特殊的方式来访问
- Form:
- elements属性值是一个HTMLCollection
- HTMLCollection可以采用如下两种方式访问
- form1.elements[0] : 第一个控件
- form1.elements['id'/name]: 得到的是
- 该表单中id或者name对应的控件
- elements属性也可以省略不写
- document:
- forms属性值是一个HTMLCollection
- 返回当前html文档里的所有表单对象。
- C.修改节点
- 1）value属性
- 2）innerHTML属性
- 3）style属性
- 对于某个节点，可以通过修改其style属性，
- 来改变其样式。
- style属性只能获得内联样式。
- 4）className
- 5）src属性
- 6）options属性（Select）
- D、添加节点
- 创建节点
- document.createElement(Tag)
- tag:是一个合法的标签名,
- 比如 document.createElement('div');
- document.createTextNode(text)
- 创建一个字符节点
- <div>hello</div>
- 添加节点
- appendChild(node):添加到父节点的
- 所有子节点的末尾。
- insertBefore(newNode,refNode):
- 将newNode添加到refNode前
- replaceChild(newNode,oldNode):
- E、删除节点
- parentNode.removeChild(node)
- 3、使用js改变html两个元素的默认行为
- 对于<form>,默认是当点击 submit按钮，
- 浏览器会提交该表单的数据。
- 对于<a href="">test</a>,默认是，当点击链接
- 之间的内容时，浏览器会跳转到href所指向的地址。
- 改变方式：
- 对于表单：如果onsubmit返回值是false，则表单
- 不会提交。
- <form οnsubmit="return false;">
- ....
- 对于链接
- <a href="" οnclick="return false;">test</a>
- 4、Select的常用属性和方法
- length
- l length 属性可返回下拉列表中选项的数目。
- selectedIndex
- selectedIndex 属性可设置或返回下拉列表中被选选项的索引号
- options
- 返回包含 <select> 元素中所有 <option> 的一个数组。
- 如果把 options.length 属性设置为 0,Select 对象中
- 所有选项都会被清除；
- 如果 options.length 属性的值比当前值小，出现
- 在数组尾部的元素就会被丢弃。；
- 如果把 options[] 数组中的一个元素设置为 null，
- 那么选项就会从 Select 对象中删除.
- onchange
- 当改变选择时调用。
- Option 对象的 selected 属性
- true:表示该选项被用户选择了。
- false:没有被选择
- 默认值是false，除非用户选择了该选项。
- 浏览器只会提交seleccted=true对应的选项。
- Option对象表示Select中的某个选项，
- text:
- value:
- 可以使用如下语句创建一个Option
- var op1 = new Option(text,value);
- select.options[1] = op1;
- 5、表格的常用属性与方法
- 属性
- rows 属性
- rows 集合返回表格中所有行的一个数组，该集合
- 包括 <thead>、<tfoot> 和 <tbody> 中定义的所有行。
- tBodies属性
- tBodies[] 返回包含表格中所有 tbody 的一个数组。
- tFoot属性
- 返回表格的 TFoot 对象。
- tHead属性
- 返回表格的 THead 对象。
- 方法
- insertRow（index）
- insertRow(index) 方法用于在表格中的
- 指定位置插入一个新行。
- 返回一个 HTMLRowElement，表示新插入的行。
- 相当于创建了一个新的 <tr> 标记，并把它插入
- 表中的指定位置。
- 新行将被插入 index 所在行之前。若 index
- 等于表中的行数，则新行将被附加到表的末尾。
- deleteRow(index)方法
- deleteRow(index) 方法用于从表格删除指定位置的行。
- HTMLRowElement对象
- 属性
- cells
- cells[] 返回包含行中所有单元格的一个数组
- 方法
- deleteCell方法
- deleteCell(index) 方法用于删除表格行中的单元格
- insertCell(index)方法
- insertCell(index) 方法用于在 HTML 表的一行的
- 指定位置插入一个空的 <td> 元素。
- 返回值一个 HTMLCellElement对象，表示新创建
- 并被插入的 <td> 元素。该方法将创建一个新的
- <td> 元素，把它插入行中指定的位置。新单元格
- 将被插入当前位于 index 指定位置的表元之前。
- 如果 index 等于行中的单元格数，则新单元格被
- 附加在行的末尾。后续可以调用TableCell的
- innerHTML属性指定单元格中的内容.
- 6、传统的html dom模型：
- 1）window
- open方法
- 第二个参数表示窗口名，如果该窗口名对应的窗口
- 已经打开，则不再打开新的窗口。
- 打开一个新的窗口，例如：
- window.open
- ('1.html', 'new', 'height=100, width=200, top=0,
- left=0, toolbar=no, menubar=no,scrollbars=no,
- resizable=no, location=no, status=no')；
- '1.html' 弹出窗口的文件名；
- 'new' 弹出窗口的名字；如果该参数指定了一个已经存在的窗口，则 open() 方法不再创建一个新窗口，而只是返回对指定窗口的句柄。
- height=100 窗口高度；
- width=200 窗口宽度；
- top=0 窗口距离屏幕上方的象素值；
- left=0 窗口距离屏幕左侧的象素值；
- toolbar=no 是否显示工具栏，yes为显示；
- menubar 是否显示菜单栏。
- scrollbars 是否显示滚动栏。
- resizable=no 是否允许改变窗口大小，yes为是 。
- location=no 是否显示地址栏，yes为是。
- status=no 是否显示状态栏内的信息。
- close方法
- 关闭窗口
- 返回值为窗口对象句柄
- status 属性
- 设置或返回窗口状态栏中的文本。
- document属性
- 获得Document对象
- location属性
- 获得Location对象
- alert方法
- 弹出一个警告对话框
- confirm方法
- 弹出一个选择对话框，返回用户是否确认。
- prompt方法
- 弹出一个供用户输入信息的对话框，返回用户
- 输入信息。
- setTimeout方法
- setTimeout() 方法用于在指定的毫秒数后
- 调用函数或计算表达式。
- clearTimeout方法
- clearTimeout() 方法可取消由 setTimeout() 方法
- 设置的 timeout。
- setInterval方法
- 按照指定的周期（以毫秒计）来调用函数或
- 计算表达式。
- setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval()
- 返回的 ID 值可用作 clearInterval() 方法的参数。
- clearInterval方法
- clearInterval() 方法可取消由 setInterval()
- 设置的 timeout。
- clearInterval() 方法的参数必须是由 setInterval() 返回的 ID
- opener:
- 打开该窗口的窗口对象，如果窗口由
- 用户打开，则返回null
- parent:
- 当前窗口的父窗口
- 7、事件处理机制
- (1)事件对象
- 如何获得一个事件对象
- ie:
- 直接使用event对象
- ff:
- 函数中添加一个参数(event)
- (2)如何通过事件对象获得事件源
- ie:
- srcElement属性
- ff:
- target属性
- (3)事件冒泡机制
- 子节点产生的事件会向上抛给父节点
- 禁止事件冒泡
- e.cancelBubble=true;
- (4)事件处理代码绑订的方式
- A.绑订到html元素之上。
- B.绑订到dom对象之上。
- A与B的区别
- B这种方式不能传参
- 8、js框架
- prototype
- $('id') 相当于 document.getElementById('id');
- $F('id'); 相当于
- document.getElementById('id').value;
- $('id1','id2','id3') 返回一个数组
- 9、两个内置对象
- Date
- Math
05-11
1130
1130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
