* DOM *
---------------------------------------------------------------------------
1. 遍历DOM
1) 要注意处理空格(空格类文本占用一个节点)
2) DOM家谱中的定位指针:
firstChild <--> parentNode
lastChild <--> parentNode
nextSibling <--> previousSibling
3) 节点类型:
--> 元素 nodeType = 1
--> 文本 nodeType = 3
--> 文档 nodeType = 9 在HTML文档内,即<html>元素
4) 标准DOM方法
document.getElementById('id');
document.getElementsByTagName('tagName');
2. 等待HTML DOM的加载
1) 浏览器渲染和操作的大致顺序:
A. HTML解析完毕
B. 外部脚本和样式表加载完毕
C. 脚本在文档内解析并执行
D. HTML DOM完全构造起来
E. 图片和外部内容加载
F. 网页完成加载
2) 等待加载策略
A. 等待整个页面的加载
利用window对象的load事件绑定一个函数
缺点: 慢! 若页面包含大量图片、视频等,需等待很长时间才能执行javascript
B. 等待大部分DOM的加载
在页面最后元素之前嵌入脚本(通常认为是不合理的,不推荐使用)
C. 判断DOM何时加载完毕
检查HTML DOM是否可用的要点:
(1) document
(2) document.getElementsByTagName 和 document.getElementById
(3) document.body 额外补充(理论上使用前一个检查足够判断)
实现:
function domReady(fn){
if(domReady.done)
return fn();
if(domReady.timer){
domReady.ready.push(fn);
}else{
domReady.ready = [fn];
domReady.timer = setInterval(isDOMReady, 13);
}
}
function isDOMReady(){
if(domReady.done)
return false;
if(document && document.getElementsByTagName
&& document.getElementById && document.body){
clearInterval(domReady.timer);
domReady.timer = null;
for(var i=0,len=domReady.ready.length; i<len; ++i)
domReady.ready[i]();
domReady.ready = null;
domReady.done = true;
}
}
3. 在HTML文档中查找元素
1) 通过类值查找元素
2) 使用css选择器查找元素
3) XPath
4. 获取元素的内容
1) 获取元素内文本
A. 所有非Mozilla的浏览器中都有一个 innerText 属性可获取文本
B. 元素并非直接包含文本,而是包含在一个子文本节点中
2) 获取元素内HTML
A. 所有现代浏览器都实现的属性: innerHTML
B. 依赖于浏览器的实现,实现的潜在问题:
--> 基于Mozilla的浏览器不会返回<style>元素
--> IE返回的元素字符都是大写
--> 只能在HTML DOM文档中使用,在XML DOM文档中返回null
5. 操作元素特性
1) 获取和设置特性的值
A. 兼容XML DOM的方法: getAttribute('name'); setAttribute('value', 'zhangsan');
B. HTML DOM文档的额外方式: var name = elem.name; elem.value = zhangsan;
C. 特殊情况:
--> getAttribute/setAttribute对class属性不一定通用(如IE会返回null)
--> 简单的写法应该形如: elem.className 而非 elem.class(class是js的关键字)
--> label标签的for属性也是如此: elem.htmlFor
--> 一些css属性: elem.style.cssFloat, elem.style.cssText
--> 处理方式: name = {'for': 'htmlFor', 'class': 'className'}[name] || name
6. 修改DOM
1) 创建
document.createElement 创建新元素,它不会马上插入到DOM中
document.createTextNode 创建文本节点
2) 插入
parentNode.insertBefore(nodeToInsert, beforeNode);
不指定beforeNode时在最后插入,类似:
parentNode.appendChild(nodeToInser);
3) 注入
利用innerHTML属性. 缺陷:
--> 对于XML DOM不通用
--> innerHTML完全删除了元素内容的任何节点,没法像DOM方法一样追加或插入
4) 删除
parentNode.removeChild(nodeToRemove);
* 事件 *
---------------------------------------------------------------------------
1. 事件简介
1) 异步事件与线程
JavaScript事件模型: 不使用任何线程,完全是异步的
--> JavaScript目前不存在线程,最接近线程的是使用setTimeout()回调函数
也就是说,js代码的执行,是阻塞的
--> 异步回调: 当一个DOM元素触发某个特定事件时,通过一个回调函数来处理它
2) 事件阶段
--> 捕获: 事件会以 document => <body> => .... 的顺序捕获
--> 冒泡: 事件处理函数反向冒泡执行
2. 常见事件特征
1) 事件对象
--> IE的实现与W3C规范有差别: 它使用独立的全局事件对象window.event
--> 其他浏览器使用独立的包含事件对象的参数传递
document.getElementById('id').onclick = function(e){
e = e || window.event;
//......
};
2) this关键字
--> 只有部分浏览器和部分方法能正常运行并将this等同于当前元素
--> 使用this关键字处理事件相关代码相当便利
3) 取消事件冒泡
--> 标准浏览器: e.stopPropagation();
--> IE浏览器: window.event.cancelBubble = true;
4) 重载浏览器的默认行为
--> 浏览器的默认行为在捕获阶段、冒泡阶段都会发生
--> 阻止事件冒泡或者完全没有绑定事件并不会影响默认行为的执行
--> 阻止默认行为的途径:
A. 标准浏览器: e.preventDefault();
B. IE浏览器: window.event.returnValue = false;
--> 防止默认行为是由浏览器决定的,未必总生效(尤其是在文本域中防止敲击和<iframe>内的行为)
3. 绑定事件监听函数
1) 传统绑定
目前为止,绑定事件处理函数最简单且兼容性最好的方式
document.body.onkeypress = function(){...};
window.onload = function(){...};
--> 优点: A. 简单,稳定,兼容;
B. 处理事件时,this关键字引用的是当前元素
--> 缺点: A. 只会在事件冒泡中运行;
B. 只能绑定一个事件处理函数;
C. 事件对象参数仅对非IE浏览器有效
2) W3C方式
使用: elem.addEventListener(事件名称, 处理事件的函数, 启用/禁用事件捕获的标示);
document.getElementById('id').addEventListener('mouseover', function(e){
this.style.border = '1px solid red';
}, false);
--> 优点: A. 同时支持捕获和冒泡阶段(true捕获,false冒泡);
B. this关键字引用当前元素;
C. 可以获取事件对象参数;
D. 同一元素绑定多个事件时不会覆盖
--> 缺点: IE不支持
3) IE方式
使用: elem.attachEvent(事件名称, 处理事件的函数);
--> 优点: 同一元素绑定多个事件时不会覆盖
--> 缺点: A. 仅支持事件冒泡阶段;
B. this关键字指向window对象而非当前元素;
C. 事件对象仅存在于window.event参数中;
D. 事件必须以ontype的形式命名,如onclick;
E. 仅IE可用,其他标准浏览器不支持
4) 通用方法
function addEvent(element, type, handler){
if(!handler.$$guid)
handler.$$guid = addEvent.guid++;
if(!element.events)
element.events = {};
var handlers = element.events[type];
if(!handlers){
handlers = element.events[type] = {};
if(element['on'+type]){
handlers[0] = element['on'+type];
}
}
handlers[handler.$$guid] = handler;
element['on'+type] = handleEvent;
}
addEvent.guid = 1;
function removeEvent(element, type, handler){
if(element.events && element.events[type]){
delete element.events[type][handler.$$guid];
}
}
function handleEvent(event){
var returnValue = true;
event = event || fixEvent(window.event);
var handlers = this.events[event.type];
for(var i in handlers){
this.$$handleEvent = handlers[i];
if(this.$$handleEvent(event)===false){
returnValue = false;
}
}
return returnValue;
}
function fixEvent(event){
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function(){
this.returnValue = false;
};
fixEvent.stopPropagation = function(){
this.cancelBubble = true;
};
4. 事件类型
1) 鼠标事件
2) 键盘事件
3) UI事件
分享到:
相关推荐
这本书“完全手册:JavaScript动态网页开发详解”深入浅出地讲解了JavaScript的各个方面,旨在帮助读者从初学者到精通者,掌握这个强大的脚本语言。 **一、JavaScript基础** 1. 变量与数据类型:了解JavaScript中的...
精通JavaScript+jQuery 书籍目录: 第1部分 JavaScript.cCSS与DOM基础篇 第1章 ccJavaScript概述 1.1 JavaScript的起源 1.2 浏览器之争 1.2.1 DHTML 1.2.2 浏览器之间的冲突 1.2.3 标准的...
1.4.2 结构.c表现和行为的分离 第2章ccJavaScript基础 2.1 JavaScript的语法 2.2 变量 2.3 数据类型 2.3.1 字符串 2.3.2 数值 2.3.3 布尔型 2.3.4 类型转换 2.3.5 数组 2.4 关键字 ...
- 前后端分离架构下的开发模式。 - 第三方API和服务的集成方法。 2. **JavaScript RIA开发实战——最佳实践、性能、表现** - **核心知识点**: - 富互联网应用(RIA)的设计原则。 - 性能优化的最佳实践(如减少...
在“精通javaweb整合开发”这一主题中,我们聚焦于Java Web应用程序的客户端编程,这是Web开发中的重要组成部分。客户端编程主要关注于用户与Web应用程序的交互,它包括浏览器端的JavaScript、HTML、CSS以及与服务器...
JavaScript王者归来,这不仅是一个响亮的称号,也是对JavaScript在现代Web开发中地位的肯定。...随着Web技术的不断发展,JavaScript的王者地位只会更加稳固,学习和精通JavaScript是每一个IT从业者不可或缺的技能。
JavaScript是Web开发中不可或缺的一部分,尤其对于前端开发者来说,它是实现网页动态效果和交互的核心语言。...本教程将深入浅出地介绍...通过实践和深入学习,你可以逐渐精通JavaScript,成为一名出色的前端开发者。
2. **AJAX(Asynchronous JavaScript and XML)**:AJAX不是一种单一的技术,而是一组用于创建快速交互式Web应用的技术集合。它通过异步在后台与服务器交换数据并局部更新页面,提高了用户体验。你将学习如何使用...
1.4 分离式DOM脚本编程 5 1.4.1 DOM 6 1.4.2 事件 7 1.4.3 Javas cript与CSS 8 1.5 Ajax 8 1.6 浏览器支持 11 1.7 小结 12 第二部分 专业Javas cript开发 第2章 面向对象的Javas cript 14 2.1 ...
这份“HTML、CSS、JavaScript网页制作从入门到精通”的资料,提供了全面的学习路径,帮助初学者掌握网页开发的基础和高级技巧。 HTML(HyperText Markup Language)是网页内容的基础,它定义了网页的结构和意义。...
在Web开发领域,CSS(Cascading Style Sheets)、VBScript、DHTML(Dynamic HTML)和JavaScript是构建交互式和动态网站的关键技术。本手册集合涵盖了这些主题,旨在为开发者提供全面的学习资源。以下是对这些技术的...
现代JavaScript框架(如React、Vue、Angular)极大地提升了开发效率和应用性能。 **VBScript** VBScript是Visual Basic的一种脚本版本,主要在Internet Explorer和Windows环境中使用。虽然现在使用较少,但在过去,...
"网站开发从入门到精通"这个主题旨在为初学者提供一套完整的教程,帮助他们从零开始掌握网站开发的核心技能。本教程特别关注了JSP(Java Server Pages)技术在网站开发中的应用,这是一种强大的动态网页生成工具,...
4. **MVC模式**:ASP.NET MVC(Model-View-Controller)是一种轻量级、可测试的开发模式,更强调代码分离和层次化结构。学习如何创建MVC项目,路由配置,以及控制器、视图和模型的交互。 5. **Web API**:ASP.NET ...
- 前后端分离:理解前后端分离的设计理念,能够使用RESTful API或GraphQL与后端进行交互。 - 测试与调试:具备前端测试的基本知识,能够编写单元测试和集成测试;熟悉浏览器开发者工具的使用。 #### 工作经验 ...
这个“精通ASP.NET+3.5企业级开发”的主题涵盖了多个关键知识点,包括但不限于: 1. **.NET Framework 3.5**:它是微软的统一开发平台,包含了C#、VB.NET等编程语言,以及ASP.NET、Windows Forms、WPF等开发框架。...
标题《精通AngularJS》和描述中所提到的“精通AngularJS”指的是一本专注于教授读者如何深入理解和应用AngularJS这一现代JavaScript框架的书籍。AngularJS是谷歌开发的开源前端Web应用程序框架,它是为了解决单页...
- 精通JavaScript(包括ES6)、CSS2/3、HTML5,以及Sass/Less等预编译语言。 - 独立开发Vue项目,熟练使用ElementUI框架,精通数据跨域和Webpack打包等技术。 - 熟悉React和Angular框架,能快速适应和介入相关...