DOM介绍
DOM是Document Object Model的缩写,即文档对象模型,是W3C组件推荐的处理XML的标准接口,定义了所有文档元素的对象和属性,以及访问它们的方法(接口)。W3C文档对象模型(DOM)定义了访问诸如XML和XHTML文档的标准,是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。
W3C DOM被分为3个不同的部分:
●核心DOM 用于任何结构化文档的标准模型
●XML DOM 用于XML文档的标准模型
●HTML DOM 用于HTML文档的标准模型
XML DOM定义了访问和处理XML文档的标准方法。XML DOM是XML D ocument Object Model的缩写,即XML文档对象模型,是用于获取、更改、添加或删除XML元素的标准。HTML DOM定义了所有HTML元素的对象和属性,以及访问它们的方法(接口)。
W3C文件对象模型(DOM)可以看作是一个平台或语言中立的(language-neu tral)界面,它允许程序和脚本动态的访问以及更新文档的内容、结构、脚本程序。在这里DOM仅仅只是一种对某种功能和结构的声明,告诉别的对象,具有什么样的概念定义。简单来看,DOM可以看作是一组API(Application Program Interface 即应用程序接口),它把HTML文档,XML文档等看成一个文档对象,在里面存放的是对这些文档操作的属性和方法的定义。DOM技术并不是首先用于XML文档,对于HTML文档来说,早就可以使用DOM来读取里面的数据了。
W3C DOM提供了一组描述HTML及XML文件的标准对象和一个用来访问和操作这类文件的标准界面。若以面向对象的思维来看,我们可以把HTML文档或X ML文档看成是一个对象,一个XML文档对象可以包含其它的对象,如节点对象。对XML文档对象的操作实际是对该对象的节点对象的操作,可以对对象进行修改等操作。在DOM中有相应的对象对应我们的实际上的XML文档的对象,那么也可以这样理解DOM,在DOM规范中提供了一组对象对文档结构的访问。
DOM是独立于程序设计语言的,W3C组织以IDL(Interface Definition Langua ge,接口定义语言)的形式定义了DOM中的接口。某种程序语言要实现DOM,需要将DOM接口转换为本语言中的适当结构,为了保证不同语言的不同的DOM之间实现广泛的兼容,W3C组织在DOM规范的附录部分提供了Java和ECMAScript 两种语言的绑定。在特定语言中使用DOM规范就需要定义DOM规范指定的接口,并给出实现这些接口的类的集合,这一过程称作语言绑定。本章讲述DOM规范的Java语言绑定。Java语言通过把DOM规范中的接口用Java的接口写下来,并给出实现这些接口的类集合来实现DOM规范的Java语言绑定。当然了,我们还可以使
jquery对象访问。 Jq对象(dom对象集合)的Eq方法和jq选择器返回的都是是jquery对象,只能使用jquery 方法;Jq对象(dom集合)的get方法和“jq对象[i]”返回的是dom元素对象,只能使用dom方法。 Jq对象的find(selector |obj|ele)和children用来查找子对象和后代对象 Jq对象的find方法用于查找当前jq对象(dom集合)的后代对象,Jq对象的children方法用于查找当前jq对象(dom集合)的子对象对象。这两个方法都只能使用jq对象(dom对象集合)来调用,并且他们返回的也是jq对象。 Jq手册中的api方法都是js对象(dom集合)对象或者$对象的方法。只能使用jq对象(dom 集合)或者$来调用。如each,attr、val,find,children等等 Jq对象的index方法搜索当前集合中的匹配的元素,并返回相应元素的索引值,从0开始计数 如果不给index方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。 Jq选择器 1、个基本选择器: 基本选择器可以拼接一起来选择某组元素,原则: 对同一个元素描述的多个基本选择器中间没有任何间隔。 如div[name=aa]表示name属性等于aa的div元素(元素名选择器div和属性选择器[name=aa]中间没有任何间隔)。 div.cval表示class值等于cval的div元素,表示class值等于cval是div元素(类选择器.cval 和元素名选择器div之间同样没有任何间隔) #id值 .class值 元素名 //属性 [attr]具有aaa属性
jquery案例 jquery案例1.如何创建嵌套的过滤器: 1.//允许你减少集合中的匹配元素的过滤器, 2.//只剩下那些与给定的选择器匹配的部分。在这种情况下, 3.//查询删除了任何没(:not)有(:has) 4.//包含class为“selected”(.selected)的子节点。 5..filter(":not(:has(.selected))") jquery案例2.如何重用元素搜索 1.var allItems=$("div.item"); 2.var keepList=$("div#container1div.item"); 3.//现在你可以继续使用这些jQuery对象来工作了。例如, 4.//基于复选框裁剪“keep list”,复选框的名称 5.//符合 6.
JavaScript制作页面特效课后练习 1.在某页面中有一个图片和五个超链接,如下图所示,单击不同的数字超链接显示不同的 图片: 图1 图片幻灯片显示效果 提示: (1)默认显示一个图片,五个超链接调用同一个传参函数,参数设置为显示图片的名称。 (2)使用“对象名.属性值”或setAttribute()的方式改变图片的名称。 2.做一个模仿删除用户的页面,功能如下: 默认情况下,在一个Table 里面放置若干用户信息,后面有“删除”链接:
图2 模仿删除用户的页面效果1 点击“删除”链接,弹出对话框,提示用户是否继续操作: 图3 模仿删除用户的页面效果2 用户点击确定后,要删除的一行,自动加上删除线,表示处于删除状态: 图4 模仿删除用户的页面效果3 提示: (1)使用confirm 弹出确认框,如果用户点击“确定”,则返回true,进行下一步操作; (2)定义一个类样式,用来标识删除状态,如果用户点击了“确定”按钮之后,该行所对 应的tr 标签,自动应用该类样式。 3.做一个横向导航菜单,并且每一项均包含一个二级的菜单,效果图如下:
图5 横向导航菜单 当鼠标不在菜单上时,二级菜单不显示,当鼠标移动到任一项上时,显示该项对应的二级菜 单。 提示: (1)使用对象的display 属性可以控制对象的显示与隐藏; (2)使用相对定位/绝对定位来控制二级菜单的显示位置; (3)使用鼠标的两个事件(onmouseove/onmouseout)来触发控制函数。 4.做一个横向不间断滚动的特效,效果图如下:
图6 图片横向滚动特效 要求:图片始终横向向左滚动,并且每一张图片首尾相连,不存在间断。 提示: (1)若要使图片不间断,则需要将图片列表重复一次,这样第一遍的末尾图片和第二遍的 开始图片就能相连了,即使用innerHTML 属性让图片内容翻倍;(2)使用setInterval()方法,可以控制一个函数每隔多少毫秒执行一次; (3)使用绝对定位与相对定位结合,可以使图片所在的层相对于父层的位置可控,方便随 着计时器的执行,left 的值递减;
一、DOM创建** DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性。DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: 1:Element,元素 2:Attribute,属性 3:Text,文本 DOM节点创建最常用的便是document.createElement和document.createTextNode方法: var node1 = document.createElement('div'); var node2 = document.createTextNode('hello world!'); **二、DOM查询** // 返回当前文档中第一个类名为"myclass" 的元素 var el = document.querySelector(".myclass"); // 返回一个文档中所有的class为"note"或者"alert"的div元素 var els = document.querySelectorAll("div.note, div.alert"); // 获取元素 var el = document.getElementById('xxx'); var els = document.getElementsByClassName('highlight'); var els = document.getElementsByTagName('td'); Element也提供了很多相对于元素的DOM导航方法: // 获取父元素、父节点 var parent = ele.parentElement; var parent = ele.parentNode;//只读,没有兼容性问题 var offsetParent=ele.offsetParent;//只读,找到最近的有定位的父节点。//没有定位父级时,默认是body;但在IE7以下,如果当前元素没有定位属性,返回body,如果有,返回HTML;//如果当前元素某个父级触发了haslayout,则返回触发了haslayout这个元素。 // 获取子节点,子节点可以是任何一种节点,可以通过nodeType来判断 var nodes = ele.children;//标准下、非标准下都只含元素类型,但对待非法嵌套的子节点,处理方式与childNodes一致。 var nodes = ele.childNodes;//非标准下:只包含元素类型,不会包含非法嵌套的子节点。 //标准下:包含元素和文本类型,会包含非法嵌套的子节点。 //获取元素属性列表 var attr = ele.attributes;
表JS基本类型有什么?引用类型有什么? 基本类型:number,string,boolean,undefined,null 引用类型:基本类型以外的都是引用类型,如object/array/function/date等等 关于基本类型与引用类型的区别可以详细看看@Naraku_的这篇文章: [ JS 进阶] 基本类型引用类型简单赋值对象引用 概况起来有这么几个要点: 1.我们无法给基本类型的对象添加属性和方法; var m1 = 123; https://www.wendangku.net/doc/589944469.html, = 'abc'; console.log(https://www.wendangku.net/doc/589944469.html,); //输出:undefined 2.基本类型对象的比较是值比较,而引用类型对象的比较是引用比较; var m1 = 123, m2 = 123; console.log(m1 === m2); //输出:true var o1 = {}, o2 = {}; console.log(o1 === o2); //输出:false 3.基本类型对象是存储在栈内存中的,而引用类型对象其实是一个存储在栈内存中的一个堆内存地址。 4.基本类型对象赋值时(执行=号操作),是在栈内存中创建一个新的空间,然后将值复制一份到新的空间里。 5.引用类型对象赋值时(执行=号操作),也是在栈内存中复制一份一样的值,但这个值是一个堆内存地址,所以被赋值的那个对象跟前者其实是一个对象。 var o1 = {}; var o2 = o1; https://www.wendangku.net/doc/589944469.html, = 'abc';console.log(https://www.wendangku.net/doc/589944469.html,); // --> abc console.log(https://www.wendangku.net/doc/589944469.html,); // --> abc o2.age = '123';console.log(o1.age); // --> 123console.log(o2.age); // --> 123 JS中的常见对置对象类
第一部分HTML DOM简介 1 DOM简介 HTML文档对象模型 HTML文档对象模型(Document Object Model)定义了访问和处理 HTML 文档的标准方法。HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。 什么是 DOM? 通过JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。 DOM 被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3) DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 ?Core DOM 定义了一套标准的针对任何结构化文档的对象 ?XML DOM定义了一套标准的针对XML 文档的对象 ?HTML DOM定义了一套标准的针对HTML 文档的对象 2 DOM节点 节点 根据 DOM,HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的: ?整个文档是一个文档节点 ?每个HTML 标签是一个元素节点 ?包含在HTML 元素中的文本是文本节点 ?每一个HTML 属性是一个属性节点 ?注释属于注释节点 Node层次 节点彼此都有等级关系。 HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。 下面这个图片表示一个文档树(节点树): 3 DOM节点树 文档树(节点数)
看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈。 不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚好背中了这道面试题。 一、对于MVVM的理解? MVVM 是Model-View-ViewModel 的缩写。 ?Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。 ?View代表UI 组件,它负责将数据模型转化成UI 展现出来。 ?ViewModel监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和Model的对象,连接Model和View。 在MVVM架构下,View 和Model 之间并没有直接的联系,而是通过ViewModel 进行交互,Model 和ViewModel 之间的交互是双向的,因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。 ViewModel通过双向数据绑定把View 层和Model 层连接了起来,而View 和Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM,不需要关注数据状态的同步问题,复杂的数据状态维护完全由MVVM 来统一管理。 二、Vue的生命周期 beforeCreate(创建前),在数据观测和初始化事件还未开始 created(创建后),完成数据观测,属性和方法的运算,初始化事件,$el 属性还没有显示出来 beforeMount(载入前),在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。 注意此时还没有挂载html到页面上。 mounted(载入后),在el 被新创建的vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM 对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。 beforeUpdate(更新前),在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
邯郸学院信息工程学院实训报告
需求说明 在页面中有四幅小图片和一个图片展示区域,当鼠标移入某幅小图片时,在图片展示区域可看到其对应的大图。为凸显当前的小图状态,把其它三幅小图透明度设为,如图1所示。 图1 图片展示效果 实现思路及步骤 1.设计页面HTML结构,应用CSS样式。 2.为四幅小图片绑定鼠标移入事件。 3.获取当前发生鼠标移入事件的小图片的src属性,将其作为大图的src属性值。这样大图也就随之改变了。 4.为凸显当前的小图状态,把其它三幅小图透明度设为。 实训2.制作留言板前端局部更新效果 训练要点 (1)进一步练习选择器的使用 (2)练习创建节点和插入节点的方法 需求说明 当在“昵称”和“留言内容”文本框内输入信息后,单击“单击这里提交留言”按钮,输入的信息会显示在页面上端的留言板中,如图2所示。若没有输入昵称
和留言内容,单击“单击这里提交留言”时不能发送留言。 图2 留言板前端局部更新效果 实现思路及步骤 1.设计页面HTML结构,应用CSS样式。 2.找到“单击这里提交留言”按钮,绑定onclick事件。 3.在“昵称”和“留言内容”文本框中显示提示文字,获得焦点时提示文字消失,失去焦点时若内容为空,则再次显示提示文字。 4.获取用户输入的“昵称”和“留言内容”。 5.若用户输入了“昵称”和“留言内容”,则创建一条留言,并显示在页面上面的留言板中。 6.将“昵称”和“留言内容”文本框的value值变为初始值。 实训3. 制作邮件删除效果 训练要点 (1)进一步练习选择器的使用 (2)练习删除节点的方法
需求说明 在邮件列表前都有一个复选框,单击可以选中或取消选中。当单击“全选/全不选”按钮,所有复选框都随之选中或取消选中。单击“删除邮件”按钮可删除被选中的邮件,如图3所示。 图3邮件删除效果 实现思路及步骤 1.设计页面HTML结构,应用CSS样式。 2.找到“全选/全不选”按钮,绑定onclick事件。 3.查找所有的复选框,把每个复选框的checked属性值变为true或false,实现全选或全不选。 4.找到“删除邮件”按钮,绑定onclick事件。 5.查找所有checked属性值为true的复选框,删除其所在的行,即删除了该邮件。实训4. 表格隔行变色和当前行变色 训练要点 (1)进一步练习选择器的使用 (2)练习追加样式、删除样式、改变css样式的方法 需求说明 请使用jQuery实现如图4所示的学生信息表,表格的奇数行和偶数行背景颜色不同,奇数行背景色为#d9ffdc,偶数行背景色为#a5e5aa。表头的背景色为#00a40c,
JavaScript基础术语和概念总结 一、什么是JavaScript ? JavaScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java 小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。它的出现使得信息和用户之间不仅只是一种显示和浏览的关系,而是实现了一种实时的、动态的、可交式的表达能力。 二、JavaScript的特点 JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言,主要用于创建具有交互性较强的动态页面。其具有以下特点: 1)基于对象:JavaScript 是基于对象的脚本编程语言,能通过DOM(文档结构模型)及自身提供的对象及操作方法来实现所需的功能。 2)事件驱动:JavaScript 采用事件驱动方式,能响应键盘事件、鼠标事件及浏览器窗口事件等,并执行指定的操作。 3)解释性语言:JavaScript 是一种解释性脚本语言,无需专门编译器编译,而是在嵌入JavaScript 脚本的HTML 文档载入时被浏览器逐行地解释,大量节省客户端与服 务器端进行数据交互的时间。 4)实时性:JavaScript 事件处理是实时的,无须经服务器就可以直接对客户端的事件做出响应,并用处理结果实时更新目标页面。 5)动态性:JavaScript 提供简单高效的语言流程,灵活处理对象的各种方法和属性,同时及时响应文档页面事件,实现页面的交互性和动态性。 6)跨平台:JavaScript 脚本的正确运行依赖于浏览器,而与具体的操作系统无关。只要客户端装有支持JavaScript 脚本的浏览器,JavaScript 脚本运行结果就能正确反 映在客户端浏览器平台上。 7)开发使用简单:JavaScript 基本结构类似C 语言,采用小程序段的方式编程,并提供了简易的开发平台和便捷的开发流程,就可以嵌入到HTML 文档中供浏览器解 释执行。同时JavaScript 的变量类型是弱类型,使用不严格。 8)相对安全性:JavaScript 是客户端脚本,通过浏览器解释执行。它不允许访问本地
什么是DOM? 通过JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口,连同对HTML元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。 在1998年,W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。 所有的浏览器都执行了这个标准,因此,DOM的兼容性问题也几乎难觅踪影了。 DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。 DOM被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3): Core DOM 定义了一套标准的针对任何结构化文档的对象 XML DOM 定义了一套标准的针对XML文档的对象 HTML DOM 定义了一套标准的针对HTML文档的对象。 HTML DOM 节点 HTML文档中的每个成分都是一个节点。 节点 根据DOM,HTML文档中的每个成分都是一个节点。 DOM是这样规定的: ?整个文档是一个文档节点 ?每个HTML标签是一个元素节点 ?包含在HTML元素中的文本是文本节点 ?每一个HTML属性是一个属性节点
注释属于注释节点 Node 层次 节点彼此都有等级关系。 HTML文档中的所有节点组成了一个文档树(或节点树)。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。 文档树(节点数) 请看下面这个HTML文档:
HTML鼠标事件 ------------------------------------------------------------------------------- onblur 事件:当鼠标失去焦点后执行 https://www.wendangku.net/doc/589944469.html,/htmldom/event_onblur.asp https://www.wendangku.net/doc/589944469.html,/question/60621120.html onblur 事件会在对象失去焦点时发生 例如:我们将在用户离开输入框时执行 JavaScript 代码: ------------------------------------------------------------------------------- onclick 事件:单击鼠标左键后执行 https://www.wendangku.net/doc/589944469.html,/htmldom/event_onclick.asp ------------------------------------------------------------------------------- ondblclick 事件:双击鼠标左键后执行 https://www.wendangku.net/doc/589944469.html,/htmldom/event_ondblclick.asp ------------------------------------------------------------------------------- onfocus 事件:事件在对象获得焦点时发生。 https://www.wendangku.net/doc/589944469.html,/htmldom/event_onfocus.asp ------------------------------------------------------------------------------- onkeydown 事件:事件会在用户按下一个键盘按键时发生。 https://www.wendangku.net/doc/589944469.html,/htmldom/event_onkeydown.asp ------------------------------------------------------------------------------- onkeypress 事件:onkeypress 事件会在键盘按键被按下并释放一个键时发生。https://www.wendangku.net/doc/589944469.html,/htmldom/event_onkeypress.asp ------------------------------------------------------------------------------- onKeyUp 事件:事件会在键盘按键被松开时发生。 https://www.wendangku.net/doc/589944469.html,/htmldom/event_onkeyup.asp 敲入一个a弹出一个a 敲入一个a弹出一个空。再敲入一个s弹出一个a 。再敲入一个s弹出一个sa ------------------------------------------------------------------------------- onmousedown 事件:事件会在鼠标按键被按下时发生。 https://www.wendangku.net/doc/589944469.html,/htmldom/event_onmousedown.asp
https://www.wendangku.net/doc/589944469.html, web前端培训教程:DOM常用节点类型汇总 DOM 基础课程中,我们了解了DOM 的节点并且了解怎样查询和操作节点,而本身这些不同的节点,又有着不同的类型。
https://www.wendangku.net/doc/589944469.html, 1.Node 类型 Node 接口是DOM1 级就定义了,Node 接口定义了12 个数值常量以表示每个节点的类型值。除了IE 之外,所有浏览器都可以访问这个类型。
https://www.wendangku.net/doc/589944469.html, 虽然这里介绍了12 种节点对象的属性,用的多的其实也就几个而已。 alert(Node.ELEMENT_NODE); //1,元素节点类型值 alert(Node.TEXT_NODE); //2,文本节点类型值 我们建议使用Node 类型的属性来代替1,2 这些阿拉伯数字,有可能大家会觉得这样岂不是很繁琐吗?并且还有一个问题就是IE 不支持Node 类型。 如果只有两个属性的话,用1,2 来代替会特别方便,但如果属性特别多的情况下,1、2、3、4、5、6、7、8、9、10、11、12,你根本就分不清哪个数字代表的是哪个节点。当然,如果你只用1,2 两个节点,那就另当别论了。 IE 不支持,我们可以模拟一个类,让IE 也支持。 if (typeof Node == 'undefined') { //IE 返回 window.Node = { ELEMENT_NODE : 1,
https://www.wendangku.net/doc/589944469.html, TEXT_NODE : 3 }; } 2.Document 类型 Document 类型表示文档,或文档的根节点,而这个节点是隐藏的,没有具体的元素标签。 document; //document document.nodeType; //9,类型值 document.childNodes[0]; //DocumentType,第一个子节点对象 document.childNodes[0].nodeType; //非IE 为10,IE 为8 document.childNodes[1]; //HTMLHtmlElement document.childNodes[1].nodeName; //HTML 如果想直接得到标签的元素节点对象HTMLHtmlElement,不必使用childNodes属性这么麻烦,可以使用documentElement 即可。 document.documentElement; //HTMLHtmlElement 在很多情况下,我们并不需要得到标签的元素节点,而需要得到更常用的
事件机制 1.什么是事件? a)在文档中,可以被识别的控件的操作就是事件。鼠标的点击, 单击双击。。鼠标经过移出,键盘按下等。。。 2.事件流? a)在文档中事件执行的顺序就是事件流。 微软公司提出事件的流程应该为冒泡流。 网景公司提出事件的流程应该为捕获流。 W3C为了平衡事件流机制,制订了标准的事件流。 第一阶段:事件流的捕获阶段
第二阶段:处于事件阶段 第三阶段:事件流的冒泡阶段 关于浏览器的问题: 关于标准的事件流,并不是所有的浏览器都能够很好的支持。 能支持标准时间流的浏览器为:IE9+、chrome、firefox、safari、opera,低版本IE678等只支持冒泡流 毋须担心,因为大部分常用事件都是处于冒泡流。 如何添加或者注册事件以及事件的取消: DOM0阶段(无标准阶段) 注册事件 方法1:在HTML中使用事件相关属性 例如:
该方法对于使用DOM0的2中事件添加方法都可以取消。DOM2阶段 注册事件 IE浏览器 attachEvent()方法 格式:元素节点.attachEvent(事件名,事件的执行方法); 参数1:书写时必须是字符串,而且必须有on 参数2:执行事件的方法,要求如果需要删除的情况下必须写声明函数,只有确认不需要删除的情况下才可以使 用匿名函数。推荐使用声明函数 非IE浏览器 addEventListener() 格式:元素节点.addEventListener(‘事件名’,事件的执行方法,处于事件流的阶段); 参数1:书写必须是字符串,而且不能有on 参数2:执行事件的方法,要求如果需要删除的情况下必须写声明函数,只有确认不需要删除的情况下才可以使 用匿名函数。推荐使用声明函数 参数3:设置事件发生的阶段,true捕获阶段false冒泡阶段,默认是false(推荐false) 取消事件
划出的重点 html: img:定义图像, a:定义锚,标签定义超链接,用于从一张页面链接到另一张页面 div:定义文档中的节,
Dom对象的常用方法: (1)getElementById() 查询给定ID属性值的元素,返回该元素的元素节点 1、查询给定ID属性值的元素,返回该元素的元素节点。也称为元素对象。 2、因为在一个html页面中id的值是唯一的,所以返回值也是唯一的。所以方法的名称为getElementById()而不是getElementsById() 3、该方法只能用于document对象,类似与java的static关键字。 (2)getElementsByName()查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合 1、查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合。 2、这个集合可以作为数组来对待,length属性的值表示集合的个数。 3、因为在html页面中,name不能唯一确定一个元素,所以方法的名称为getElementsByName而不是getElementByName (3)getElementsByTagName()查询给定标签名的所有元素 1、查询给定标签名的所有元素 2、因为在html页面中,标签名不是唯一的,所以返回值为节点的集合。 3、这个集合可以当做数组来处理,length属性为集合里所有元素的个数 4、可以有两种形式来执行这个方法: 1、var elements =document.getElementsByTagName(tagName); 2、var elements = element.getElementsByTagName(tagName); 5、从这两种方法可以看出持有这个方法的对象并不一定是整个文档对象(document).也可以是某一个元素节点。 (4)hasChildNodes()该方法用来判断一个元素是否有子节点,返回值为true或者false 1、该方法用来判断一个元素是否有子节点 2、返回值为true或者false 3、文本节点和属性节点不可能再包含子节点,所以对于这两类节点使用ChildNodes()方法返回值永远为false. 4、如果hasChildNodes()返回值为false,则childNodes,firstChild,lastChild 将为空数组或者空字符串。 (5)nodeName 1.如果节点是元素节点,nodeName返回元素的名称 2.如果给定节点为属性节点,nodeName返回属性的名称 3.如果给定节点为文本节点,nodeName返回为#text的字符串 (6)nodeType 1、元素节点类型值为1 2、属性节点类型值为2
第3章DomQuery基础 DomQuery基础 DomQuery的select函数有两个参数。第一个是选择符字符(selector string )而第二个是欲生成查询的标签ID(TAG ID)。本文中我准备使用函数“Ext.query”但读者须谨记它是“Ext.DomQuery.select()”的简写方式。这是要入手的html: 第一部分:元素选择符Selector 假设我想获取文档内所有的“span”标签: // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。Ext.query("span"); // 这个查询会返回有一个元素的数组因为查询到了id=”foo”的div的span标签。 Ext.query("span", "foo"); 注意刚才怎么传入一个普通的字符串作为第一个参数。 按id获取标签,你需要加上“#”的前缀: // 这个查询会返回包含我们foo div一个元素的数组! Ext.query("#foo");
按class name获取标签,你需要加上“.”的前缀: /*这个查询会返回有一个元素的数组, 包含与之前例子一样的div但是我们使用了class name来获取*/ Ext.query(".foo"); 你也可以使用关键字“*”来获取所有的元素: // 这会返回一个数组,包含文档的所有元素。 Ext.query("*"); //[html, head, link, 11 more...] 要获取子标签,我们只须在两个选择符之间插入一个空格: // 这会返回有一个元素的数组,包含p标签的div标签 Ext.query("div p"); // 这会返回有两个元素的数组,包含span标签的div标签 Ext.query("div span"); 第二部分:属性选择符Attributes selectors 这些选择符可让你得到基于一些属性值的元素。属性指的是html元素中的href, id或class。 // 我们检查出任何存在有class属性的元素。用css的name查询时用[] // 这个查询会返回5个元素的数组。 Ext.query("*[class]"); // 结果: [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar] 现在我们针对特定的class属性进行搜索。 // 这会得到class等于“bar”的所有元素 Ext.query("*[class=bar]"); // 这会得到class不等于“bar”的所有元素 Ext.query("*[class!=bar]"); // 这会得到class从“b”字头开始的所有元素 Ext.query("*[class^=b]"); //这会得到class由“r”结尾的所有元素 Ext.query("*[class$=r]"); //这会得到在class中抽出“a”字符的所有元素 Ext.query("*[class*=a]");
第六教案 课题:文档对象模型DOM 目的要求: ?理解DOM模型 ?解析XML文档,生成文档对象 ?操纵DOM模型的对象、接口、属性、方法、事件 重点难点: ?重点:使用DOM API提供的对象和接口对XML进行操作,主 要包括查询、添加、修改、删除接点等操作 ?难点:如何使用API 教学过程: 如图。 作业布置:
一、文档对象模型(DOM)概述 下面,我们将说明如何通过程序访问XML文档。其中一种方法是通过文档对象模型(Document Object Model,DOM)。在本章中,我们将介绍文档对象模型,并借助几个程序实例解释它的功能。 1.1什么是文档对象模型(DOM)? 文档对象模型一词在Web浏览器领域并不陌生。窗口、文档和历史等对象都被认为是浏览器对象模型的一部分。然而,任何做过Web开发的人都知道各种浏览器实现这些对象的方式不尽相同。对于如何通过Web访问和操作文档结构这个问题,为了创建更加标准化的方法,W3C提出了目前的W3C DOM规范。 W3C DOM是一种独立于语言和平台的定义,即:它定义了构成DOM的不同对象的定义,却没有提供特定的实现,实际上,它能够用任何编程语言实现。例如,为了通过DOM访问传统的数据存储,可以将DOM实现为传统数据访问功能之外的一层包装。利用DOM中的对象,开发人员可以对文档进行读取、搜索、修改、添加和删除等操作。DOM为文档导航以及操作HTML和XML文档的内容和结构提供了标准函数。 1.2常见的文档模型 常见的文档模型有三类: 线性模型、树型模型、对象模型。 DOM模型是对象模型。 1.3DOM的工作原理及DOM模型结构 当使用DOM对XML文本文件进行操作时,它首先要解析文件,将文件分解为
使用phantomjs操作DOM并对页面进行截图需要注意的几个问题 phantomjs是一个无界面浏览器,可用于网页截图和前端自动化测试,基于webkit 内核(也就是chrome使用的内核),并使用js编写业务脚本来请求、浏览和操作页面。最近前端监控需要用到phantomjs,特地研究了一下这个组件,遇到几个坑,这里汇总起来,希望对大家尤其是刚入门者有所帮助。 1、如何操作页面中的DOM元素? 这个问题比较简单,官方API提供了page.evaluate函数,范例代码: page.evaluate(function() { var plist = document.querySelectorAll("a");//获取所有链接 }); 2、如何滚动到页面底部? 部分页面使用了lazyload,比如图片或js的延迟加载,只有滚动到底部才会触发,因此对于这种页面,如果要展示完整的页面,则需设法使底部可见,主要有3个办法: 1、使浏览器足够大,这样底部就显示了,可以设置viewPortSize很大:page.viewportSize = {width: 4800,height: 8000}; 2、通过BOM方法操作滚动条,可以把滚动条滚动到一个很大的值,如:window.scrollTo(0,10000);也可以滚动到适应的高度:window.document.body.scrollTop = document.body.scrollHeight; 3、如何延迟截图? 页面请求的资源,如图片、异步cgi、js等,返回的时间以及执行的长短都是不确定的,如果截图过早,可能很多空白区域,因此需要定时截图,在打开页面后,使用setTimeout来延迟截图: window.setTimeout(function () { page.render("json2form.png"); phantom.exit(); }, 1000);