HTML DOM 总结

最新推荐文章于 2024-11-07 10:38:40 发布

IT-Style

最新推荐文章于 2024-11-07 10:38:40 发布

阅读量780

点赞数

文章标签： html 文档 url 浏览器 namespaces stylesheet

本文链接：https://blog.csdn.net/softkexin/article/details/5941018

版权

DOM对象介绍

一、DOM简述
DOM—Document Object Model,它是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套习属性、方法和事件。
DOM 是以层次结构组织的节点或信息片断的集合。文档对象模型（Document Object Model）是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。

从上图可以看出：
（1）打开网页后，首先看到的是浏览器窗口，即顶层的window对象。
（2）其次，看到的是网页文档的内容，即document文档。
（3）定位对象：
window.document.myform.text1
或
document.myform.text1
因为window窗口对象是所有页面的根对象，所以常常省略。
(4)地址对象location和历史对象history，它他对应IE浏览器中的地址栏和前进/后退按钮。

二、窗口 window
常用属性：
1 window.clesed ：指明窗口是否关闭。
2 window.defaultValue ：窗口状态栏的默认信息。
3 window.docement ：表示浏览器窗口中的HTML文档。
4 window.location ：表示有关当前URL的信息。
5 window.history ：表示有关当前访问过的RUL的信息。
6 window.name ：设置或检索窗口或框架的名称。
7 window.screen ：包含有关客户的屏幕和显示性能的信息。
8 window.screenX ：窗口X坐标
9 window.screenY ：窗口Y坐标
10 window.status ：设置或检索窗口状态栏中的信息。
11 window.title ：设置或检索窗口顶部标题栏中的信息。
12 window.self ：当前窗口。
13 window.parent ：当前窗口的最上层窗口。
14 window.top ：当前显示的窗口的最上层窗口。
15 window.opener ：所打开“子窗口”的“父窗口”的名称。

得到当前窗口的详细信息：

<head>

<title>JavaScript</title>

</head>

<body >

window.document.writeln(" 当前位置："+window.location+"</br>");

window.document.writeln(" 包含窗口个数："+window.length+"</br>");

window.document.writeln(" 当前状态栏的信息："+window.status+"</br>");

window.document.writeln(" 当前窗口的名称："+window.name+"</br>");

window.document.writeln(" 当前窗口的X、Y坐标是："+window.screenX+","+window.screenY);

</script>

</body>

常用方法：
1 window.alert(“ 提示信息”)：显示一个包含确定按钮的对话框。
2 window.blur() ：使对象失去焦点并激发onblur事件。
3 window.close() ：关闭窗口。
4 window.open(“ 打开窗口的url”,”窗口名”,”窗口特征”)：按指定特征打开窗口。
窗口特征参数如下 :
height：窗口高度
width ：窗口宽度
top ：窗口距屏幕上方的象素值
left ：窗口跟屏幕左侧的象素值
toolbar ：是否显示工具栏，yes或1表示显示，no或0表示不显示。
menubar ：是否显示菜单栏，yes或1表示显示，no或0表示不显示。
scrollbars ：是否显示滚动栏，yes或1表示显示，no或0表示不显示。
resizable ：是否允许改变窗口大小，yes或1表示否允，no或0表示不否允示。
location ：是否显示地址栏，yes或1表示显示，no或0表示不显示。
status ：是否显示状态栏，yes或1表示显示，no或0表示不显示。
5 window.confirm(“ 提示信息”)：显示一个确认对话框，包括确定和取消按钮。当点确定按钮时返回的是true,点取消按钮时返回的是false。
6 window.prompt(“ 提示信息”,显示在text中的默认值)：显示带输入框提示对话框，主要用来收集信息。当点确定按钮时返回的是true,点取消按钮时返回的是false。
7 窗口定位的方法：
（1） window.moveBy(x,y)：实现窗口的定向、定量移动。两个参数分别表示x方向移动的距离和y方向移动的距离。
（2） window.moveTo(x,y)：把窗口移动到指定坐标位置。两个参数分别表示横坐标、纵坐标。

8 窗口大小控制的两个方法：

（1）resizeBy(x,y)：按指定的尺寸调整窗口的大小。两个参数分别表示在水平方向上的改变量和垂直方向上的改变量。
（2）resizeTo(x,y)：把窗口调整到指定尺寸。两个参数分别表示浏览器窗口的宽和高。

9 操作定时器的两个方法：
（1）setTimeout(“函数’,毫秒数)：设置定时器，经过指定毫秒值后执行某个函数。
（2）clearTimeout(定时器对象)：取消某个定时器。

三、历史对象history
主要属性：
1 window.history.length:得到浏览器历史清单中的项目个数。

主要方法：
1 window.history.back():加载History列表中的上一个URL，相当于IE的后退按钮。等同于window.history.go(-1);
2 window.history.forward():加载History列表中的下一个URL，相当于IE的前进按钮。等同于window.history.go(1);
3 go(“url” or number):加载History列表中的一个URL，或要求浏览器移动指定的页面数。

四、地址对象location
此对象相当于IE浏览器中的地址栏,包含了关于当前URL地址的信息.它提供了一种重新加载当前URL的方法。

主要属性：
1 window.location.hash ：设置或检索另一个页面里的锚
2 window.location.host ：设置或检索URL的主机名和端口号
3 window.location.hostname ：设置或检索URL的主机名部分
4 window.location.pathname ：设置或检索URL相对路径
5 window.location.href ：设置或检索完整的URL字符串（常用）
6 window.location.port ：设置或检索主机端口号
<script language="javascript" type="text/javascript">

window.document.writeln(" 锚 "+window.location.hash+"</br>");

window.document.writeln(" 主机名及端口号 "+window.location.host+"</br>");

window.document.writeln(" 主机名 "+window.location.hostname+"</br>");

window.document.writeln(" 端口号 "+window.location.port+"</br>");

window.document.writeln(" 相对路径 "+window.location.pathname+"</br>");

window.document.writeln("URL 链接字符串 " +window.location.href+"</br>");
</script>

主要方法：
1 assign(“url”) ：加载URL指定的新的HTML文档。
2 reload() ：重新加载当前页。
3 replace(“url”) ：通过加载URL指定的文档来替换当前文档。

五、文档对象Document

Document 对象表示给定浏览器窗口中的HTML文档，并用于检索文档的信息、检查和修改HTML元素和文档中的文本、以及处理事件。

主要属性：
1 alinkColor ：设置或获取元素中所有激活链接的颜色

2 linkColor：设置或获取对象文档链接的颜色。

3 vlinkColor：设置或获取用户已访问过的链接颜色。

4 URL：设置或获取当前文档的 URL。

5 location:获取当前URL的信息。

6 title：设置或获取当前文档的标题。

7 protocol：设置或获取 URL 的协议部分。

8 readyState：获取表明对象当前状态的值。

9 alinkColor：设置或获取元素中所有激活链接的颜色。

10 bgColor：设置或获取表明对象后面的背景颜色的值。

11 fgColor：设置或获取文档的前景(文本)颜色。

12 all：返回对象所包含的元素集合的引用。

13 anchors：获取所有带有 name 和/或 id 属性的 a 对象的集合。此集合中的对象以 HTML 源顺序排列。

14 applets：获取文档中所有 applet 对象的集合。

15 childNodes：获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。

16 embeds：获取文档中所有 embed 对象的集合。

17 forms：获取以源顺序排列的文档中所有 form 对象的集合。

18 frames：获取给定文档定义或与给定窗口关联的文档定义的所有 window 对象的集合。

19 images：获取以源顺序排列的文档中所有 img 对象的集合。

20 links：获取文档中所有指定了 HREF 属性的 a 对象和所有 area 对象的集合。

21 namespaces：获取 namespace 对象的集合。

22 scripts：获取文档中所有 script 对象的集合。

23 styleSheets：获取代表与文档中每个 link 或 style 对象的实例相对应的样式表的 styleSheet 对象的集合。

主要方法：

1 clear(): 清除当前文档。

2 close(): 关闭输出流并强制将数据发送到显示。

3 write("text"): 在指定窗口的文档中写入一个或多个 HTML 表达式。

4 writeln("text"): 在指定窗口的文档中写入一个或多个 HTML 表达式，后面追加一个换行符。5 focus(): 使得元素得到焦点并执行由 onfocus 事件指定的代码。6 hasFocus():获取表明对象目前是否拥有焦点的值。7 getElementById("ID "):8 getElementsByName("Name "):9 getElementsByTagName(“TagName”):