文档库
文档库 最新最全的文档下载
当前位置：文档库 › 在js里操作DOM树

在js里操作DOM树

在js里操作DOM树
在js里操作DOM树

在 js 里操作 DOM 树
DOM 眼中的 HTML 文档：树 在 DOM 眼中，HTML 跟 XML 一样是一种树形结构的文档，是根（root） 节点，、、<body>是<html>的子（children）节点，互相之间是兄弟<br>（sibling）节点；<body>下面才是子节点<table>、<span>、<p>等等。如下图：<br>这个是不是跟 XML 的结构有点相似呢。 不同的是， HTML 文档的树形主要包含表示元 素、标记的节点和表示文本串的节点。<br>7.4.2、HTML 文档的节点 DOM 下，HTML 文档各个节点被视为各种类型的 Node 对象。每个 Node 对象都 有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。由于 HTML 文 档的复杂性，DOM 定义了 nodeType 来表示节点的类型。这里列出 Node 常用的几 种节点类型： 接口 nodeType 常量 nodeType 备注 值 Element Node.ELEMENT_NODE 1 元素节点 Text Node.TEXT_NODE 3 文本节点 Document Node.DOCUMENT_NODE 9 document Comment https://www.wendangku.net/doc/665770272.html,MENT_NODE 8 注释的文 本 DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document 片断 Attr Node.ATTRIBUTE_NODE 2 节点属性 DOM 树的根节点是个 Document 对象， 该对象的 documentElement 属性引用表 示文档根元素的 Element 对象（对于 HTML 文档，这个就是<html>标记）。 Javascript 操作 HTML 文档的时候， document 即指向整个文档， <body>、 <table><br><br></p><!--/p1--><!--p2--><p>等节点类型即为 Element。Comment 类型的节点则是指文档的注释。具体节点类 型的含义，请参考《Javascript 权威指南》，在此不赘述。 Document 定义的方法大多数是生产型方法， 主要用于创建可以插入文档中的 各种类型的节点。常用的 Document 方法有： 方法 描述 createAttribute() 用指定的名字创建新的 Attr 节点。 createComment() 用指定的字符串创建新的 Comment 节点。 createElement() 用指定的标记名创建新的 Element 节点。 createTextNode() 用指定的文本创建新的 TextNode 节点。 getElementById() 返回文档中具有指定 id 属性的 Element 节点。 getElementsByTagName() 返回文档中具有指定标记名的所有 Element 节点。 对于 Element 节点，可以通过调用 getAttribute()、setAttribute()、 removeAttribute()方法来查询、设置或者删除一个 Element 节点的性质，比如 <table>标记的 border 属性。下面列出 Element 常用的属性： 属性 描述 tagName 元素的标记名称，比如<p>元素为 P。HTML 文档返回的 tabName 均为 大写。 Element 常用的方法： 方法 描述 getAttribute() 以字符串形式返回指定属性的值。 getAttributeNode() 以 Attr 节点的形式返回指定属性的值。 getElementsByTabName() 返回一个 Node 数组，包含具有指定标记名的所有 Element 节点的子孙节点，其顺序为在文档中出现的 顺序。 hasAttribute() 如果该元素具有指定名字的属性，则返回 true。 removeAttribute() 从元素中删除指定的属性。 removeAttributeNode() 从元素的属性列表中删除指定的 Attr 节点。 setAttribute() 把指定的属性设置为指定的字符串值， 如果该属性不 存在则添加一个新属性。 setAttributeNode() 把指定的 Attr 节点添加到该元素的属性列表中。 Attr 对象代表文档元素的属性，有 name、value 等属性，可以通过 Node 接 口的 attributes 属性或者调用 Element 接口的 getAttributeNode()方法来获 取。不过，在大多数情况下，使用 Element 元素属性的最简单方法是 getAttribute()和 setAttribute()两个方法，而不是 Attr 对象。 7.4.3、使用 DOM 操作 HTML 文档 Node 对象定义了一系列属性和方法，来方便遍历整个文档。用 parentNode 属性和 childNodes[]数组可以在文档树中上下移动；通过遍历 childNodes[]数 组或者使用 firstChild 和 nextSibling 属性进行循环操作，也可以使用 lastChild 和 previousSibling 进行逆向循环操作，也可以枚举指定节点的子节 点。而调用 appendChild()、insertBefore()、removeChild()、replaceChild() 方法可以改变一个节点的子节点从而改变文档树。 需要指出的是，childNodes[]的值实际上是一个 NodeList 对象。因此，可 以通过遍历 childNodes[]数组的每个元素，来枚举一个给定节点的所有子节点；<br><br></p><!--/p2--><!--p3--><p>通过递归，可以枚举树中的所有节点。下表列出了 Node 对象的一些常用属性和 方法： Node 对象常用属性： 属性 描述 attributes 如果该节点是一个 Element，则以 NamedNodeMap 形式返回该 元素的属性。 childNodes 以 Node[]的形式存放当前节点的子节点。如果没有子节点， 则返回空数组。 firstChild 以 Node 的形式返回当前节点的第一个子节点。 如果没有子节 点，则为 null。 lastChild 以 Node 的形式返回当前节点的最后一个子节点。 如果没有子 节点，则为 null。 nextSibling 以 Node 的形式返回当前节点的兄弟下一个节点。 如果没有这 样的节点，则返回 null。 nodeName 节点的名字，Element 节点则代表 Element 的标记名称。 nodeType 代表节点的类型。 parentNode 以 Node 的形式返回当前节点的父节点。如果没有父节点，则 为 null。 previousSibling 以 Node 的形式返回紧挨当前节点、位于它之前的兄弟节点。 如果没有这样的节点，则返回 null。 Node 对象常用方法： 方法 描述 appendChild() 通过把一个节点增加到当前节点的 childNodes[]组，给文档 树增加节点。 cloneNode() 复制当前节点，或者复制当前节点以及它的所有子孙节点。 hasChildNodes() 如果当前节点拥有子节点，则将返回 true。 insertBefore() 给文档树插入一个节点， 位置在当前节点的指定子节点之前。 如果该节点已经存在，则删除之再插入到它的位置。 removeChild() 从文档树中删除并返回指定的子节点。 replaceChild() 从文档树中删除并返回指定的子节点， 用另一个节点替换它。 接下来，让我们使用上述的 DOM 应用编程接口，来试着操作 HTML 文档。 A、遍历文档的节点 DOM 把一个 HTML 文档视为树，因此，遍历整个树是应该是家常便饭。跟之前 说过的一样，这里我们提供两个遍历树的例子。通过它，我们能够学会如何使用 childNodes[]和 firstChile、lastChild、nextSibling、previousSibling 遍历 整棵树。 例子 1-- sample3_1.htm： 这个例子使用了 childNodes[]和递归方式来遍历整个文档， 统计文档中出现 的 Element 元素总数，并把 Element 标记名全部打印出来。需要特别注意的是， 在使用 DOM 时，必须等文档被装载完毕再执行遍历等行为操作文档。 sample3_1.htm 具体代码如下： <html> <head><br><br></p><!--/p3--><!--p4--><p><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档 开始统计 运行效果如下：
例子 2 – sample3_2.htm： 接下来使用 firstChile、lastChild、nextSibling、previousSibling 遍历 整个文档树。修改一下 countTotalElement 函数，其他跟 sample3_1.htm 一样： function countTotalElement(node) { //参数 node 是一个 Node 对象 var total = 0;

if(node.nodeType == 1) { //检查 node 是否为 Element 对象 total++; //如果是，计数器加 1 elementName = elementName + node.tagName + "\r\n"; //保 存标记名 } var childrens = node.childNodes; //获取 node 的全部子节 点 for(var m=node.firstChild; m!=null;m=m.nextSibling) { total += countTotalElement(m); //在每个子节点上进行递归 操作 } return total; } B、搜索文档中特定的元素 在使用 DOM 的过程中，有时候需要定位到文档中的某个特定节点，或者具有 特定类型的节点列表。这种情况下，可以调用 Document 对象的 getElementsByTagName()和 getElementById()方法来实现。 document.getElementsByTagName()返回文档中具有指定标记名的全部 Element 节点数组（也是 NodeList 类型）。Element 出现在数组中的顺序就是他 们在文档中出现的顺序。传递给 getElementsByTagName()的参数忽略大小写。 比如，想定位到第一个

标记，可以这样写： document.getElementsByTagName(“table”)[0]。例外的，可以使用 document.body 定位到标记，因为它是唯一的。 getElementsByTagName()返回的数组取决于文档。一旦文档改变，返回结果 也立即改变。相比，getElementById()则比较灵活，可以随时定位到目标，只是 要实现给目标元素一个唯一的 id 属性值。这个我们在《AJAX 开发简略》的“级 联菜单”例子中已经使用过了。 Element 对象也支持 getElementsByTagName()和 getElementById()。 不同的 是，搜索领域只针对调用者的子节点。 C、修改文档内容 遍历整棵文档树、搜索特定的节点，我们最终目的之一是要修改文档内容。 接下来的三个例子将使用 Node 的几个常用方法，来演示如何修改文档内容。 例子 3 -- sample4_1.htm： 这个例子包含三个文本节点和一个按钮。点击按钮后，三个文本节点和按钮 的顺序将被颠倒。程序使用了 Node 的 appendChild()和 removeChild()方法。 无标题文档

第一行

第二行

第三行


例子 4-- sample4_2.htm： 例子 1 通过直接操作 body 的子节点来修改文档。在 HTML 文档中，布局和定 位常常通过表格
来实现。因此，例子 4 将演示操作表格内容，将表格的 四个单元行顺序颠倒。 如果没有使用标签，则
把全部的当做 是属于一个子节点， 所以我们采用数组缓存的方式，把行数据颠倒一下。 这个例子同时也演示了如何使用 DOM 创建表格单元行。 无标题文档
第一行
第二行
第三行
第四行


例子 5 -- sample4_3.htm：

正如我们在 Node 节点介绍部分所指出的那样，appendChild()、 replaceChild()、 removeChild()、insertBefore()方法会立即改变文档的结构。 下面的例子包含两个表格，我们试着把表格二的内容替换表格一的内容。 无标题文档

表格一



表格二


注意，当执行 kid1.replaceChild(repKid,kid1.firstChild);的时候， table2 的子节点已经被转移到 table1 了，table2 已经没有子节点，不能再调用 table2 的子节点。看看代码的注释，试着运行一下，应该就知道文档是怎么改 变的了。 D、往文档添加新内容 在学会遍历、搜索、修改文档之后，我们现在试着网文档添加新的内容。其 实没有什么新意，只是利用我们上述提到的 Node 的属性和方法而已，还是操作 标记的内容。有新意的是，我们要实现一个留言簿。是的，留言簿，你 可以往里面留言，只是不能刷新噢。 例子 6 – sample5_1.htm： 无标题文档
网友留言列表：
我们之前说过，的子节点是，的子节点才是， 是
的父节点，最后内部的 TextNode 节点。所以，往增加单 元格行要逐级形成，就像往树里面添加一个枝桠一样，要有叶子有径。看看，这 个留言簿是不是很简单啊。这个例子同时也演示了往
表格标记里面增加 内容的另一种方法。

E、使用 DOM 操作 XML 文档 在数据表示方面，XML 文档更加结构化。DOM 在支持 HTML 的基础上提供了一 系列的 API，支持针对 XML 的访问和操作。利用这些 API，我们可以从 XML 中提 取信息，动态的创建这些信息的 HTML 呈现文档。处理 XML 文档，通常遵循“加 载 XML 文档?提取信息?加工信息?创建 HTML 文档”的过程。下面的例子演示 了如何加载并处理 XML 文档。 这个例子包含两个 JS 函数。loadXML()负责加载 XML 文档，其中既包含加载 XML 文档的 2 级 DOM 代码，又有实现同样操作的 Microsoft 专有 API 代码。需要 提醒注意的是，文档加载过程不是瞬间完成的，所以对 loadXML()的调用将在加 载文档完成之前返回。因此，需要传递给 loadXML()一个引用，以便文档加载完 成后调用。 例子中的另外一个函数 makeTable()，则在 XML 文档加载完毕之后，使用最 后前介绍过的 DOM 应用编程接口读取 XML 文档信息， 并利用这些信息形成一个新 的 table 表格。 例子 7 -- sample6_1.htm： 无标题文档

供读取调用的 XML 文档 – employees.xml： Programmer 32768 Sales 70000 CEO 100000
7.5、处理 XML 文档 脱离 XML 文档的 AJAX 是不完整的。在本部分未完成之前，有读者说 AJAX 改 名叫 AJAH（H 应该代表 HTML 吧）比较合适。应该承认，XML 文档在数据的结构 化表示以及接口对接上有先天的优势，但也不是所有的数据都应该用 XML 表示。 有些时候单纯的文本表示可能会更合适。下面先举个 AJAX 处理返回 XML 文档的 例子再讨论什么时候使用 XML。 7.5.1、处理返回的 XML 例子 8 -- sample7_1.htm： 在这个例子中，我们采用之前确定的 AJAX 开发框架，稍微修改一下 body 内 容和 processRequest 的相应方式，将先前的 employees.xml 的内容读取出来并 显示。 body 的内容如下： processRequest()方法修改如下：

// 处理返回信息的函数 function processRequest() { if (http_request.readyState == 4) { // 判断对象状态 if (http_request.status == 200) { // 信息已经成功返回，开 始处理信息 var returnObj = http_request.responseXML; var xmlobj = http_request.responseXML; var employees = xmlobj.getElementsByTagName("employee"); var feedbackStr = ""; for(var i=0;i7.5.2、选择合适的 XML 生成方式 现在的 web 应用程序往往采用了 MVC 三层剥离的设计方式。XML 作为一种数 据保存、呈现、交互的文档，其数据往往是动态生成的，通常由 JavaBean 转换 过来。由 JavaBean 转换成 XML 文档的方式有好几种，选择合适的转换方式往往

能达到事半功倍的效果。 下面介绍两种常用的方式，以便需要的时候根据情况取 舍。 A、类自行序列化成 XML 类自行序列化成 XML 即每个类都实现自己的 toXML()方法，选择合适的 API、 适当的 XML 结构、尽量便捷的生成逻辑快速生成相应的 XML 文档。显然，这种方 式必须要求每个类编写专门的 XML 生成代码，每个类只能调用自己的 toXML()方 法。应用诸如 JDOM 等一些现成的 API，可以减少不少开发投入。例子 9 是一个 利用 JDOM 的 API 形成的 toXML()方法。 例子 9 -- toXml() 的 JDOM 实现 -- Employ 类的 toXml()方法： public Element toXml() { Element employee = new Element(“employee”); Employee.setAttribute(“name”,name); Element jobE = new Element(“job”).addContent(job); employee.setContent(jobE); Element salaryE = new Element(“salary”).addContent(salary); employee.setContent(salaryE); return employee; } JDOM 提供了现成的 API，使得序列化成 XML 的工作更加简单，我们只需要把 toXML()外面包装一个 Document，然后使用 XMLOutputter 把文档写入 servlet 就可以了。toXml()允许递归调用其子类的 toXML()方法，以便生成包含子图的 XML 文档。 使用类自行序列化成 XML 的方式，要每个类都实现自己的 toXML()方法， 而且存在数据模型与视图耦合的问题，即要么为每个可能的视图编写独立的 toXML()方法， 要么心甘情愿接收冗余的数据，一旦数据结构或者文档发生改变， toXML()就要做必要的修改。 B、页面模板生成 XML 方式 一般的，可以采用通用的页面模板技术来生成 XML 文档，这个 XML 文档可以 符合任何需要的数据模型，供 AJAX 灵活的调用。另外，模板可以采用任何标记 语言编写，提高工作效率。下面是一个采用 Struts 标签库编写的 XML 文档，输 出之前提到的 employees.xml： Sample8_2.jsp： <%@ page contentType="application/xml; charset=gb2312" import="Employee"%> <%@ page import="java.util.Collection,java.util.ArrayList"%> <%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %> <%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%> <% Employee em1 = new Employee(); em1.setName("J.Doe"); em1.setJob("Programmer"); em1.setSalary("32768"); Employee em2 = new Employee();

em2.setName("A.Baker"); em2.setJob("Sales"); em2.setSalary("70000"); Employee em3 = new Employee(); em3.setName("Big Cheese"); em3.setJob("CEO"); em3.setSalary("100000"); Collection employees = new ArrayList(); employees.add(em1); employees.add(em2); employees.add(em3); pageContext.setAttribute("employees",employees); %>
采用页面模板生成 XML 方式，需要为每个需要的的数据模型建立一个对立的 JSP 文件，用来生成符合规范的 XML 文档，而不能仅仅在类的 toXML()方法中组织对 象图来实现。不过，倒是可以更加方便的确保标记匹配、元素和属性的顺序正确 以及 XML 实体正确转义。

参考资料中 Philip McCarthy 的文章还描述了一种 Javascript 对象标注的 生成方式，本文在此不赘述。有兴趣的读者可以自行查看了解。 7.5.3、如何在使用 XML 还是普通文本间权衡 使用 XML 文档确实有其方便之处。 不过 XML 文档的某些问题倒是要考虑一下， 比如说延迟， 即服务器不能立即解析 XML 文档成为 DOM 模型。这个问题在一定程 度上会影响 AJAX 要求的快速反应能力。 另外， 某些情况下我们并不需要使用 XML 来表示数据， 比如说数据足够简单成只有一个字符串而已。就好像我们之前提到 的数据校验和级联菜单的例子一样。所以，个人认为在下面这些情况下可以考虑 使用 XML 来作为数据表示的介质： ? 数据比较复杂，需要用 XML 的结构化方式来表示 ? 不用考虑带宽和处理效率支出 ? 与系统其他 API 或者其他系统交互，作为一种数据中转中介 ? 需要特定各式的输出视图而文本无法表示的 总之，要认真评估两种表示方式的表示成本和效率，选择合适的合理的表示 方式。 在关于 AJAX 的系列文章的下一篇，我们将综合使用 DOM 和 XML，来实现一个 可以持久化的简单留言簿。另外，还将试着模拟 MSN Space 的部分功能，来体会 AJAX 的魅力。

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 的值递减；

《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重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

网页设计与制作项目教程(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分）

HTML鼠标事件

HTML鼠标事件 ------------------------------------------------------------------------------- onblur 事件：当鼠标失去焦点后执行 https://www.wendangku.net/doc/665770272.html,/htmldom/event_onblur.asp https://www.wendangku.net/doc/665770272.html,/question/60621120.html onblur 事件会在对象失去焦点时发生 例如：我们将在用户离开输入框时执行 JavaScript 代码： ------------------------------------------------------------------------------- onclick 事件：单击鼠标左键后执行 https://www.wendangku.net/doc/665770272.html,/htmldom/event_onclick.asp ------------------------------------------------------------------------------- ondblclick 事件：双击鼠标左键后执行 https://www.wendangku.net/doc/665770272.html,/htmldom/event_ondblclick.asp ------------------------------------------------------------------------------- onfocus 事件：事件在对象获得焦点时发生。 https://www.wendangku.net/doc/665770272.html,/htmldom/event_onfocus.asp ------------------------------------------------------------------------------- onkeydown 事件：事件会在用户按下一个键盘按键时发生。 https://www.wendangku.net/doc/665770272.html,/htmldom/event_onkeydown.asp ------------------------------------------------------------------------------- onkeypress 事件：onkeypress 事件会在键盘按键被按下并释放一个键时发生。https://www.wendangku.net/doc/665770272.html,/htmldom/event_onkeypress.asp ------------------------------------------------------------------------------- onKeyUp 事件：事件会在键盘按键被松开时发生。 https://www.wendangku.net/doc/665770272.html,/htmldom/event_onkeyup.asp 敲入一个a弹出一个a 敲入一个a弹出一个空。再敲入一个s弹出一个a 。再敲入一个s弹出一个sa ------------------------------------------------------------------------------- onmousedown 事件：事件会在鼠标按键被按下时发生。 https://www.wendangku.net/doc/665770272.html,/htmldom/event_onmousedown.asp

web开发知识练习(HTML标签和JavaScript脚本)

网上客服培训考核 －－－阶段二HTML标签和JavaScript脚本 试题类型：HTML标签和JavaScript脚本 考核类型：开卷

1. HTML（Hypertext Markup Language超文本标记语言）是一种用来制作超文本文 档的简单标记语言。利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息 2.HTML的标记总是封装在由 < 和 > 构成的一对尖括号之中。 除少数几个转义序列之外，HTML标记忽略大小写，即等价于<TITLE> 3. <html> 标记用于Html文档的最前边，用来标识Html文档的开始。而</html>标记 恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束。所有其它HTML标记和文档内容都包含在这对标记之间。 4.<head> 与 </head> 之间的头部信息通常含有 <title> 标记，用来确定HTML文件 的标题，即显示在浏览器左上角标题栏处的文字。 5. <head></head> 构成Html文档的开头部分，此标记对之间包含的是HTML文档 的头信息，如标题、说明内容等等，其中可包括<title>、等标记对 6. 之间的内容是HTML文档的主体部分，在此标记对之间可包含、 、

、

、
、
等众多的标记它们所定义的文本、图像等将会在浏览器的框内显示出来，标记中还可以有很多属性，以下是主要的几种设置背景颜色bgcolor =”颜色码”，设置文本颜色 text = “颜色码”，设置链接颜色 link = “颜色码”，设置已使用的链接的颜色 vlink = “颜色码”，设置正在被击中的链接的颜色 alink = “颜色码”。 7. 之间的内容是HTML文档的标题，标题的显示位置不是浏览器的 文本区，而是在Web浏览器窗口最左上方的蓝色标题栏里。 8.标记对是用来创建一个段落（Paragraph），在此标记对之间加入的文 本将按照段落的格式显示在浏览器上。另外，标记还可以使用align属性，它用来说明对齐方式 9. 是典型的单标记，使用也很简单，它的功能是用来创建一个回车换行 10.
标志对用来排版大块Html段落，也用于格式化表，此标志对的用法与 标志对非常相似，同样有align对齐方式属性。 11. 
 标记用于显示预格式化文本（Preformatted Text），在这对标记之 间的文本，与其他HTML文本的格式编辑方式不同 12.Html语言提供了一系列对文本中的标题进行操作的标记对： 
 ……
，一共有六对标题的标记对 13.用来使文本以粗体效果的形式输出； 14.用来使文本以斜体效果的形式输出； 15.用来使文本以带下划线的形式输出。 16.则用来输出加重语气文本(通常也是斜体加黑体)。 17.  是一对很有用的标记对，它可以对输出文本的字体大小、颜色进 行随意地改变，这些改变主要是通过对它的两个属性 size 和 color 的控制来实现的。 size属性用来改变字体的大小，取值范围从1到7；而color属性则用来改变文本的颜色 18.  是单标记，它通过src属性指定当前位置要插入的图像文件,标记还有alt、
事件机制
事件机制 1.什么是事件？ a)在文档中，可以被识别的控件的操作就是事件。鼠标的点击， 单击双击。。鼠标经过移出，键盘按下等。。。 2.事件流？ a)在文档中事件执行的顺序就是事件流。 微软公司提出事件的流程应该为冒泡流。 网景公司提出事件的流程应该为捕获流。 W3C为了平衡事件流机制，制订了标准的事件流。 第一阶段：事件流的捕获阶段
第二阶段：处于事件阶段 第三阶段：事件流的冒泡阶段 关于浏览器的问题： 关于标准的事件流，并不是所有的浏览器都能够很好的支持。 能支持标准时间流的浏览器为:IE9+、chrome、firefox、safari、opera，低版本IE678等只支持冒泡流 毋须担心，因为大部分常用事件都是处于冒泡流。 如何添加或者注册事件以及事件的取消: DOM0阶段（无标准阶段） 注册事件 方法1：在HTML中使用事件相关属性 例如:
 方法2：在JS的元素节点中使用和事件同名的属性添加 例如：元素节点.onlick=action; 注意：方法2中的action是一个函数，可以是声明函数也可以是一个匿名函数 取消事件 在添加事件的方法2基础上进行重新赋值即可 元素节点.onclick=null;
该方法对于使用DOM0的2中事件添加方法都可以取消。DOM2阶段 注册事件 IE浏览器 attachEvent()方法 格式:元素节点.attachEvent(事件名,事件的执行方法); 参数1：书写时必须是字符串，而且必须有on 参数2：执行事件的方法，要求如果需要删除的情况下必须写声明函数，只有确认不需要删除的情况下才可以使 用匿名函数。推荐使用声明函数 非IE浏览器 addEventListener() 格式：元素节点.addEventListener(‘事件名’,事件的执行方法,处于事件流的阶段); 参数1：书写必须是字符串，而且不能有on 参数2：执行事件的方法，要求如果需要删除的情况下必须写声明函数，只有确认不需要删除的情况下才可以使 用匿名函数。推荐使用声明函数 参数3:设置事件发生的阶段，true捕获阶段false冒泡阶段，默认是false（推荐false） 取消事件
关于JavaScript  DOM的学习总结
关于JavaScript的学习总结 通过对《JavaScript DOM编程艺术》这本书的学习，总共学习到三大部分的内容：JavaScript1,JavaScript DOM和CSS样式表。CSS和JavaScript 都是通过控制页面标签的方式，来完善页面，使页面更美观，内容更丰富。 一、JavaScript部分 1．关于JavaScript js脚本语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 2．JS变量 2.1 JS的变量为易变量，没有类型的限制可以等于所有的类型。 2.2 JS变量的命名规则和java相同，且区分大小写。 JS的数据类型有7种：Number 数字类型、String 字符串类型、Boolean 布尔类型、Array 数组类型、Object 对象、Null 空对象、Undefined 未定义。 2.3 变量的声明，直接用var关键字声明即可：var a=90。也可以一次性声明多个变量：var b=1,c=2,d=3。如果一个变量没有声明就使
用，或是声明了没有设置值都是undefined。 3．数据类型的定义 数值类型: var age=33; 字符串类型: var mood=”happy” 布尔值类型: var add=true; 数组类型: var list= Array(2) list[0]=”jhon”; list[1]=33; 或者: var list=Array(“jhon”,33) (注:数组内可定义任意类型的数据,且数组下标从0 开始) NULL类型: var name=null ;或name=””; Undefined类型: var person; 对象类型: var jer= new person; 对象类型是一种非常重要的数据类型.对象是自我包含的数据集合,包含在对象里的数据可以通过两种方式--属性(property)和方法(method) 访问 例如: person.age Math.round() 4．JS操作符 算数操作符:加法(+),减法(-),乘法(*),除法(/) 如: var num=1+1; var num=num-1; var num=num*num; var num=num/2;
JAVASCRIPT
Javascript 114、alert怎样换行? \r\n 115、什么情况用HTML控件，什么情况用WEB控件，并比较两者差别 如果有数据提交到server端时用web control好。一般为了提高效率能用html control在客户端执行，就用html control。 116、JavaScript中的对象. JavaScript中的Object是一组数据的key-value的集合,有点类似于Java中的有这些数据都是Object里的property.通常情况下,JavaScript中建立一个对象用”new”加上constructor function来实现.如new Date(),new Object()等. var book=new Object(); https://www.wendangku.net/doc/665770272.html,="JavaScript is Cool"; book.author="tom"; book.pages=514; 上面例子中的name和page就是名为book的对象中的property.我们可以用delete 来删除Object中的property:“delete https://www.wendangku.net/doc/665770272.html,;”.除了Object,Date等buildin 的对象外,我们可以写自己的constructor function,然后使用new就可以建立自己的对象.如上面的book可以写成: function Book(name,author,page){ https://www.wendangku.net/doc/665770272.html,=name; this.author=author; this.page=page; } var abook=new Book("JavaScript is Cool","tom",514); 117、function的用法 在JavaScript中,function是一种数据类型,所有的function都是从buildin的Function object衍生的对象.所以在JavaScript中function可以作为参数传递,可以作为Object的property,也可以当作函数返回值.function在JavaScript中有两种用法,一种是当作constructor,前面加上new keyword用来建立对象.一种是当作method,为其他对象调用. 注意function和method在中文里的意思相当,在有些语言里也可以通用.但是在JavaScript中,它们还是有所区别的.function本身是是一个对象,而当作为一个方法他属于一个对象时,就成为了一个这个对象的method,相当于一个对象种的属性.也就是说method是相对于一个对象而言的,function在某些情况下成为了一个对象的method. function Book(name,author,page){ https://www.wendangku.net/doc/665770272.html,=name; this.author=author; this.page=page;
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>JavaScript对Table操作大全</h2><p>js对Table操作大全 <html> <head> <style> .btf{ height:28px; background-color:#F8F0E1; } </style> <script type="text/javascript"> var objTable; function PageLoad(){ objTable = document.getElementById( "dataGrid" );//找到操作Table } function copyRow(){ var objTempRow = objTable.rows[2];//找到Table的模版行 var objNewRow = objTable.insertRow( objTable.rows.length );//在Table 的末尾新增一行 objNewRow.className = "btf";//给表格的添加行样式 objNewRow.id = objTable.rows.length - 1; //以模版行建立新行内容 for ( var i=0 ; i<objTempRow.cells.length ; i++ ){ var objNewCell = objNewRow.insertCell( i ); objNewCell.innerHTML = objTempRow.cells[i].innerHTML; } } function deletelastRow(){ if ( objTable.rows.length -1 > 0 ){ objTable.deleteRow(objTable.rows.length-1); //删除指定行} } function deletecheckedRow(){ if(document.all('idarray').value!='undefined'){ for(var i=document.all('idarray').length-1;i>-1;i--){ if(document.all('idarray')[i].checked==true){ var r=Number(document.getElementById('tb'+document.all('idarray')[i].value) .rowIndex); objTable.deleteRow(r); } } } } function deleteRow(r){ var i=r.parentNode.parentNode.rowIndex; objTable.deleteRow(i); } function addRow1(){ var crTR = objTable.insertRow(); //增加一行 var crTDa = crTR.insertCell();//第一个TD var crTDb = crTR.insertCell();//第二个TD,带rowspan=2 crTDb.rowSpan=2;//设成rowspan=2; crTDb.colSpan=3;//设成colSpan=3;</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><h2>锋利的jquery</h2><p>第1章 1.简述jQuery的实质及其优势。jQuery是一个轻量级javascript库 轻量级（Lightweight），强大的选择器，出色的DOM操作封装，可靠的事件处理机制，完善的Ajax ，出色的浏览器兼容性，不污染顶级变量，链式操作方式，隐式迭代，行为层与结构层分离，丰富的插件支持，完善的文档，开源 2.写jQuery程序前需要做什么准备工作？jQuery的压缩版的非压缩版分别适用于什么场合？ 完整，无压缩版，可供学习、开发。压缩后的版本，主要用于项目的发布。 3.简述$(document).ready()与window.onload的相同点和不同点。 在DOM中，浏览器加载文档完毕，会发生onload事件。 $(document).ready(function(){ }) 相当于window.onload事件，但有区别： （1）执行时机： window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行。 $(document).ready() 是在DOM完全就绪时就可以被调用，并不意味着这些元素关系的文件都已经下载完毕。 （2）多次使用： $(document).ready()事件可以在同一个页面注册多个 （3）简写方式：可以缩写成 $(function(){ }) 或$().ready(function(){ })</p><p>4.什么是jQuery对象和DOM对象？二者如何转换？ 将DOM对象转换为JQuery对象的方法：$(DOM对象)； 将JQuery对象转换为DOM对象的方法：var domobj = jqobj[0]或者var domobj=jqobj.get(0) 第2章 1.jQuery中的选择器分为哪几类？其中过滤选择器分为哪几小类？ 2.写出每个层次选择器的符号及其含义。 1.$(“ancestor descendant”)：选取祖先元素中所有的后代元素： $("body div")：选取body元素下所有的div元素 2.$(“parent > child”)：选取父元素下的子元素。 $(“body > div”)：选取body元素下所有的div子元素 3. $(“prev + next”)：匹配紧接在prev 元素后的next 元素 $("#div_b1 span + input").css("background-color","red"); 4. $(“prev ~ siblings”)：匹配prev 元素之后的所有兄弟元素 $("#div_c1 span ~ input").css("background-color","red");</p><h2>javascript100道试题</h2><p>移动增值业务wmlscript 一、填空题。 1、扩展名是________的文件是java的源码文件。 2、Java脚本是________端的语言。 3、Java脚本中输出语句是______。 4、Java脚本中document.write的功能是______。 5、Javascript中，document.bgColor的功能是______ 。 6、Window.open()的功能是________。 7、Javascript常用的三种鼠标事件有______、______、______。 8、window._______方法是关闭网页文档的。 1、9、<script _______=*.js>…</script>。 10、保存为Html文件语言是_______端语言。 11、html文件中h的意思是___________.。 12、CSS的中文全称是__________________________。 13、<________ language=”javascript”>document.write(“大家好哦！”);</script>。 14、http我们称之为_____________.。 15、http协议的缺省端口是____________。 16、单选框标记是___________________________。 17、文本框标记是__________________________。 18、javascript的标签标记是__________________。 19、表格中td标记之间必须要有_________，否则表格不能正常显示。 20、onmouseout事件是________。 21、onmouseover事件是___________。 22、onblue事件是_________________。 23、function单词的意思是____________。 14、var x;语句的功能是_________________。 25、变量b和B变量是_____________。 二、单选题。 01.（）下列是javascript原文件扩展名是： A. HTML B.BODY C. js D. DIV</p><h2>Javascript综合复习题大全及答案</h2><p>J a v a s c r i p t综合复习题【共116题】 每份考卷中javascript只占一半。题型和分数如下： 1.单选题：10题*1分 = 10分 2.填空题：5题*1分 = 5分 3.程序阅读题：2题*4分 = 8分 4.程序实现题：2题*5分 = 10分 5.简答题：3题*5分 = 15分 合计：48分，共22题。 剩余52分，23题是另一门课程。 【提示：本综合复习题的目的是让同学们多见识各种题目。选择题、填空题以及程序阅读题可以仔细做，对于程序实现和简答题建议先理解再记忆，切记死背答案。】 第一部分：单选题 1.Javascript中, 以下哪条语句一定会产生运行错误？答案( B ) A、var _变量=NaN; B、var 0bj = []; C、var obj = string B. length C.非法字符 2.下面哪个描述不正确（ B ） A. NaN!=null ==NaN C.{}!=false !=false 3.var arr = new Array(new Array(9,0,3,4,5) , ['a' , 'b' , 'c'] , new Array(2,9,0,6));则arr[1][3]=（ D ） B.6 4.有如下代码： var arr = new Array(9); arr[0]=1; arr[2]=2; 该数组的length属性值为（ D ） A、2 B、10 C、8 D、9 5.有一个submit按钮，在这个按钮控件上添加哪个事件不起作用？（ D ） D. onsubmit 6.有一个变量var a=typeof string + 100+50 + NaN，以下哪个是alert(a)的结果？ （ C ） B. function10050NaN C. undefined10050NaN D. NaN 7.以下代码，哪个结果是正确的？（ A ） var str='123abc'; str += ('abc' , ''); alert(str);</p><h2>Javascript_DOM编程艺术翻译版</h2><p>第3章DOM 本章内容 ● 节点的概念 ●四个非常实用的DOM方法：getElementById、getElementsByTagName、getAttribute 和setAttribute 终于要与DOM面对面了。能够向大家介绍DOM是笔者的荣幸，我非常乐于带领大家通过DOM的眼睛去看世界。 3.1文档：DOM中的“D” DOM是“Document Object Model”（文档对象模型）的首字母缩写。如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web 浏览器中时，DOM就在幕后悄然而生。它将根据你编写的网页文档创建一个文档对象。 在人类语言中，“对象”这个词的含义往往不那么明确和具体，它几乎可以用来称呼任何一种客观存在的事物。但在程序设计语言中，“对象”这个词的含义非常明确和具体。 3.2对象：DOM中的“O” 在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你们应该还记得，“对象”是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性；可以通过某个特定对象去调用的函数被称为这个对象的方法。 JavaScript语言里的对象可以分为三种类型： ●用户定义对象（user-defined object）：由程序员自行创建的对象。本书不讨论这种对象。 ●内建对象（native object）：内建在JavaScript语言里的对象，如Array、Math和Date 等。</p><p>●宿主对象（host object）：由浏览器提供的对象。 在JavaScript语言的发展初期，程序员在编写JavaScript脚本时经常需要用到一些非常重要的宿主对象，它们当中最基础的是window对象。 window对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为B OM（浏览器对象模型）——但我觉得称之为Window Object Model（窗口对象模型）更为贴切。BOM向程序员提供了window.open和window.blur等方法，你们在上网冲浪时看到的各种弹出窗口和下拉菜单——其数量之多已经到了泛滥成灾的地步——几乎都是由这些方法负责创建和处理的。难怪JavaScript会有一个不好的名声！ 值得庆幸的是，在这本书里我们不需要与BOM打太多的交道。我们将把注意力集中在浏览器窗口的内部而不是浏览器窗口本身。我们将着重探讨如何对网页的内容进行处理，而用来实现这一目标的载体就是document对象。 在本书的后续内容里，我们将尽可能地只讨论document对象的属性和方法。 现在，我们已经对DOM中的字母“D”（document，文档）和字母“O”（ob ject，对象）做了解释，那么字母“M”又代表着什么呢？ 3.3模型：DOM中的“M” DOM中的“M”代表着“Model”（模型），但说它代表着“Map”（地图）也未尝不可。模型也好，地图也罢，它们的含义都是某种事物的表现形式。就像一个模型火车代表着一列真正的火车、一张城市街道图代表着一个实际存在的城市那样，DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过JavaScript去读取这张地图。 既然是地图，就必须有诸如方向、等高线和比例尺之类的记号。要想看懂和使用地图，就必须知道这些记号的含义和用途——这个道理同样适用于DOM。要想从DOM获得信息，我们必须先把各种用来表示和描述一份文档的记号弄明白。</p></div>
        </div>
        <div>
            <div>相关文档</div>
            <div class="relatedtopic">
                <div id="tabs-section" class="tabs">
                    <ul class="tab-head">
                            <li id="16321255"><a href="/topic/16321255/" target="_blank">javascript操作dom</a></li>
                            <li id="14075065"><a href="/topic/14075065/" target="_blank">dom事件</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="category">
        <span class="navname">相关文档</span>
        <ul class="lista">
                <li><a href="/doc/149719663.html" target="_blank">web开发知识练习(HTML标签和JavaScript脚本)</a></li>
                <li><a href="/doc/3a17795696.html" target="_blank">第十五章 JavaScript_HTML DOM对象</a></li>
                <li><a href="/doc/9a7016764.html" target="_blank">(完整word版)HTML CSS JavaScript教学教案</a></li>
                <li><a href="/doc/e18677393.html" target="_blank">HTML&JavaScript编程笔试题(前端)</a></li>
                <li><a href="/doc/0f3074788.html" target="_blank">在JS里操作DOM树</a></li>
                <li><a href="/doc/2114386159.html" target="_blank">javascript_dom</a></li>
                <li><a href="/doc/602439105.html" target="_blank">JavaScript语言操作DOM</a></li>
                <li><a href="/doc/b715410764.html" target="_blank">基于javascript实现表格的简单操作</a></li>
                <li><a href="/doc/fc7115082.html" target="_blank">JavaScript精品教程资料：2.JavaScript操作BOM对象</a></li>
                <li><a href="/doc/0516494816.html" target="_blank">网页设计与制作项目教程(HTML+CSS+JavaScript)(一般)</a></li>
                <li><a href="/doc/3312746801.html" target="_blank">《HTML CSS JAVASCRIPT网页制作案例教程》_教学大纲</a></li>
                <li><a href="/doc/9b6822803.html" target="_blank">第二十一讲 JavaScript HTML DOM 对象(二)</a></li>
                <li><a href="/doc/d218630804.html" target="_blank">javascriptDom节点API个人总结</a></li>
                <li><a href="/doc/2412768553.html" target="_blank">JAVASCRIPT</a></li>
                <li><a href="/doc/4c10232950.html" target="_blank">Javascript_DOM编程艺术翻译版</a></li>
                <li><a href="/doc/bb5167977.html" target="_blank">JavaScript精品教程资料：3.JavaScript操作DOM对象</a></li>
                <li><a href="/doc/f76323061.html" target="_blank">原生jsDOM节点操作集合</a></li>
                <li><a href="/doc/0515318976.html" target="_blank">《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解</a></li>
                <li><a href="/doc/3512194254.html" target="_blank">使用phantomjs操作DOM并对页面进行截图需要注意的几个问题</a></li>
                <li><a href="/doc/7113479930.html" target="_blank">JavaScript操作HTML文档</a></li>
        </ul>
        <span class="navname">最新文档</span>
        <ul class="lista">
                <li><a href="/doc/0719509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li>
                <li><a href="/doc/0e19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li>
                <li><a href="/doc/9319184372.html" target="_blank">自然教育课件</a></li>
                <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li>
                <li><a href="/doc/db19211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li>
                <li><a href="/doc/af19240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li>
                <li><a href="/doc/9919184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li>
                <li><a href="/doc/8b19195909.html" target="_blank">高中语文知识点整理总结</a></li>
                <li><a href="/doc/8019195910.html" target="_blank">高中语文知识点归纳</a></li>
                <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li>
                <li><a href="/doc/7a19336999.html" target="_blank">超详细的高中语文知识点归纳</a></li>
                <li><a href="/doc/6719035160.html" target="_blank">高考语文知识点总结高中</a></li>
                <li><a href="/doc/6a19035161.html" target="_blank">高中语文知识点总结归纳</a></li>
                <li><a href="/doc/4d19232289.html" target="_blank">高中语文知识点整理总结</a></li>
                <li><a href="/doc/3a19258758.html" target="_blank">高中语文知识点归纳</a></li>
                <li><a href="/doc/2519396978.html" target="_blank">高中语文知识点归纳(大全)</a></li>
                <li><a href="/doc/2419396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li>
                <li><a href="/doc/1f19338136.html" target="_blank">高中语文基础知识点整理</a></li>
                <li><a href="/doc/ef19066069.html" target="_blank">化工厂应急预案</a></li>
                <li><a href="/doc/bc19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li>
        </ul>
    </div>
</div>
<script>
    var sdocid = "64e405aa680203d8ce2f2423";
</script>

        <div class="footer">
            <p><a href="/tousu.html" target="_blank">侵权投诉</a>  © 2013-2023 www.wendangku.net  <a href="/sitemap.html">站点地图</a> | <a href="https://m.wendangku.net">手机版</a></p>
            <p><a href="https://beian.miit.gov.cn" target="_blank">闽ICP备11023808号-7</a>  本站文档均来自互联网及网友上传分享，本站只负责收集和整理，有任何问题可通过上访投诉通道进行反馈</p>
        </div>
        <script type="text/javascript">foot();</script>
    </div>
</body>
</html>