JavaScriptDOM实验指导.ppt

JavaScript DOM,2012.3.12,文档对象模型DOM,DOM是Document Object Model(文档对象模型)的缩写 DOM 是 W3C（万维网联盟） 的推荐标准。 DOM 定义了访问诸如 XML 和 XHTML 文档的标准。 W3C DOM 被分为 3 个不同的部分/级别 核心 DOM 用于任何结构化文档的标准模型 XML DOM 用于 XML 文档的标准模型 HTML DOM 用于 HTML 文档的标准模型,标记语言文档的层次结构,特殊标记 文档声明 文档类型定义 处理指令 注释 元素：标记或闭合标记对 属性：标记中包含的按名称访问的子节点 子元素：闭合标记对中包含的元素 子元素可以按顺序访问 文本 文档：包含所有元素、特殊标记,HTML DOM 节点树, 标题 链接 ,HTML DOM 节点层次,document,DOCTYPE,HTML（documentElement）,HEAD,BODY,TITLE,标题,A,href,链接,节点彼此间的关系,父节点：除文档节点之外的每个节点都有父节点。 和 的父节点是 节点 文本节点 “链接“ 的父节点是 节点。 子节点： 节点有一个子节点： 节点。 节点也有一个子节点：文本节点 “标题“。 同辈（同级节点）：当节点分享同一个父节点时，它们就是同辈（同级节点） 和 是同辈，因为它们的父节点均是 节点。 后代：后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。 所有的文本节点都是 节点的后代，而第一个文本节点是 节点的后代。 先辈：先辈是某个节点的父节点，或者父节点的父节点，以此类推。 所有的文本节点都可把 节点作为先辈节点。,DOM的接口和类(继承关系),Node 节点 Element 元素节点 HTMLElement HTML元素节点 Attr 属性节点 Document 文档节点 HTMLDocument HTML文档节点 NodeList 节点列表 NamedNodeMap 命名的节点映射,HTML Document 对象,每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 提示： Document 对象可通过 window.document 属性对其进行访问。 因为window是全局环境的默认对象，所以可以直接使用document对其进行访问,向文档写入内容,write() 和writeln()方法可向文档写入 HTML 表达式或 JavaScript 代码。 语法 document.write(exp1,exp2,exp3,) document.writeln(exp1,exp2,exp3,) writeln() 在输出内容之后再输出一个换行符（注意不是，所以在浏览器中看不出来）,例：向文档写入内容,document.writeln(“Hello World!“) document.write(“Hello World!“) document.write(“Hello World! “,“Hello You! “,“Hello World!“),获取节点类型、名称、值,node的属性 nodeName 节点名称（大写） nodeValue 节点值 nodeType 节点类型 应用实例 var x=document; document.writeln(“节点类型：“+x.nodeType+“，节点名称：“+x.nodeName+“，节点值：“+x.nodeValue+“.“);,节点类型、名称、值,获取元素的引用,直接获取特定节点的引用 根据ID属性获取节点的引用 根据NAME属性获取节点引用的列表 根据标记名获取节点引用的列表 获取相邻节点的引用,直接获取特定节点,document 返回HTML 文档的文档节点 document.documentElement 可返回存在于 XML 以及 HTML 文档中的文档根节点。 对 HTML 页面提供了对 标签的直接访问 document.body 对 HTML 页面的特殊扩展，提供了对 标签的直接访问。,例：直接获取特定节点,var x=document; document.writeln(“节点类型：“+x.nodeType+“，节点名称：“+x.nodeName+“，节点值：“+x.nodeValue+“.“); var x=document.documentElement; document.writeln(“节点类型：“+x.nodeType+“，节点名称：“+x.nodeName+“，节点值：“+x.nodeValue+“.“); var x=document.body; document.writeln(“节点类型：“+x.nodeType+“，节点名称：“+x.nodeName+“，节点值：“+x.nodeValue+“.“);,根据元素的ID属性获取元素,getElementById() 方法可返回对拥有指定 id 属性的第一个元素的引用。 语法 document.getElementById(id) 说明 HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。 在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。,例：使用 getElementById(), function getValue() var x=document.getElementById(“myHeader“) alert(x.innerHTML) 这是标题 点击标题，会提示出它的值。 ,自定义简化版getElementById(),getElementById() 是一个重要的方法，在 DOM 程序设计中，它的使用非常常见。我们为您定义了一个工具函数，这样您就可以通过一个较短的名字来使用 getElementById() 方法了： function id(x) if (typeof x = “string“) return document.getElementById(x); return x; 上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数，您只要在使用前编写 x = id(x) 就可以了。,NodeList 对象,NodeList 对象代表一个有顺序的节点列表。 我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。 节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加，列表也会被自动更新。 注释：在一个节点列表中，节点被返回的顺序与它们在 XML 被规定的顺序相同。 NodeList 对象的属性 Length，可返回节点列表中的节点数目。 NodeList 对象的方法 item()，可返回节点列表中处于指定的索引号的节点。,获取文档中所有具有指定name属性值的元素的列表,getElementsByName() 方法可返回带有指定名称的对象的元素列表。 语法 document.getElementsByName(name) 说明 该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。 因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。,例：使用 getElementsByName(), function getElements() var x=document.getElementsByName(“myInput“); alert(x.length); alert(x.item(0); alert(x0); ,根据标记名选择子孙元素列表,Document 和 Element接口都具有getElementsByTagName() 方法，可返回子孙元素中带有指定标签名的节点列表 语法 document.getElementsByTagName(tagname) Element对象.getElementsByTagName(tagname) 说明 getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。 如果把特殊字符串 “*“ 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表。 传递给 getElementsByTagName() 方法的字符串可以不区分大小写。,例：使用 getElementsByTagName(), function getElements() var x=document.getElementsByTagName(“div“); var y=x0.getElementsByTagName(“div“); alert(y.length); alert(y.item(0); ,获取相邻节点的引用,node的属性 parentNode 节点的父节点 childNodes 节点的子节点列表 firstChild 节点的首个子节点 lastChild 节点的最后一个子节点 nextSibling 节点的下一个同级节点 previousSibling 节点的前一个同级节点,空白文本节点,Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而 Mozilla 不会这样做。 可以检查每一个子节点的节点类型，只对需要处理的节点类型的节点。,例：获取相邻节点的引用, firstChild lastChild var x=document.getElementById(“parent“); alert(x.firstChild.nodeValue); alert(x.lastChild.nodeValue); x=x.childNodes1; alert(x.parentNode.id); alert(x.nextSibling.nodeValue); alert(x.previousSibling.nodeValue); ,创建新节点,Document 对象方法 createElement(“标记名”) 创建元素节点 createTextNode(“文本”) 创建文本节点 注意：新创建的节点并不会出现在文档中，必须添加到文档的某个节点之下,节点处理,Node 对象方法 cloneNode() 复制节点 appendChild() 向节点的子节点列表的结尾添加新的子节 insertBefore() 在指定的子节点前插入新的子节点。 replaceChild() 用新节点替换一个子节点 removeChild() 删除（并返回）当前节点的指定子节点 normalize() 合并相邻的Text节点并删除空的Text节点,cloneNode() 方法,cloneNode() 方法可创建指定的节点的精确拷贝。 此方法可返回所复制的节点。 语法：nodeObject.cloneNode(include_all) 参数描述：include_all必需。假如逻辑参数被设置为真，那么被克隆的节点会克隆原节点的所有子节点。 返回值：当前节点的副本。 说明 该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。 返回的节点不属于文档树，它的 parentNode 属性为 null。 当复制的是 Element 节点时，它的所有属性都将被复制。但要注意，当前节点上注册的事件监听器函数不会被复制。,appendChild() 方法,appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。 此方法可返回这个新的子节点。 语法：appendChild(newchild) 参数描述：newchild所添加的节点 返回值：加入的节点。 描述 该方法将把节点 newchild 添加到文档中，使它成为当前节点的最后一个子节点。 如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes 数组的末尾。 注意，来自一个文档的节点（或由一个文档创建的节点）不能插入另一个文档。也就是说，newchild 的 ownerDocument 属性必须与当前节点的 ownerDocument 属性相同。,insertBefore() 方法,insertBefore() 方法可在已有的子节点前插入一个新的子节点。 此方法可返回新的子节点。 语法：insertBefore(newchild,refchild) 参数描述： newchild插入新的节点 refchild在此节点前插入新节点,replaceChild() 方法,replaceChild() 方法可将某个子节点替换为另一个。 如替换成功，此方法可返回被替换的节点，如替换失败，则返回 NULL。 语法： nodeObject.replaceChild(new_node,old_node) 参数描述 new_node必需。指定新的节点。 old_node必需。指定被替换的节点。,removeChild() 方法,removeChild() 方法可从子节点列表中删除某个节点。 如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。 语法： nodeObject.removeChild(node) 参数描述 node必需。指定需要删除的节点。,normalize()方法,合并相邻的 Text 节点并删除空的 Text 节点。 语法： nodeObject.normalize() 说明 这个方法将遍历当前节点的所有子孙节点，通过删除空的 Text 节点，合并所有相邻的 Text 节点来规范化文档。 该方法在进行节点的插入或删除操作后，对于简化文档树的结构很有用。,例：添加节点, var x=document.createElement(“div“); x.appendChild(document.createTextNode(“文本“); document.body.appendChild(x); ,例：复制节点,原节点 var x=document.getElementsByTagName(“div“); var y=x0.cloneNode(true); y.firstChild.nodeValue=“新节点“; x0.parentNode.insertBefore(y,x0); ,例：替换节点,原节点 var x=document.createElement(“div“); x.appendChild(document.createTextNode(“新节点“); var y=document.getElementsByTagName(“div“); document.body.replaceChild(x,y0); ,例：删除节点,节点1 节点2 var y=document.getElementsByTagName(“div“); y0.parentNode.removeChild(y0); ,例：规格化文本, var x=document.createElement(“div“); x.appendChild(document.createTextNode(“文本1 “); x.appendChild(document.createTextNode(“文本2 “); /document.body.appendChild(x); alert(x.firstChild.nodeValue);/文本1 x.normalize(); alert(x.firstChild.nodeValue);/文本1 文本2 ,NamedNodeMap接口,NamedNodeMap用于获取属性的引用的集合 NamedNodeMap会被自动更新 NamedNodeMap 的属性 length，可返回列表中的节点数目 NamedNodeMap 对象的方法 getNamedItem() 可返回指定的节点（通过名称） item() 可返回处于指定索引号的节点 节点次序是不确定的 removeNamedItem() 可删除指定的节点（根据名称）,属性处理,Element 对象的属性 attributes 返回元素的属性的 NamedNodeMap Element 对象的方法 getAttribute() 返回属性的值。 getAttributeNode() 以 Attribute 对象返回属性节点。 hasAttribute() 返回元素是否拥有指定的属性。 hasAttributes() 返回元素是否拥有属性。 removeAttribute() 删除指定的属性。 removeAttributeNode() 删除指定的属性节点。 setAttribute() 添加新属性。,例：属性处理, var x=document.getElementById(“a“); /alert(x.getAttribute(“n“); /x.setAttribute(“Name“,“c“); /alert(x.getAttribute(“Name“); /x.removeAttribute(“Name“); /alert(x.hasAttribute(“n“); /alert(x.hasAttributes(); var y=x.attributes; alert(y.length); for(var i in y)document.writeln(i+“:“+yi+“n“); ,上例在IE与FireFox的区别,IE 使用属性处理方法时必须有元素 hasAttribute、hasAttributes不能用 y.length包含内置属性=111 i 值为属性名 FireFox y.length只包含显式属性=1 i 值为序号，可以表示内置方法名,HTMLDocument 对象集合,HTML DOM 属性访问,可以直接用属性名访问 var x=document.getElementById(“a“); x.Id=“c“;/元素作为对象可以添加自定义属性，区分大小写 alert(x.id);/a,内置属性只能用小写名获取 /alert(x.namE);/b,IE可以访问元素的自定义属性，区分大小写 ,上例在IE与FireFox的区别,FireFox 只能访问元素的内置属性 内置属性只能用小写名获取 name,class不能作为内置属性 元素作为对象可以添加自定义属性，区分大小写 IE 必须包含元素 可以访问元素的内置属性和自定义属性 内置属性只能用小写名获取 class不能作为内置属性 元素的自定义属性访问时区分大小写 元素作为对象可以添加自定义属性，区分大小写,XML DOM HTMLElement 对象,HTMLElement 对象表示 HTML 中的一个元素 HTMLElement 对象的属性 一个 HTML 文档中的每个元素都有和元素的 HTML 属性对应的属性。这里列出了所有 HTML 标记都支持的属性。其他的属性，都特定于某种具体的 HTML 标记。 HTMLElement 对象继承了 Node 和 Element 对象的标准属性，也实现了下面所描述的几个非标准属性：,HTMLElement 对象的非标准属性(1/4),className 规定元素的 class 属性。注意：该属性名不是 “class“，因为 “class“ 是 JavaScript 中的保留字。 类型：String。状态：可写。 currentStyle 这一特定于 IE 的属性应用于元素的所有 CSS 属性的级联组。它是 Window.getComputedStyle() 的仅用于 IE 的替代。 类型：String。状态：可写。 dir 规定元素的 dir 属性，声明了文档文本的方向。 类型：String。状态：可写。 id 规定元素的 id 属性。在一个文档中，没有两个元素具有相同的 id 值。 类型：String。状态：可写。,HTMLElement 对象的非标准属性(2/4),innerHTML 规定了元素所包含的字符串，不包括元素自身的开始标记和结束标记。查询这一属性会将元素的内容作为一个 HTML 文本串返回。将这个属性设置为一个 HTML 文本串，则可以用 HTML 的解析表示来替换元素的内容。在文档载入的时候，不能设置这个属性。这个一个源自于 IE4 的非标准属性，已经得到所有现代浏览器的支持。 类型：String。状态：可写。,HTMLElement 对象的非标准属性(3/4),lang 规定元素的 lang 属性，声明了元素内容的语言代码。 类型：String。状态：可写。 offsetHeight, offsetWidth 返回元素的高度和宽度，以像素为单位。这是非标准的但却得到很好支持的属性。 类型：int。状态：只读。 offsetLeft 返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。 类型：int。状态：只读。 offsetTop 返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。 类型：int。状态：只读。 offsetParent 返回对最近的动态定位的包含元素的引用，所有的偏移量都根据该元素来决定。如果元素的 style.display 设置为 none，则该属性返回 null。这是非标准的但却得到很好支持的属性。 类型：Node。状态：只读。,HTMLElement 对象的非标准属性(4/4),scrollHeight, scrollWidth 返回元素的完整的高度和宽度，以像素为单位。当一个元素拥有滚动条时（比如由于 CSS 的 overflow 属性），这些属性和 offsetHeight 与 offsetWidth 不同，offsetHeight 和 offsetWidth 只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。 类型：int。状态：只读。 scrollTop, scrollLeft 设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候，例如，元素的 CSS overflow 属性设置为 auto 的时候，这些像素才有用。这些属性也只在文档的 或 标记上定义（这和浏览器有关），并且一起来制定滚动文档的位置。注意，这些属性并不会指定一个 标记的滚动量。这是非标准的但却得到很好支持的属性。 类型：int。状态：可写。 style 返回为当前元素设置内联 CSS 样式的 style 属性的值。注意，这个属性的值不是一个字符串。 类型：CSS2Properties。状态：只读。 title 规定元素的 title 属性。当鼠标悬停在元素上的时候，很多浏览器在元素的“工具提示”中显示这一属性的值。 类型：String。状态：可写。,例：设置元素所包含的内容,点此 document.getElementById(“a“).innerHTML=“aaa“; ,HTMLElement 对象的方法,HTMLElement 对象继承了 Node 和 Element 对象的标准方法。某些类型的元素实现了特定于标记的方法，W3School 在 HTML DOM 参考手册的各标记参考页中提供了这些方法的信息 大部分现代浏览器也都实现了如下的非标准方法： 方法描述scrollIntoView() 滚动文档。使该元素出现在窗口的顶部或底部。,HTMLElement 对象的事件句柄,响应鼠标和键盘事件的所有 HTML 元素都可以触发这里列出的事件句柄。某些元素，如链接和按钮，当这些事件发生的时候执行默认操作。对于像这样的元素，更多细节可以在具体元素的参考页中找到。 请参阅 HTML 事件属性参考手册，了解更多有关 HTML 事件句柄的知识。,附：,HTML DOM API HTML DOM 实例,Node 对象的属性(1/2),Node 对象的属性(2/2),Node 对象的方法(1/3),Node 对象的方法(2/3),Node 对象的方法(3/3),HTML DOM 对象(1/3),HTML DOM 对象(2/3),HTML DOM 对象(3/3),HTML Document 对象集合,HTML Document 对象属性,HTML Document 对象方法,HTML DOM all 集合,all 集合返回对文档中所有 HTML 元素的引用。 语法 document.alli document.allname document.all.tagstagname 说明 all 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。 all 包含的元素保持了最初的顺序，如果你知道它们在数组中的确切数字化位置，可以直接从数组中提取它们。然而，更为常见的是使用 all 数组，根据它们的 HTML 属性 name 或 id 来访问元素。如果多个元素拥有指定的 name，将得到共享同一名称的元素的一个数组。,HTML DOM forms 集合,forms 集合可返回对文档中所有 Form 对象的引用。 语法 document.forms,计算文档中表单的数目, document.write(“文档包含： “ + document.forms.length + “ 个表单。“) ,访问集合中的项目, 您的姓名： 您的汽车： 要访问集合中的项目，你既可以使用项目编号，也可以使用项目名称： document.write(“第一个表单名称是：“ + + “) document.write(“第一个表单名称是：“ + document.getElementById(“Form1“).name + “) ,HTML DOM anchors 集合,anchors 集合可返回对文档中所有 Anchor 对象的引用。 语法 document.anchors,返回文档中锚的数目, 第一个锚 第二个锚 第三个锚 文档中锚的数目： document.write(document.anchors.length) ,返回文档中第一个锚的 innerHTML, 第一个锚 第二个锚 第三个锚 本文档中第一个锚的 InnerHTML 是： document.write(document.anchors0.innerHTML) ,HTML DOM images 集合,images 集合可返回对文档中所有 Image 对象的引用。 语法 document.images 注释：为了与 0 级 DOM 兼容，该集合不包括由 标记定义的图像。,计算文档中的图像数目, document.write(“本文档包含：“ + document.images.length + “ 幅图像。“) ,HTML DOM links 集合,links 集合可返回对文档中所有 Area 和 Link 对象的引用。 语法 document.links,返回文档中链接的数目, 文档中链接数目是： document.write(document.links.length) ,返回文档中第一个链接的 id, area 元素的 id 是： document.write(document.links0.id) ,HTML DOM cookie 属性,cookie 属性可设置或查询与当前文档相关的所有 cookie。 语法 document.cookie 说明 该属性是一个可读可写的字符串，可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。 提示：该属性的行为与普通的读/写属性是不同的。,返回与当前文档相关的 cookie, The cookies associated with this document is: document.write(document.cookie) ,HTML DOM domain 属性,domain 属性可返回下载当前文档的服务器域名。 语法 document.domain 说明 该属性是一个只读的字符串，包含了载入当前文档的 web 服务器的主机名。 提示：domain 属性可以解决因同源安全策略带来的不同文档的属性共享问题。,返回下载当前文档的服务器域名, 本文档的域名是： document.write(document.domain) ,HTML DOM lastModified 属性,lastModified 属性可返回文档最后被修改的日期和时间。 语法 document.lastModified 说明 该值来自于 Last-Modified HTTP 头部，它是由 Web 服务器发送的可选项。,返回文档最近被修改的日期和时间, This document was last modified on: document.write(document.lastModified) ,HTML DOM referrer 属性,referrer 属性可返回载入当前文档的文档的 URL。 语法 document.referrer 说明 如果当前文档不是通过超级链接访问的，则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。,返回当前文档的 referrer, referrer 属性返回加载本文档的文档的 URL。 本文档的 referrer 是： document.write(document.referrer) ,HTML DOM title 属性,title 属性可返回当前文档的标题（ HTML title 元素中的文本）。 语法 document.title,返回当前文档的标题, My title 该文档的标题是： document.write(document.title) ,HTML DOM URL 属性,URL 属性可返回当前文档的 URL。 语法 document.URL 说明 一般情况下，该属性的值与包含文档的 Window 的 location.href 属性相同。不过，在 URL 重定向发生的时候，这个 URL 属性保存了文档的实际 URL，而 location.href 保存了请求的 URL。,返回当前文档的 URL, 该文档的 URL 是： document.write(document.URL) ,HTML DOM open() 方法,open() 方法可打开一个新文档，并擦除当前文档的内容。 语法 document.open(mimetype,replace) 参数 mimetype可选。规定正在写的文档的类型。默认值是 “text/html”。 replace可选。当此参数设置后，可引起新文档从父文档继承历史条目。 说明 该方法将擦除当前 HTML 文档的内容，开始一个新的文档，新文档用 write() 方法或 writeln() 方法编写。,提示和注释,重要事项： 调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 close 方法关闭文档，并迫使其内容显示出来。 属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法，因为脚本或事件句柄自身也会被覆盖。,打开一个新的文档，添加一些文本，然后关闭它, function createNewDoc() var newDoc=document.open(“text/html“,“replace“); var txt=“学习 DOM 非常有趣！“; newDoc.write(txt); newDoc.close(); ,在新窗口打开新的文档，并添加一些文本, function winTest() var txt1 = “This is a new window.“; var txt2 = “This is a test.“; win.document.open(“text/html“,“replace“); win.document.writeln(txt1); win.document.write(txt2); win.document.close(); var win=window.open(,width=200,height=200); winTest(); ,HTML DOM close() 方法,close() 方法可关闭一个由 document.open 方法打开的输出流，并显示选定的数据。 语法 document.close() 说明 该方法将关闭 open() 方法打开的文档流，并强制地显示出所有缓存的输出内容。如果您使用 write() 方法动态地输出一个文档，必须记住当你这么做的时候要调用 close() 方法，以确保所有文档内容都能显示。 一旦调用了 close()，就不应该再次调用 write()，因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档,HTML DOM write() 方法,write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。 可列出多个参数(exp1,exp2,exp3,.) ，它们将按顺序被追加到文档中。 语法 document.write(exp1,exp2,exp3,) 说明 虽然根据 DOM 标准，该方法只接受单个字符串作为参数。不过根据经验，write() 可接受任何多个参数。 我们通常按照两种的方式使用 write() 方法：一是在使用该方在文档中输出 HTML，另一种是在调用该方法的的窗口之外的窗口、框架中产生新文档。在第二种情况中，请务必使用 close() 方法来关闭文档。,使用 document.write() 向输出流写文本, document.write(“Hello World!“) ,使用 document.write() 向输出流写 HTML, document.write(“Hello World!“) ,使用多参数的 document.write(), document.write(“Hello World! “,“Hello You! “,“Hello World!“) ,HTML DOM writeln() 方法,writeln() 方法与 write() 方法作用相同，后加一个换行符。 语法 document.writeln(exp1,exp2,exp3,) 提示：在编写 标记的内容时，该方法很有用。,document.writeln() 实例, document.write(“) document.write(“write1 “) document.writeln(“writeln1 “,“writeln2 “) document.write(“write2 “) document.write(“) ,HTML DOM getElementById() 方法,getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 语法 document.getElementById(id) 说明 HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。 不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。 在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。,使用 getElementById(), function getValue() var x=document.getElementById(“myHeader“) alert(x.innerHTML) 这是标题 点击标题，会提示出它的值。 ,简化getElementById(),getElementById() 是一个重要的方法，在 DOM 程序设计中，它的使用非常常见。我们为您定义了一个工具函数，这样您就可以通过一个较短的名字来使用 getElementById() 方法了： function id(x) if (typeof x = “string“) return document.getElementById(x); return x; 上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数，您只要在使用前编写 x = id(x) 就可以了。,HTML DOM getElementsByName() 方法,getElementsByName() 方法可返回带有指定名称的对象的集合。 语法 document.getElementsByName(name) 说明 该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。 另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。,使用 getElementsByName(), function getElements() var x=document.getElementsByName(“myInput“); alert(x.length); ,HTML DOM getElementsByTagName() 方法,getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 语法 document.getElementsByTagName(tagname) 说明 getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。 如果把特殊字符串 “*“ 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。 传递给 getElementsByTagName() 方法的字符串可以不区分大小写。,使用 getElementsByTagName(), function getElements() var x=document.getElementsByTagName(“input“); alert(x.length); ,获取文档中所有的表,可以用 getElementsByTagName() 方法获取任何类型的 HTML 元素的列表。例如，下面的代码可获取文档中所有的表： var tables = document.getElementsByTagName(“table“); alert (“This document contains “ + tables.length + “ tables“);,获取文档中的一个特定的元素,如果非常了解文档的结构，也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。例如，下面的代码可以获得文档中的第四个段落： var myParagragh = document.getElementsByTagName(“p“)3; 需要操作某个特定的元素，使用 getElementById() 方法将更为有效。,HTML DOM Anchor 对象,Anchor 对象表示 HTML 超链接。 在 HTML 文档中 标签每出现一次，就会创建 Anchor 对象。 锚可用于创建指向另一个文档的链接（通过 href 属性），或者创建文档内的书签（通过 name 属性）。 可以通过搜索 Document 对象中的 anchors 数组来访问锚，或者使用 document.getElementById()。,Anchor 对象的属性（1/2）,IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C 标准.,Anchor 对象的属性（2/2）,IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C 标准.,HTML DOM accessKey 属性,accessKey 属性可设置或返回访问一个链接的键盘按键。 注释：请使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点。 语法 anchorObject.accessKey=accessKey 例：向超链接添加快捷键 function accesskey() document.getElementById(w3).accessKey=“w“ document.getElementById(w3dom).accessKey=“d“ W3S （请使用 Alt + w 给该链接赋予焦点） HTML DOM （请使用 Alt + d 为该链接赋予焦点） ,HTML DOM charset 属性,charset 属性可设置或返回被链接资源的字符集。 语法 anchorObject.charset=charset 例：设置被链资源的字符集 W3S x=document.getElementById(“myAnchor“); x.charset=“ISO-8859-1“; document.write(x.charset); ,HTML DOM coords 属性,coords 属性设置或返回一个逗号分隔列表，其中包含了图像映射中一个链接的坐标。 语法 anchorObject.coords=coordinates 例：返回图像映射中一个链接的坐标 Venus 的坐标（coords 属性）是： x=document.getElementById(“venus“); document.write(x.coords); ,HTML DOM href 属性,href 属性可设置或返回被链资源的 URL 语法 anchorObject.href=URL 例： 更改一个链接的文本、URL 以及 target,例：更改一个链接的文本、URL 以及 target, function changeL