本文章所有代码及其内容来自《javascript高级程序设计》,感兴趣的朋友可以购买纸质图书。
—————————————————————————————
. javascript中Document类型表示文档。
.document对象是HTMLDocument(继承自Document)的一个实例。
.document对象是window对象的一个属性。
》Document的特征
- nodeType : 9
- nodeName: #document
- nodeValue: null
- parentNode: null
- ownerDocument: null
- 其子节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment。
》1. 文档的子节点
访问文档子节点有两种快捷方式document。第一个是documentElement属性,该属性始终只想HTML页面中的html元素。第二个是使用childNodes列表访问文档元素。
var html = document.documentElement; //取得对<html>的引用
alert(html == document.childNodes[0]); //true
1.1 作为HTMLDocument的实例,document还有一个body属性,直接指向body元素。
var body = document.body;
所有浏览器都支持documentElement 和 body属性
1.2> 其子节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment。
另一个可能性是doctype. var document = docuemt.doctype;
. IE8及之前版本,如果存在文档类型声明则会错误地解释为注释并把它当做Comment节点,而doctype的值永远是null;
. IE9+及firefox,如果存在文档类型说明,将其视为文档的第一个子节点。
. Safari、Chrome、Opera:如果存在文档类型说明则将其解析,但是不作为文档的子节点。document.doctype是DocumentType节点,但是不会出现在childNodes中.
1.3 > comment
不同浏览器对于出现在html元素外部的解析和处理也不一样。
2 》文档信息
title、domain、URL、referrer
// 取得网页标题
var title = document.title;
// 取得网页域名
var domain = document.domain;
//取得完整URL地址
var url = document.URL;
//取得来源网页的URL
var ref = document.referrer;
域名domain 的注意事项
- 如果页面来自于blog.csdn.net,则domain不可设为sina.com.
// 假设页面来自 blog.csdn.net
document.domain = "csdn.net"; // true
document.domain = "sina.com"; // false
- 如果一个页面加载自www.wrox.com,其中包含一个内嵌框架,框架内的页面加载来自p2p.wrox.com,由于document.domin字符串不一样,内外两个网页之间无法相互访问对方的JavaScript对象。但如果两个页面的domain相同,则可以相互同性。
- domain属性还有一个限制,如果一开始是松散的(loose) ,则不能再设置为紧绷的(tight).
// 假设页面来自p2p.wrox.com
document.domain = "wrox.com"; //松散的(成功)
document.domain = "p2p.wrox.com"; //紧绷的(失败)
————————
》 3 查找元素
Document类型为此提供两种方法。document.getElementById()和document.getElementsByTagName()
3.1 getElementById()
接收一个参数,要取得的元素ID。找到返回该元素,没有找到则返回null.
<div id="myDiv">sometext </div>
var div = document.getElementById("myDiv"); //取得div元素引用
var div = document.getElementById("mydiv"); //无效的ID(在IE及更早版本可以)
IE8及低版本不区分ID的大小写,因此“myDiv”和“mydiv”会当做相同的元素ID。
如果页面中多个元素的ID相同则返回第一个出现元素。
<input type="text" name="myElement" value="Text">
<div id="myElement">a div</div>
基于这点HTML代码,在IE7中调用document.getElementById()会返回input元素,而其他的浏览第都会返回div。最好的办法是不让表单字段的name特性与其他元素的ID相同。
3.2 getElementsByTagName()
调用该方法返回是包含零或多个元素的NodeList。在HTML文档中,这个方法会返回一个HTMLCollection对象。
var image = document.getElementsByTagName("img");//取得页面中所有<img>元素
var length = image.length;
var firstImg = image[0]; //通过[]或者.item()访问具体元素
var firstImg = image.item(0);
HTMLCollection还有一个namedItem方法通过元素的name去的集合中的项。
<img src="" name="myImage">
var myImage = document.namedItem("myImage")
对于HTMLCollection而言,我们可以向方括号中传入数值或者是字符串。如果传入数值则调用item(),如果传入的是字符串则调用namedItem()。
var all = document.getElementsByTagName("*");
星号(*)通常表示全部,而上面的代码则会返回页面中所有的注释节点。
3.3 getElementsByName()
该方法只有HTMLDocument类型才有,该方法会返回所有给定name的元素,通常用于取得单选按钮。
》 4.特殊集合 ( 5个)
document.anchors: 文档中所有带name特征的a元素
document.images:文档中所有的img元素,与document.getElementsByTagName取得的值相同
document.applets: 包含文档中所有applet元素.已不推荐使用。
document.links: 包含文档中所有带href特征的a元素
document.forms: 包含所有的form元素
》 5.文档写入
write()、writeln()、open()、close()
open()和close()打开或关闭网页的输出流