前端常用知识 FineReport帮助文档|报表开发|报表使用|学习教程

历史版本4 :前端常用知识返回文档

编辑时间:11-27 12:54 历史版本: 最新历史版本上一篇历史版本下一篇历史版本 内容长度:30080 图片数:5目录数:3 修改原因:修正错误

HTML DOM是W3C标准（是HTML文档对象模型的英文缩写，Document Object Model for HTML）。

HTML DOM定义了用于HTML的一些列标准的对象，以及访问和处理HTML文档的标准方法。

通过DOM，可以访问所有的HTML元素，连同他们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

在JavaScript中可以访问并处理所有的HTML DOM对象。

Window对象
location对象
document对象

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>

Window对象编辑

location对象编辑

document对象 编辑

document对象编辑