DOM的官方定义
DOM Document Object Model 文档对象模型。
DOM的官方定义：W3C的DOM，可以使程序或脚本(JS或AS、JScript)，动态的访问或操作文档的内容、结构、样式。DOM只是一个标准，就是操作网页的标准。而这个标准(模型)在浏览器中，以“对象”的方式实现。
DOM的分类
●核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。
●HTMLDOM：针对HTML文档，提供的专有的属性和方法。
●XMLDOM：针对XML文档，提供的专有的属性和方法。
●EventDOM：事件DOM，提供了很多的常用事件。
●CSSDOM：提供了操作CSS的一个接口。
HTML节点树
DOM中节点的类型：
●document文档节点：代表整个网页，document文档节点不对应标记。是访问文档中各元素的起点。
●element元素节点：元素节点对应于网页中的各标记。
●attribute属性节点：每个元素都有若干个属性。
●text文本节点：文本节点是最底层节点。
核心DOM公共属性和方法
●nodeName：节点名称。
●nodeV alue：节点的值。
●firstChild：第一个子节点。
●lastChild：最后一个子节点。
●parentNode：父节点。
●childNodes：子节点列表，是一个数组。
节点访问
为什么，document.firstChild找到的不是HTML节点呢？
DOM是针对HTML4.01开发的。我们现在是XHTML1.0。
所以，要想使用核心DOM中的属性和方法，必须去掉DTD类型定义。
为什么，node_body.firstChild找不到table节点？
在Firefox下，会把空格或换行，当成一个文本节点。因此，所有标记之间的空格和换行，都去掉。查找html节点的方法
●document.firstChild
●document.documentElement(兼容性较好)
查找body节点的方法
●https://www.360docs.net/doc/8e3429802.html,stChild
●document.body(推荐使用)
节点属性
1、getAttribute()——获取属性的值
●描述：获取节点属性的值。
●语法：nodeObj.getAttribute(name)
●参数：name代表当前节点的某个属性。
●举例：var src = imgObj.getAttribute(“src”)
2、setAttribute()——添加属性
●描述：给某个节点添加属性。
●语法：nodeObj.setAttribute(name,value)
●参数：
◆name代表属性名称。
◆value代表属性的值。
●举例：imgObj.setAttribute(“src” , “images/02.jpg”)
3、removeAttribute()——删除属性
●描述：删除某个节点的属性。
●语法：nodeObj.removeAttribute(name)
●举例：imgObj.removeAttribute(“src”)
节点操作
createElement()创建节点
●语法：var nodeObj = document.createElement(tagName)
appendChild()追加节点
●语法：parentNode.appendChild(childNode)
课堂实例：随机显示小星星
HTML DOM简介和新特性
在核心DOM中，已经可以实现对网页元素的操作了，为什么还要有HTMLDOM呢？
因为，核心DOM中，对节点的访问，都是从根节点开始的，访问方式十分麻烦。特别是当节点层次很深时，更是麻烦。因此，才有了HTMLDOM。
1、HTMLDOM的新特性
●每一个HTML标记，都对应一个对象。如：![]()
标记，就是一个img对象。
●每一个HTML标记的属性，与对应的元素对象的属性，一一对应。
◆![]()
属性：src、width、height、border、style、title、id、class等。
◆在JS中，img对象属性：src、width、height、border、style、title、id、className等。
2、HTML DOM访问HTML元素的方法
（1）根据元素的id查找对象——document.getElementById(id)
2、根据HTML标签名找对象
●描述：根据HTML标签名找对象
●语法：var arr = parentNode.getElementsByTagName(tagName)●参数：
◆tagName就是要查找的标签名称，不能带尖括号。
◆parentNode代表上层节点。
●返回值：返回一个对象数组。
●举例：ulObj.getElement s ByTagName(“li”)
元素对象的属性
●tagName：与nodeName功能一样。
●className：与class属性功能一样。
●innerHTML：设置或读取某个标记中的所有内容，包括HTML文本。只能用于双边标记。
◆nodeV alue：指纯文本。
●offsetWidth：指元素的可见宽度，不含滚动条中的内容。只读属性。不带px单位。
●offsetHeight：指元素的可见高度，不含滚动条中的内容。只读属性。不带px单位。
●scrollWidth：指元素的总宽度，包含滚动条中的内容。只读属性。不带px单位。
●scrollHeight：指元素的总高度，包含滚动条中的内容。只读属性。不带px单位。
●scrollTop：当元素出现滚动条时，向下拖动滚动条，内容向上滚动的距离。可读可写属性。不带px单位。
◆如果该元素没有滚动条，则scrollTop的值为0，该值只能是正值。
●scrollLeft：与scrollTop描述一样，只是向左滚动的距离。
事件：onscroll
描述：当拖动滚动条时发生。课堂案例：书讯快递
Event DOM
1、事件简介
事件可以实现人机交互，或者与网页的交互。
当网页加载完成(onload)，更改网页背景色(功能函数)。
2、事件属性
每一个HTML标记的属性，与元素对象的属性，一一对应。
每一个HTML标记的事件属性，与元素对象的事件属性，也是一一对应。
HTML中的事件属性：onMouseOver、onLoad、onClick……
JS中的事件属性：onmouseover、onload、onclick……
注意：JS中的事件属性，要全小写。
提示：事件发生后，调用的一定是JS函数，不管是有名函数，还是匿名函数。
Event对象简介
当事件发生时，会自动向事件调用函数，传递一个event参数。那么，这个event参数，就是event对象。Event对象的作用：可以获取当前事件发生时的环境信息。如：点击时的坐标值。
Event对象是短暂存在的，也就是：当一个新的事件发生时，这个event对象就消失了。
每时每刻，只能有一个事件发生。每时每刻，只能有一个event对象产生。
DOM中Event对象——标准浏览器(火狐、谷歌)
1、DOM中引入Event对象
（1）通过HTML标记的事件属性来传递event对象
提示：在传递event时，该event参数，必须全小写，并且不能加引号。
（2）使用元素对象的事件属性来传递event对象
2、DOM中Event对象属性
●type：事件类型
●clientX和clientY：相对浏览器窗口的坐标。
●pageX和pageY：相对网页左端和顶端的距离。
●screenX和screenY：相对显示屏幕左端和顶端的距离。
IE中Event对象
在IE中，event是window对象的一个属性。如：window.event或event 1、IE中引用Event对象
2、IE中Event对象属性
●type：事件类型
●clientX和clientY：相对浏览器窗口的坐标。
●x和y：相对于网页的坐标。
●screenX和screenY：相对于屏幕的坐标。课堂实例：点出满天小星星
jquery中获得jq对象(dom对象集合)的方法
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属性
50个实用的JQUERY案例
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.
class names: 7.$(formToLookAt+"input:checked").each(function(){ 8.keepList=keepList.filter("."+$(this).attr("name")); 9.}); 10.
jquery案例3.任何使用has()来检查某个元素是否包含某个类或是元素： 1.//jQuery1.4.*包含了对这一has方法的支持。该方法找出 2.//某个元素是否包含了其他另一个元素类或是其他任何的 3.//你正在查找并要在其之上进行操作的东东。 4.$("input").has(".email").addClass("email_icon"); jquery案例4.如何使用jQuery来切换样式表 1.//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。 2.$('link[media='screen']').attr('href','Alternative.css'); jquery案例5.如何限制选择范围（基于优化目的）： 1.//尽可能使用标签名来作为类名的前缀， 2.//这样jQuery就不需要花费更多的时间来搜索 3.//你想要的元素。还要记住的一点是， 4.//针对于你的页面上的元素的操作越具体化， 5.//就越能降低执行和搜索的时间。
4：JavaScriptjavaDOM
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 的值递减；
原生JavaScript对于DOM的操作总结
一、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;
Javascript基础
表JS基本类型有什么？引用类型有什么？ 基本类型：number,string,boolean,undefined,null 引用类型：基本类型以外的都是引用类型，如object/array/function/date等等 关于基本类型与引用类型的区别可以详细看看@Naraku_的这篇文章： [ JS 进阶] 基本类型引用类型简单赋值对象引用 概况起来有这么几个要点： 1.我们无法给基本类型的对象添加属性和方法； var m1 = 123; https://www.360docs.net/doc/8e3429802.html, = 'abc'; console.log(https://www.360docs.net/doc/8e3429802.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.360docs.net/doc/8e3429802.html, = 'abc';console.log(https://www.360docs.net/doc/8e3429802.html,); // --> abc console.log(https://www.360docs.net/doc/8e3429802.html,); // --> abc o2.age = '123';console.log(o1.age); // --> 123console.log(o2.age); // --> 123 JS中的常见对置对象类
HTML DOM简要教程
第一部分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节点树 文档树（节点数）
前端面试中常见Vue知识点整理
看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。 不然，稍微有水平的面试官一看就能看出，是否有真才实学还是刚好背中了这道面试题。 一、对于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重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
第4章 JQuery中的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，
js基础术语和概念总结
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 是客户端脚本，通过浏览器解释执行。它不允许访问本地
javascript_dom
什么是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文档：
DOM Tutorial DOM Lesson one
Hello world! 上面所有的节点彼此间都存在关系。 除文档节点之外的每个节点都有父节点。举例， 和的父节点是节点，文本节点"Hello world!"的父节点是节点。 大部分元素节点都有子节点。比方说，节点有一个子节点：
节点。<title>节点也有一个子节点：文本节点"DOM Tutorial"。 当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，<h1>和是同辈，因为它们的父节点均是<body>节点。 节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。比方说，所有的文本节点都是<html>节点的后代，而第一个文本节点是<head>节点的后代。 节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把<html>节点作为先辈节点。</p><h2>HTML鼠标事件</h2><p>HTML鼠标事件 ------------------------------------------------------------------------------- onblur 事件：当鼠标失去焦点后执行 https://www.360docs.net/doc/8e3429802.html,/htmldom/event_onblur.asp https://www.360docs.net/doc/8e3429802.html,/question/60621120.html onblur 事件会在对象失去焦点时发生 例如：我们将在用户离开输入框时执行 JavaScript 代码： ------------------------------------------------------------------------------- onclick 事件：单击鼠标左键后执行 https://www.360docs.net/doc/8e3429802.html,/htmldom/event_onclick.asp ------------------------------------------------------------------------------- ondblclick 事件：双击鼠标左键后执行 https://www.360docs.net/doc/8e3429802.html,/htmldom/event_ondblclick.asp ------------------------------------------------------------------------------- onfocus 事件：事件在对象获得焦点时发生。 https://www.360docs.net/doc/8e3429802.html,/htmldom/event_onfocus.asp ------------------------------------------------------------------------------- onkeydown 事件：事件会在用户按下一个键盘按键时发生。 https://www.360docs.net/doc/8e3429802.html,/htmldom/event_onkeydown.asp ------------------------------------------------------------------------------- onkeypress 事件：onkeypress 事件会在键盘按键被按下并释放一个键时发生。https://www.360docs.net/doc/8e3429802.html,/htmldom/event_onkeypress.asp ------------------------------------------------------------------------------- onKeyUp 事件：事件会在键盘按键被松开时发生。 https://www.360docs.net/doc/8e3429802.html,/htmldom/event_onkeyup.asp <input type="text" onkeyup="alert(this.value)"/> 敲入一个a弹出一个a <input type="text" onkeypress="alert(this.value)"/> 敲入一个a弹出一个空。再敲入一个s弹出一个a 。再敲入一个s弹出一个sa ------------------------------------------------------------------------------- onmousedown 事件：事件会在鼠标按键被按下时发生。 https://www.360docs.net/doc/8e3429802.html,/htmldom/event_onmousedown.asp</p><h2>DOM常用节点类型汇总</h2><p>https://www.360docs.net/doc/8e3429802.html, web前端培训教程：DOM常用节点类型汇总 DOM 基础课程中，我们了解了DOM 的节点并且了解怎样查询和操作节点，而本身这些不同的节点，又有着不同的类型。</p><p>https://www.360docs.net/doc/8e3429802.html, 1.Node 类型 Node 接口是DOM1 级就定义了，Node 接口定义了12 个数值常量以表示每个节点的类型值。除了IE 之外，所有浏览器都可以访问这个类型。</p><p>https://www.360docs.net/doc/8e3429802.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,</p><p>https://www.360docs.net/doc/8e3429802.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 如果想直接得到<html>标签的元素节点对象HTMLHtmlElement，不必使用childNodes属性这么麻烦，可以使用documentElement 即可。 document.documentElement; //HTMLHtmlElement 在很多情况下，我们并不需要得到<html>标签的元素节点，而需要得到更常用的 <body>标签，之前我们采用的是：document.getElementsByTagName('body')[0]，那么这里提供一个更加简便的方法：document.body。</p><h2>事件机制</h2><p>事件机制 1.什么是事件？ a)在文档中，可以被识别的控件的操作就是事件。鼠标的点击， 单击双击。。鼠标经过移出，键盘按下等。。。 2.事件流？ a)在文档中事件执行的顺序就是事件流。 微软公司提出事件的流程应该为冒泡流。 网景公司提出事件的流程应该为捕获流。 W3C为了平衡事件流机制，制订了标准的事件流。 第一阶段：事件流的捕获阶段</p><p>第二阶段：处于事件阶段 第三阶段：事件流的冒泡阶段 关于浏览器的问题： 关于标准的事件流，并不是所有的浏览器都能够很好的支持。 能支持标准时间流的浏览器为:IE9+、chrome、firefox、safari、opera，低版本IE678等只支持冒泡流 毋须担心，因为大部分常用事件都是处于冒泡流。 如何添加或者注册事件以及事件的取消: DOM0阶段（无标准阶段） 注册事件 方法1：在HTML中使用事件相关属性 例如:<div onclick=”action()”> 方法2：在JS的元素节点中使用和事件同名的属性添加 例如：元素节点.onlick=action; 注意：方法2中的action是一个函数，可以是声明函数也可以是一个匿名函数 取消事件 在添加事件的方法2基础上进行重新赋值即可 元素节点.onclick=null;</p><p>该方法对于使用DOM0的2中事件添加方法都可以取消。DOM2阶段 注册事件 IE浏览器 attachEvent()方法 格式:元素节点.attachEvent(事件名,事件的执行方法); 参数1：书写时必须是字符串，而且必须有on 参数2：执行事件的方法，要求如果需要删除的情况下必须写声明函数，只有确认不需要删除的情况下才可以使 用匿名函数。推荐使用声明函数 非IE浏览器 addEventListener() 格式：元素节点.addEventListener(‘事件名’,事件的执行方法,处于事件流的阶段); 参数1：书写必须是字符串，而且不能有on 参数2：执行事件的方法，要求如果需要删除的情况下必须写声明函数，只有确认不需要删除的情况下才可以使 用匿名函数。推荐使用声明函数 参数3:设置事件发生的阶段，true捕获阶段false冒泡阶段，默认是false（推荐false） 取消事件</p><h2>前端基础知识</h2><p>划出的重点 html: img：定义图像，<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" /> a：定义锚，标签定义超链接，用于从一张页面链接到另一张页面 div：定义文档中的节，<div> 可定义文档中的分区或节（division/section）。 <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 ul：标签定义无序列表 li：标签定义列表项目。 <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 p：标签定义段落。 p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。 br： 可插入一个简单的换行符。 <br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。 span：定义文档中的节，用来组合文档中的行内元素 table：定义表格，简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。 th：定义表格中的表头单元格。表单中有两种类型的单元格： 表头单元格 - 包含表头信息（由 th 元素创建） 标准单元格 - 包含数据（由 td 元素创建） tr：标签定义 HTML 表格中的行。 tr 元素包含一个或多个 th 或 td 元素 td：标签定义 HTML 表格中的标准单元格。 HTML 表格有两类单元格： 表头单元 - 包含头部信息（由 th 元素创建） 标准单元 - 包含数据（由 td 元素创建） css:width宽度 height高度 font规定文本的字体、字体尺寸、字体颜色 color颜色 background 背景 margin外边距 border边框 padding内边距 position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 display显示 js:变量（var） 使用 var 关键词来声明变量， 数组和对象（array和objcet）：所有事物都是对象：字符串、数字、数组、日期，等等，对象是拥有属性和方法的数据 函数（function）：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。</p><h2>DOM获取节点的三种常用方法</h2><p>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</p><h2>第3章 EXT-DomQuery基础</h2><p>第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");</p><p>按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]");</p><h2>XML DOM</h2><p>第六教案 课题：文档对象模型DOM 目的要求： ?理解DOM模型 ?解析XML文档，生成文档对象 ?操纵DOM模型的对象、接口、属性、方法、事件 重点难点： ?重点：使用DOM API提供的对象和接口对XML进行操作，主 要包括查询、添加、修改、删除接点等操作 ?难点：如何使用API 教学过程： 如图。 作业布置：</p><p>一、文档对象模型(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文本文件进行操作时，它首先要解析文件，将文件分解为</p><h2>使用phantomjs操作DOM并对页面进行截图需要注意的几个问题</h2><p>使用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);</p></div>
<div class="rtopicdocs">
<div class="coltitle">相关主题</div>
<div class="relatedtopic">
<div id="tabs-section" class="tabs">
<ul class="tab-head">
<li id="15218366"><a href="/topic/15218366/" target="_blank">dom操作</a></li>
<li id="14075065"><a href="/topic/14075065/" target="_blank">dom事件</a></li>
<li id="16321255"><a href="/topic/16321255/" target="_blank">javascript操作dom</a></li>
<li id="10316834"><a href="/topic/10316834/" target="_blank">dom对象</a></li>
<li id="7759227"><a href="/topic/7759227/" target="_blank">dom基础</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="rightcol" class="viewcol">
<div class="coltitle">相关文档</div>
<ul class="lista">
<li><a href="/doc/0e10660031.html" target="_blank">第8章 jQuery中的DOM操作-任务3 制作电子邮件删除效果</a></li>
<li><a href="/doc/238120520.html" target="_blank">HTML DOM简要教程</a></li>
<li><a href="/doc/3a12194254.html" target="_blank">使用phantomjs操作DOM并对页面进行截图需要注意的几个问题</a></li>
<li><a href="/doc/6914283965.html" target="_blank">js和DOM的区别</a></li>
<li><a href="/doc/8317618256.html" target="_blank">基础知识点总结DOM操作</a></li>
<li><a href="/doc/b63472725.html" target="_blank">DOM节点操作静态初始化表格并且动态添加删除表格</a></li>
<li><a href="/doc/c111265392.html" target="_blank">jQuery教学设计-jQuery操作DOM</a></li>
<li><a href="/doc/e317004115.html" target="_blank">DOM与节点详解</a></li>
<li><a href="/doc/ff9957020.html" target="_blank">JS 里操作 DOM 的几个标准属性与方法</a></li>
<li><a href="/doc/255346221.html" target="_blank">第4章 JQuery中的DOM操作-实训报告</a></li>
<li><a href="/doc/3410150539.html" target="_blank">HTMLDOM详解</a></li>
<li><a href="/doc/662439105.html" target="_blank">JavaScript语言操作DOM</a></li>
<li><a href="/doc/8215795332.html" target="_blank">HTML DOM 教程</a></li>
<li><a href="/doc/b2979037.html" target="_blank">JAVASCRIPT DOM编程艺术</a></li>
<li><a href="/doc/c38911089.html" target="_blank">JQuery中的DOM操作-实训报告</a></li>
<li><a href="/doc/e515245239.html" target="_blank">DOM文档对象模型介绍</a></li>
<li><a href="/doc/f96323061.html" target="_blank">原生jsDOM节点操作集合</a></li>
<li><a href="/doc/f717143184.html" target="_blank">DOM节点操作的练习及答案</a></li>
<li><a href="/doc/127094825.html" target="_blank">DOM接口</a></li>
<li><a href="/doc/2016985067.html" target="_blank">DOM常用节点类型汇总</a></li>
</ul>
<div class="coltitle">最新文档</div>
<ul class="lista">
<li><a href="/doc/0f19509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li>
<li><a href="/doc/0119509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li>
<li><a href="/doc/9b19184372.html" target="_blank">自然教育课件</a></li>
<li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li>
<li><a href="/doc/d819211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li>
<li><a href="/doc/a419240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li>
<li><a href="/doc/9d19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li>
<li><a href="/doc/8a19195909.html" target="_blank">高中语文知识点整理总结</a></li>
<li><a href="/doc/8519195910.html" target="_blank">高中语文知识点归纳</a></li>
<li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li>
<li><a href="/doc/7119336999.html" target="_blank">超详细的高中语文知识点归纳</a></li>
<li><a href="/doc/6619035160.html" target="_blank">高考语文知识点总结高中</a></li>
<li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li>
<li><a href="/doc/4a19232289.html" target="_blank">高中语文知识点整理总结</a></li>
<li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li>
<li><a href="/doc/2619396978.html" target="_blank">高中语文知识点归纳(大全)</a></li>
<li><a href="/doc/2b19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li>
<li><a href="/doc/1419338136.html" target="_blank">高中语文基础知识点整理</a></li>
<li><a href="/doc/ed19066069.html" target="_blank">化工厂应急预案</a></li>
<li><a href="/doc/bd19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li>
</ul>
</div>
</div>
<script>
var sdocid = "82d6bfe8bbd528ea81c758f5f61fb7360a4c2b58";
</script>
<div class="clearfloat"></div>
<div id="footer">
<div class="ft_info">
<a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a> ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br />
本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈
</div>
<script type="text/javascript">foot()</script>
</div>
</body>
</html>
