DOM基础
DOM基础
DOM(Document Object Model)——文档对象模型
什么是DOM？
Document Object Model (DOM)是HTML和XML文档的编程接口。它提供了上述文档的一种结构化表示，同时也定义了一种通过程序来改变文档结构，风格，以及内容的方式。DOM用一组结构化的节点以及对象来表示文档。本质上就是将网页和脚本语言以及编程语言连接起来。
一个网页是一个文档。这个文档可以被显示在浏览器窗口中，也可以以html 源码的形式显示。这两中情况中，文档都是同一个。DOM提供了另一种方式来表示，存储，操作这个文档。DOM是网页的一种完全的面向对象的表示方法，可以通过脚本语言（比如说JavaScript）来改变。
W3C DOM标准形成了当今大多数浏览器的DOM基础。许多浏览器提供超出W3C 标准的扩展，所以当用在可能被拥有不同DOM的各种浏览器使用的场合时一定要多加注意
DOM标准主要要为：微软DOM与W3C DOM，一般IE实现的是微软DOM，而其它浏览器则不同程度的实际了W3C DOM
DOM发展史
DOM Level Zero ,事实上从来不存在DOM 0版本，只是人们的戏称。只是在W3C DOM出现之前，不同浏览器（主要是IE与NN）实现的DOM相互排
斥，1996年的浏览器大战所产生的DHTML就是所谓的DOM 0，它是脚本程序员的恶梦
?DOM Level 1 包括DOM Core和DOM HTML。前者提供了基于XML的文档结构图。后者添加了一些HTML专用的对象和方法，从而扩展了DOM Core.
目前IE在内的大部分桌面浏览器都通过不同方式实现了DOM 1 ?DOM Level 2 引入几个新模块：DOM视图，事件，样式，遍历和范围。IE 只实现了一部分，火狐浏览器几乎全部实现，除IE之外的浏览器也实现了大部分
?DOM Level 3 引入了以统一的方式载入和保存文档的方法。DOM Core被扩展支持所有的XML1.0的特性。火狐浏览器之类实现了少部分在开始阶段，JavaScript和DOM是紧密的联系在一起的，但是最终他们将发展为独立的实体。网页的内容存储在DOM中并且可以被JavaScript访问和处理，所以我们可以得到写下这个近似的等式：
API（网页或者XML页面）＝DOM ＋ JS（脚本语言）
DOM被设计为独立于任何特定的编程语言，通过协调一致的API以确保这种文档的结构化表现形式是有效的。虽然DOM的实现可以建立在任何语言上，但是在这里我们专注于JavaScript上的DOM实现!
尽管DOM很大程度上受到浏览器中动态HTML发展的影响，但W3C还是将它最先应用于XML。
DOM与BOM的关系
DOM与BOM的关系？——BOM包含DOM
DOM与BOM结构视图
DOM Core
文档对象模型-DOM,就是使用树视图来形容HTML代码,看下面的一张HTML页面的源代码
浏览器接受该页面并将之转换为树形结构
获取元素常用方法
document对象是BOM的一部分，同时也是HTML DOM的HTMLDocument对象的一种表现形式，反过来说，它也是XML DOM Document对象。JavaScript中的大部分处理DOM的过程都利用document对象，所以我们访问文档需要使用BOM 提供的这个入口。
document对象有三个强大的方法，可以获取页面的任何元素
获取和设置元素属性——getAttribute与setAttribute方法
节点基础
文档根节点
获取head与body
还可以使用节点,在使用节点前，先了解一些节点基础知识
常用节点类型
?元素节点——文档中具有标签的节点
?文本节点——标签中不是注释的文本块
常用的节点属性
?nodeType——节点类型，元素节点是1，文本节点是3
?nodeValue——节点值，元素节点为空，文本节点的nodeValue属性即为文本内容
?firstChild——该元素节点包含的第一个子节点
?lastChild——该元素节点包含的最后一个子节点
?nextSibling——该节点的后一个兄弟节点
?previousSibling——该节点的前一个兄弟节点
?childNodes——子节点列表,可以通过node.childNodes[index]（或node.childNodes.item(index)）来获取子节点
?nodeName——节点名称，对于元素节点，返回tagName,对于文本，则返回#text
考虑下面的HTML代码所表示的节点结构
上面的HTML代码将会解析成两个节点:元素节点——p标签，文本节点——Some Text.也就是说，标签中包含的一些文本也是节点，那么空格之类的非打印字符会不会被当作文本节点呢？
答案并不确定，但是仍然有办法解决——使用节点类型检测,每个节点都有nodeType属性，指明它的节点类型。对于元素节点，它的值是1，而对于文本节点，它的值是3
HTML DOM
HTML DOM用对象来表示HTML标签,考虑下面的代码——
一般所说的DOM是指XML DOM，而W3C也为HTML页面提供了更快捷的DOM——HTML DOM!使用HTML DOM，能使访问HTML标签的属性就像访问JavaScript 创建的对象的属性一样简单.
使用HTML DOM也使得访问页面一些元素变得更加简单
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.
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.wendangku.net/doc/3915013009.html, = 'abc'; console.log(https://www.wendangku.net/doc/3915013009.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/3915013009.html, = 'abc';console.log(https://www.wendangku.net/doc/3915013009.html,); // --> abc console.log(https://www.wendangku.net/doc/3915013009.html,); // --> abc o2.age = '123';console.log(o1.age); // --> 123console.log(o2.age); // --> 123 JS中的常见对置对象类
《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 （课程英文名称） 课程编号：201509210011 学分：5学分 学时：64学时（其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、 JavaScript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事（2学时） [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准，明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时） [相关案例] 【案例1】简单的网页： 【案例2】新闻页面： 【案例3】图文混排： [知识点] HTML文档基本格式
前端面试中常见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，
网页设计与制作项目教程(HTML+CSS+JavaScript)(一般)
《网页设计与制作项目教程（）（一般）》试卷 得分 一、单选题（每题2分，共计30分） 1．关于<>标记的描述，下列选项中正确的是（）。（） A、是表格中的单元格标记 B、可以单独使用 C、是表格中的行标记 D、没有属性 2．若超链接的属性，需要链接到页面中的锚点，以下书写正确的是（）（） A、 B、 C、 D、 3．中，通过链接伪类可以实现不同的链接状态。下列用来定义未访问时超链接状态的是（）（）A、 B、 C、 D、4．下列有关样式，说法正确的是（）。（） A、样式必须写在一对;标签内部 B、用于设置页面中的文本内容、图片的外形以及版面的布局等外观显示样式 C、只有外部的文件才是符合结构与表现分离的特点 D、目前流行的版本为3 5．下列样式代码中，可以实现相对定位模式的是（）。（） A、: ; B、: ; C、: ; D、: ; 6．关于样式代码“{:200; :15; :20;}”下列说法正确的是（）。（） A、的总宽度为200 B、的总宽度为270 C、的总宽度为235 D、以上说法均错误 7．关于行内式引入样式表，以下书写正确的是（）（） A、 :12; ;段落文本; B、 :12, ;段落文本; C、 :12; ;段落文本; D、 :12; ;段落文本; 8．使用标签指定式选择器，让段落应用名为的类，下列写法正确的是( )（） 总分题号一二三四五题分 得分
A、 {;} B、{;} C、{;} D、{;} 9．下列选项中，调用名为"" 的函数正确的是（）（） A、 B、() C、() D、 10．认真阅读下面代码，并按要求进行作答。1=" a "2=" "312;根据上述代码，3的运算结果是（）（） A、 B、 C、 D、 11．关于有序列表的描述，下列说法正确的是（）（） A、有序列表没有排列顺序 B、有序列表按顺序排列，并不带有序号 C、有序列表按顺序排列并通过属性定义序号样式 D、有序列表不可以和无序列表嵌套使用 12．若要在网页中插入样式表，以下用法中正确的是（）（） A、; B、; C、; D、; 13．下列选项中，用于删除当前节点的子节点的方法是（）（） A、() B、() C、() D、() 14．以下属性中，不能增加盒子尺寸的属性是（）。（） A、 B、 C、 D、 15．网页程序设计中，运行下面的代码，则对话框中将显示（）。< ""> 3 2 (2)(z);<>（） A、2 B、2.5 C、5 D、16 得分 二、多选题（每题3分，共计15分）
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 是客户端脚本，通过浏览器解释执行。它不允许访问本地
HTML鼠标事件
HTML鼠标事件 ------------------------------------------------------------------------------- onblur 事件：当鼠标失去焦点后执行 https://www.wendangku.net/doc/3915013009.html,/htmldom/event_onblur.asp https://www.wendangku.net/doc/3915013009.html,/question/60621120.html onblur 事件会在对象失去焦点时发生 例如：我们将在用户离开输入框时执行 JavaScript 代码： ------------------------------------------------------------------------------- onclick 事件：单击鼠标左键后执行 https://www.wendangku.net/doc/3915013009.html,/htmldom/event_onclick.asp ------------------------------------------------------------------------------- ondblclick 事件：双击鼠标左键后执行 https://www.wendangku.net/doc/3915013009.html,/htmldom/event_ondblclick.asp ------------------------------------------------------------------------------- onfocus 事件：事件在对象获得焦点时发生。 https://www.wendangku.net/doc/3915013009.html,/htmldom/event_onfocus.asp ------------------------------------------------------------------------------- onkeydown 事件：事件会在用户按下一个键盘按键时发生。 https://www.wendangku.net/doc/3915013009.html,/htmldom/event_onkeydown.asp ------------------------------------------------------------------------------- onkeypress 事件：onkeypress 事件会在键盘按键被按下并释放一个键时发生。https://www.wendangku.net/doc/3915013009.html,/htmldom/event_onkeypress.asp ------------------------------------------------------------------------------- onKeyUp 事件：事件会在键盘按键被松开时发生。 https://www.wendangku.net/doc/3915013009.html,/htmldom/event_onkeyup.asp 敲入一个a弹出一个a 敲入一个a弹出一个空。再敲入一个s弹出一个a 。再敲入一个s弹出一个sa ------------------------------------------------------------------------------- onmousedown 事件：事件会在鼠标按键被按下时发生。 https://www.wendangku.net/doc/3915013009.html,/htmldom/event_onmousedown.asp
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节点树 文档树（节点数）
web开发知识练习(HTML标签和JavaScript脚本)
网上客服培训考核 －－－阶段二HTML标签和JavaScript脚本 试题类型：HTML标签和JavaScript脚本 考核类型：开卷
1. HTML（Hypertext Markup Language超文本标记语言）是一种用来制作超文本文 档的简单标记语言。利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息 2.HTML的标记总是封装在由 < 和 > 构成的一对尖括号之中。 除少数几个转义序列之外，HTML标记忽略大小写，即
、
、、
等众多的标记它们所定义的文本、图像等将会在浏览器的框内显示出来，标记中还可以有很多属性，以下是主要的几种设置背景颜色bgcolor =”颜色码”，设置文本颜色 text = “颜色码”，设置链接颜色 link = “颜色码”，设置已使用的链接的颜色 vlink = “颜色码”，设置正在被击中的链接的颜色 alink = “颜色码”。 7.
……，一共有六对标题的标记对 13.用来使文本以粗体效果的形式输出； 14.用来使文本以斜体效果的形式输出； 15.用来使文本以带下划线的形式输出。 16.则用来输出加重语气文本(通常也是斜体加黑体)。 17. 是一对很有用的标记对，它可以对输出文本的字体大小、颜色进 行随意地改变，这些改变主要是通过对它的两个属性 size 和 color 的控制来实现的。 size属性用来改变字体的大小，取值范围从1到7；而color属性则用来改变文本的颜色 18. ![]()
是单标记，它通过src属性指定当前位置要插入的图像文件,标记还有alt、DOM常用节点类型汇总
https://www.wendangku.net/doc/3915013009.html, web前端培训教程：DOM常用节点类型汇总 DOM 基础课程中，我们了解了DOM 的节点并且了解怎样查询和操作节点，而本身这些不同的节点，又有着不同的类型。
https://www.wendangku.net/doc/3915013009.html, 1.Node 类型 Node 接口是DOM1 级就定义了，Node 接口定义了12 个数值常量以表示每个节点的类型值。除了IE 之外，所有浏览器都可以访问这个类型。
https://www.wendangku.net/doc/3915013009.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/3915013009.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 在很多情况下，我们并不需要得到标签的元素节点，而需要得到更常用的
标签，之前我们采用的是：document.getElementsByTagName('body')[0]，那么这里提供一个更加简便的方法：document.body。事件机制
事件机制 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） 取消事件
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文档：