历史版本5 :前端常用知识 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
HTML DOM是W3C标准(是HTML文档对象模型的英文缩写,Document Object Model for HTML)。
HTML DOM定义了用于HTML的一些列标准的对象,以及访问和处理HTML文档的标准方法。
通过DOM,可以访问所有的HTML元素,连同他们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。
在JavaScript中可以访问并处理所有的HTML DOM对象。
Window对象编辑
1. 概述
Window对象表示浏览器中打开的窗口。
如果文档包含框架(frame或 iframe标签),浏览器会为HTML文档创建一个Window对象,并为每个框架创建一个额外的Window对象。
Window对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中,Window对象是全局对象,所有的表达式都在当前的环境中计算。
可以通过window来引用Window对象,通常情况下可以直接使用winodw下的方法。如可以只写document,而不必写window.document。
同样,可以把当前窗口对象的方法当作函数来使用,如只写alert(),而不必写window.alert()。
2. Window对象的常用属性
属性 | 说明 |
closed | 返回窗口是否已被关闭 |
document | 对Document对象只读引用 |
innerheight | 返回窗口文档显示区高度 |
innerwidth | 返回窗口文档显示区宽度 |
location | 用于窗口或框架的Location对象 |
name | 设置或返回窗口名称 |
parent | 返回父窗口 |
3. Window对象的常用方法
方法 | 说明 |
alert() | 显示带有一段消息和一个确认按钮的警告框。 |
close() | 关闭浏览器窗口。 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
prompt() | 显示可提示用户输入的对话框。 |
4. 示例
4.1 close()方法
关闭浏览器窗口,默认为关闭当前窗口,也可以通过self.close()关闭当前窗口。
4.2 alert()方法
显示带有一段消息和一个确认按钮的警告框。效果如下:
JS脚本如下:
HTML/XML代码
<script type="text/javascript"> function display_alert() { alert("I am an alert box!!") } </script>
4.3 confirm()方法
显示带有一段消息以及确认按钮和取消按钮的对话框。点击确定,返回true,点击取消,返回false
4.4 promt()方法
prompt() 方法用于显示可提示用户进行输入的对话框。语法为
HTML/XML代码
prompt(text,defaultText)
如果用户单击提示框的取消按钮,则返回 null。如果用户单击确认按钮,则返回输入字段当前显示的文本。
在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 prompt() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句
JS代码如下:
HTML/XML代码
<script type="text/javascript"> function disp_prompt() { var name=prompt("Please enter your name","") if (name!=null && name!="") { document.write("Hello " + name + "!") } } </script>
4.5 open()方法
打开一个新的浏览器窗口或查找一个已命名的窗口。使用语法:
- window.open(URL,name,features,replace)
URL | 一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。 |
name | 一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记 'a' 和 'form' 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。 |
features | 一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征 |
replace | 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值: true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。 |
请不要混淆方法 window.open() 与方法 document.open(),这两者的功能完全不同。为了使您的代码清楚明白,请使用 window.open(),而不要使用 open()
比如:
HTML/XML代码
window.open("www.finereporthelp.com")
4.6 print()方法
用于打印当前窗口的内容。
调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮。通常,这会产生一个对话框,让用户可以取消或定制打印请求。
location对象编辑
1. 概述
Location 对象包含有关当前 URL 的信息。 Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。
2. location对象的常用属性
hash | 设置或返回从#开始的URL |
host | 设置或返回主机名和当前URL的端口号 |
hostname | 设置或返回当前URL的主机名 |
href | 设置或返回完整的URL |
pathname | 设置或返回当前URL的路径部分 |
port | 设置或返回当前URL的端口号 |
search | 设置或返回从?开始的URL(查询部分) |
3. location对象的reload()方法
reload()方法用于重新加载当前文档。
语法为:
HTML/XML代码
location.reload(false)
如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
document对象 编辑
1. 概述
每个载入浏览器的HTML 文档都会成为Document 对象。 Document 对象使我们可以从脚本中对HTML页面中的所有元素进行访问。
Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问
2. document对象的常用属性
cookie | 设置或返回当前文档有关的所有cookie |
title | 返回当前文档的标题 |
URL | 返回当前文档的URL |
3. document对象的常用方法
3.1 close()方法
close() 方法可关闭一个由 document.open 方法打开的输出流,并显示选定的数据。语法:
HTML/XML代码
document.close()
该方法将关闭 open() 方法打开的文档流,并强制地显示出所有缓存的输出内容。
如果您使用 write() 方法动态地输出一个文档,必须记住当你这么做的时候要调用 close() 方法,以确保所有文档内容都能显示。
一旦调用了 close(),就不应该再次调用 write(),因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。
3.2 getElementByID()方法
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。语法是
HTML/XML代码
document.getElementById(id)
参考完整代码如下
HTML/XML代码
<html> <head> <script type="text/javascript"> function getValue() { var x=document.getElementById("myHeader") alert(x.innerHTML) } </script> </head> <body> <h1 id="myHeader" >这是标题</h1> <p>点击标题,会提示出它的值。</p> </body> </html>
3.3 getElementByName()方法
getElementsByName() 方法可返回带有指定名称的对象的集合。
该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。
3.4 getElementByTagName()
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
3.5 write()方法
write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。 可列出多个参数(exp1,exp2,exp3,...) ,它们将按顺序被追加到文档中。
语法:
HTML/XML代码
document.write(exp1,exp2,exp3,....)
我们通常按照两种的方式使用 write() 方法:
一是在使用该方法在文档中输出 HTML,另一种是在调用该方法的的窗口之外的窗口、框架中产生新文档。
第二种情况中,请务必使用 close() 方法来关闭文档。
示例:
参考代码如下:
HTML/XML代码
<html> <body> <script type="text/javascript"> document.write("Hello World! ","Hello You! ","<p style='color:blue;'>Hello World!</p>") </script> </body> </html>