Document对象详解

Document对象详解作者：裘森伟Document对象前言•Document对象也就是文档的对象，他是Windows对象的子对象，他代表浏览器窗口中的文档。文档与状态栏、工具栏等是并列的，他们一起构成了浏览器窗口。通过使用Document对象可以对文档中的对象、内容等进行访问，其中有些对象或内容还可以使用Document对象来设置。第一章文档中的对象•使用Document对象可以访问文档中的对象，文档中的对象包括HTML元素，超链接，锚点和图像等。1.1HTML元素•在javascript中，为Document对象定义了all属性来访问文档中的所有HTML元素对象。•通过Document对象使用all属性，得到文档中的所有HTML元素对象组成的数组。因此所有对数组的操作都可以应用在all属性的结果。1.1HTML元素•Document对象的all属性的结果数组不但可以通过使用数组下标来得到HTML元素对象，还可以直接使用HTML元素对象名称来得到HTML元素对象。这样使用的前提是，在HTML元素中必须有name属性来为HTML元素对象命名。1.1HTML元素•在javascript中还为Document对象的all属性提供了两个方法，来得到更加具体的HTML元素的对象，这两种方法分别是item方法和tags方法。•Item方法可以通过HTML元素对象的名称或ID来得到HTML元素对象，他的特殊之处在于可以得到相同对象名或者ID的所有HTML元素对象，这些对象组成一个数组。•和item方法相对的是tags方法，tags方法是通过指定的标记来得到文档中有多少该标记对象。1.2锚点和超链接•在javascript中，为document对象定义了anchors属性来表示文档中所有锚点的数组，还定义了links属性来表示文档中所有超链接的数组。在对这些文档对象数组进行操作时，可以使用以前学过的数组知识。如数组的length属性来求数组的长度。•运行结果中的两个文字超链接的颜色可以不同。在文档中可能有三种颜色活动的超链接颜色，（alinkcolor）、未访问的超链接颜色（linkcolor）和已经访问的超链接颜色（vlinkcolor)。•不但可以通过这些属性来获得不同状态下超链接的颜色，还可以使用这些属性来设置不同状态下超链接的颜色。1.3背景和文本•在javascript中，为document对象定义了bgColor属性来设置背景颜色，还定义了fgColor属性来设置文本颜色。1.4图像•在javascript中，为document对象定义了images属性来对文档中的图像进行操作。Images属性得到的是文档中图像数组，同样也是能够通过数组的length属性来获得文档中图像的数量，使用数组小标可以获得每个图像。在对图像进行操作时，如果图像定义了名称，还可以使用名称索引得到该图像。•和其他对象不同的是，当文档中没有图像时，使用images属性也能得到一个数组，其数组的长度为0，因此使用images属性后还可以作为布尔值进行使用。1.5表单•在javascript中，为document对象定义了forms属性来对文档中的表单进行操作，同样使用forms属性可以得打文档中所有表单的数组，使用数组的length属性可以得到表单的个数，使用数组小标来得到特定的表单。•在实际应用中，通常都会为每个表单定义名称，所以都会使用表单名称来得到指定的表单。除了使用表单名称作为数组的索引外，还可以直接使用名称作为属性来使用，其基本形式为：•Document.formname第二章文档中的内容•在上一节中，对文档中的对象进行了详细的讲解。在本节中就来对文档中的一些内容进行详细的讲解，这些内容是相对独立的，但是它们在特定的情况下市非常重要的。2.1上次修改时间•在javascript中，为document对象定义了lastModified属性，使用该属性可以得到当前文档最后一次被修改的具体日期和时间。本地计算机上的每个文件都有最后修改的时间，所以在服务器上的文档也有最后修改的时间。当客户端能够访问服务器端的该文档时，客户端就可以使用lastModified属性来得到该文档最后修改时间。•需要注意的是，由于该信息来自服务器，而这又和服务器的设置有关，所以有可能是得不到正确的数据。•在运行结果中可以看，使用lastModified属性得到的日期和时间并不是一个Date对象，而是一个字符串。这里显示的日期和时间的格式是固定的，要想得到自己想要的日期和时间格式，就需要使用先前讲过的Date对象的知识。2.2文档定位•文档定位就是设置和获取文档的位置，文档的位置也可以说是文档的URL。在javascript中，为Document对象定义了location、URL、referrer这3个属性来对文档的位置进行操作。•location属性和URL属性很相似，他们都具有获取文档位置的功能。•从运行结果中可以看出，使用location属性和URL属性都可以得到文档的位置。但是它们的表示形式不同，使用URL属性得到的是真实显示的URL，而location属性得到的URL中将空格等特殊字符转换成码值的形式来显示，这样更容易在网络中传输。•使用location属性不但可以获取文档的URL，还可以对文档的URL进行设置。2.2文档定位•代码：••htmlxmlns=•head•title文档定位/title•/head•body•h1文档定位/h1••scriptlanguage=javascripttype=text/javascript•!--•varsstring=document.location;•document.write(h3使用location属性得到的URL为：);•document.write(sstring);•document.location=•//--•/script•••/body•/html–使用浏览器运行程序，在页面中首先出现了文档中的URL，然后由于程序中使用location属性新设置了URL，所以文档转向了新设置的URL2.2文档定位•除了使用location属性和URL属性可以对文档进行定位外，还有一个referrer属性。Referrer属性的使用有点难度，使用他来获得当前文档的源文档的URL，也就是说获得由哪一个文档引出该文档。从referrer属性的作用可以看出，如果只编写一个文档时不可能得到referrer的属性值。•但是在使用referrer属性时，需要注意的是有些浏览器或者低版本的浏览器不支持referrer属性。•注意：需要将两个文件放在服务器中才能得到上面的运行结果，若直接在本地文件夹中运行，则得不到相应结果。2.3文档标题•在javascript中，为Document对象定义了title属性来获得文档的标题。文档标题是文档中一个很小的知识点，在HTMl文件中TITLE标记对中的就是文档的标题。前面已经讲到过，TITLE标记可以省略，但是文档的标题任然存在，知识为空。第三章对文档的操作•在上面的两节中分贝对文档中的对象和文档的内容进行了讲解，在本节诶中就来对文档的操作进行一下讲解。3.1向文档进行输入•在javascript中，为Document对象定义了两个方法来向文档中输入字符串，他们分别为write方法和writeln方法。期中write方法已经被使用过无数次了，writeln方法和write方法的不同在于输入的结果后面是否有一个换行符。但是由于HTML中只使用br标记来换行，所以显示当前文档时，write方法和writeln方法没有什么区别。•在前面使用write方法向文档中输入内容时，如果同时具有字符串和非字符串内容，通常会使用+号运算符来连接起来。其实不需要这样，write方法还具有多参数的形式，可以将每个内容作为一个参数，参数之间用逗号分隔，再向文档输入时，就会依次输入。•再向文档输入字符串时，也可以在其中加入一些HTML标记，如程序中的h3标记。在文档中显示时，是不会显示这些标记的，他们会在文档中起到自身的作用。3.2打开和关闭文档•在javascript中，为Document对象定义了open方法和close方法，它们分别用来打开和关闭文档，打开文档与打开窗口不同，打开窗口将要在窗口和浏览器中创建一个对象，而打开文档只要向文档写入内容。打开文档要比打开窗口节省很多资源。•从目前所学的知识上看，想文档中写入内容通常使用write方法，而write方法又具有自动打开文档的功能，所以在通常情况下是不使用open方法和close方法开打开和关闭文档的。但是为了更好的饿学习以后的知识，在这里还是很有必要讲解一下。•使用open方法来打开一个文档，原来的文档内容就会被自动删除，然后重新开始输入新内容。使用close方法来关闭一个文档，在输入新内容结束后，如果不关闭文档，就有可能造成无法显示。3.3清除文档•在javascript中，为Document对象定义了clear方法。使用clear方法可以清除文档中的内容，但是在大量的实际应用中发现，使用clear方法并不能完全起到该作用，而且使用clear方法很不安全，有可能造成浏览器的损坏。所以在实际开发中，不在使用clear方法。当想要清除文档中的内容时，通常使用打开和关闭文档，再向文档中输入时，不输入任何的内容，从而删除文档中的内容。第四章文档事件•在文档中有两个非常重要的事件，那就是鼠标事件和键盘事件。在鼠标事件和键盘事件中又有很多更加具体的事件。在前面的学习中已经知道，可以使用对象来调用它们，也可以将事件放在body标记中，这些对前面学过的事件是可行的。•但是对于鼠标事件和键盘事件来说不可以了，因为这与浏览器有关。在ie浏览器中，只能把事件放在body标记中；在NN浏览器中，只能把事件通过对象来调用。4.1鼠标事件•根据鼠标操作的不同，鼠标事件又分为很多更农家具体的事件。最长用的鼠标操作就是单机和双击。在javascript中，使用onclick事件来表示鼠标单机事件，使用ondbclick事件来代表鼠标双击事件。•鼠标单机事件和鼠标双击事件不但可以定义在按钮上，还可以定义在很多对象上，包括直接定义在文档中。不管定义在什么地方，都是不能同时定义onclick和ondbclick事件的，因为当双击时，按第一下鼠标就会发生鼠标单机事件。4.1鼠标事件•从而也引出鼠标事件中还有鼠标按下事件和鼠标弹起事件。在javascript中，使用onmousedown事件表示鼠标按下事件，使用onmouseup事件表示鼠标弹起事件。•鼠标事件还有在制定区域内的鼠标进入事件、鼠标移动事件、鼠标离开事件。鼠标进入事件、鼠标移动事件、和鼠标离开事件是一组鼠标事件，他们通常是连续发生的。在javascript中，使用onmouseover事件表示鼠标进入事件，使用onmousemove事件表示鼠标移动事件，使用onmouseout事件表示鼠标离开事件。4.2键盘事件•与鼠标事件相同的是，键盘事件也分为很多更加具体的事件。首先看下onkeydown事件和onkeyup事件，onkeydown事件表示键盘按下事件，onkeyup事件表示键盘弹起事件。Onkeydown事件和onkeyup事件的使用和onmousedown事件和onmouseup事件的使用非常相似。•键盘事件除了onkeydown事件和onkeyup事件外，还有一个onkeypress事件。Onkeypress事件表示整个的按键过程。在实际应用中，通常使用onkeypress事件来获取所按得是哪一个键。在不同的浏览器中，使用onkeypress事件来获取按键的程序是不同的。