标签:named window child 低版本 form 动态 出现 bsp 浏览器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document类型(文档的子节点。文档的信息。查找元素,特殊集合,DOM 一致性检测, 文档写入)</title> </head> <body> <p id="s"><span id="ss">b</span><a id="sss">b</a></p> </body> <script type="text/javascript"> /*作为 HTMLDocument 的一个实例,document 对象还有一些标准的 Document 对象所没有的属性。 这些属性提供了 document 对象所表现的网页的一些信息。其中第一个属性就是 title, */ /* referrer 属性中可能 会包含空字符串。所有这些信息都存在于请求的 HTTP 头部,只不过是通过这些属性让我们能够在 JavaScrip 中访问它们而已, * */ //取得文档标题 var originalTitle = document.title; //设置文档标题 document.title = "lala"; //取得完整的 URL var urls = document.URL; //取得域名 var domain = document.domain; //取得来源页面的 URL var referrer = document.referrer; console.log(urls) console.log( domain) console.log(referrer) /*JavaScript 通过 Document 类型表示文档。在浏览器中,document 对象是 HTMLDocument(继承 自 Document 类型)的一个实例,表示整个 HTML 页面。而且,document 对象是 window 对象的一个 属性,因此可以将其作为全局对象来访问。Document 节点具有下列特征: ? nodeType 的值为 9; ? nodeName 的值为"#document"; ? nodeValue 的值为 null; ? parentNode 的值为 null; ? ownerDocument 的值为 null; ? 其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction 或 Comment。 Document 类型可以表示 HTML 页面或者其他基于 XML 的文档。不过,最常见的应用还是作为 HTMLDocument 实例的 document 对象。通过这个文档对象,不仅可以取得与页面有关的信息,而且还 能操作页面的外观及其底层结构*/ /* documentElement属性,该属性始终指向 HTML 页面中的<html>元素。另一个就是通过 childNodes 列表访问文档元素, var html = document.documentElement; //取得对<html>的引用 alert(html === document.childNodes[0]); //true documentElement、firstChild 和 childNodes[0]的值相同 var body = document.body; //取得对<body>的引用 var doctype = document.doctype; //取得对<!DOCTYPE>的引用 所有浏览器都支持 document.documentElement 和 document.body 属性。 */ /* 浏览器对 document.doctype 的支持差别很大,可以给出如下总结。 ? IE8 及之前版本:如果存在文档类型声明,会将其错误地解释为一个注释并把它当作 Comment 节点;而 document.doctype 的值始终为 null。 ? IE9+及 Firefox:如果存在文档类型声明,则将其作为文档的第一个子节点;document.doctype 是一个 DocumentType 节点,也可以通过 document.firstChild 或 document.childNodes[0] 访问同一个节点。 ? Safari、Chrome 和 Opera:如果存在文档类型声明,则将其解析,但不作为文档的子节点。document.doctype 是一个 DocumentType 节点,但该节点不会出现在 document.childNodes 中。 */ /* 查找元素:Document 类型为此提供了两个方 法:getElementById()和 getElementsByTagName()。 【IE8 及较低版本不区分 ID 的大小写;如果页面中多个元素的 ID 值相同,getElementById()只返回文档中第一次出现的元素。】 getElementsByTagName()。这个方法接受一个参数,即要 取得元素的标签名,而返回的是包含零或多个元素的 NodeList。在 HTML 文档中,这个方法会返回一 个 HTMLCollection 对象,作为一个“动态”集合,该对象与 NodeList 非常类似。例如,下列代码 会取得页面中所有的<img>元素,并返回一个 HTMLCollection。 HTMLCollection 对象还有一个方法,叫做 namedItem(),使用这个方法可以通过元素的 name 特性取得集合中的项。例如,假设上面提到的页面中包含如下<img>元素: <img src="myimage.gif" name="myImage"> 那么就可以通过如下方式从 images 变量中取得这个<img>元素: var myImage = images.namedItem("myImage"); 在提供按索引访问项的基础上,HTMLCollection 还支持按名称访问项,这就为我们取得实际想要 的元素提供了便利。而且,对命名的项也可以使用方括号语法来访问,如下所示: var myImage = images["myImage"]; 对 HTMLCollection 而言,我们可以向方括号中传入数值或字符串形式的索引值。在后台,对数 值索引就会调用 item(),而对字符串索引就会调用 namedItem()。 第三个方法,也是只有 HTMLDocument 类型才有的方法,是 getElementsByName()。顾名思义, 这个方法会返回带有给定 name 特性的所有元素。 * */ /* document 对象还有一些特殊的集合。这些集合都是 HTMLCollection 对象, 为访问文档常用的部分提供了快捷方式,包括: ? document.anchors,包含文档中所有带 name 特性的<a>元素; ? document.applets,包含文档中所有的<applet>元素,因为不再推荐使用<applet>元素, 所以这个集合已经不建议使用了; ? document.forms,包含文档中所有的<form>元素,与 document.getElementsByTagName("form") 得到的结果相同; ? document.images,包含文档中所有的<img>元素,与 document.getElementsByTagName ("img")得到的结果相同; ? document.links,包含文档中所有带 href 特性的<a>元素。 这个特殊集合始终都可以通过 HTMLDocument 对象访问到,而且,与 HTMLCollection 对象类似, 集合中的项也会随着当前文档内容的更新而更新。 * */ /* 由于 DOM 分为多个级别,也包含多个部分,因此检测浏览器实现了 DOM 的哪些部分就十分必要 了。document.implementation 属性就是为此提供相应信息和功能的对象,与浏览器对 DOM 的实现 直接对应。DOM1 级只为 document.implementation 规定了一个方法,即 hasFeature()。这个方 法接受两个参数:要检测的 DOM 功能的名称及版本号。如果浏览器支持给定名称和版本的功能,则该 方法返回 true,如下面的例子所示: var hasXmlDom = document.implementation.hasFeature("XML", "1.0"); * */ /* 有一个 document 对象的功能已经存在很多年了,那就是将输出流写入到网页中的能力。这个能力 体现在下列 4 个方法中:write()、writeln()、open()和 close()。 open()和 close()【方法 open()和 close()分别用于打开和关闭网页的输出流。如果是在页面加载期间使用 write() 或 writeln()方法,则不需要用到这两个方法。 严格型 XHTML 文档不支持文档写入。对于那些按照 application/xml+xhtml 内容类型提供的页面,这两个方法也同样无效。】 * */ document.write("<strong>" + (new Date()).toString() + "</strong>"); </script> </html>
标签:named window child 低版本 form 动态 出现 bsp 浏览器
原文地址:http://www.cnblogs.com/gaoxuerong123/p/7803650.html