`
拓子轩
  • 浏览: 210081 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

DOM笔记

    博客分类:
  • note
阅读更多

DOM
一. DHTML
1. JavaScript将浏览器本身、网页文档、以及网页文档中的HTML元素等都用相应的内置对象来表示,这些对象及对象之间的层次关系统称为DOM(Document Object Model, 文档对象模型).
2. 用户通过鼠标或按键在浏览器窗口或网页元素上执行的操作,对DOM对象来说,就称之为事件(Event)。譬如,用户用鼠标单击了网页上的某个按钮,在这个按钮上就发生了鼠标单击事件,按钮就是事件源。
3. 如果将一段程序代码与某个是事件源上发生的某种事件相关联,当该事件源发生该事件时,浏览器便会自动执行与之关联的程序代码,从而引发的一连串程序动作,这个过程被称之为事件驱动(Event Driver). 对事件进行处理的程序或函数,被称之为事件处理程序(Event Handler), 它完成对事件进行响应的动作。
4. CSS(级联样式表)、脚本编程语言和DOM的结合使用,能够使HTML文档与用户具有交互性和动态变换性,这三种技术的单一称谓叫DHTML(Dynamic HTML, 动态HTML).
5. DOM对象的层次关系
 window
      |____location
      |____frames
      |____history
      |____navigator
      |____event
      |____screen
      |____document
                      |_____links
                      |_____anchors
                      |_____images
                      |_____filters
                      |_____applets
                      |_____embeds
                      |_____plugIns
                      |_____frames
                      |_____scripts
                      |_____all
                      |_____selection
                      |_____styleSheets
                      |_____body
6. 如何编写事件处理程序
6.1 在事件源对象所对应的HTML标签上增加一个要处理的事件属性,让事件属性值等于处理该事件的函数名或程序代码

<html>
 <head>
 <script language="javascript">
 <!--
 function hideContextmenu()
 {
  window.event.returnValue=false;
 }
 //-->
 </script>
 </head>
 <body oncontextmenu="hideContextmenu()">
 </body>
 </html>

 <html>
 <head>
 <script language="javascript">
 <!--
 function hideContextmenu()
 {
  return false;
 }
 //-->
 </script>
 </head>
 <body oncontextmenu="return hideContextmenu()">
 </body>
 </html>

 <a href="http://www.google.cn" onclick="return false">谷歌</a>

  

6.2 直接JavaScript代码中,设置元素对象的事件属性,让事件属性值等于处理该事件的函数名或程序代码。

 <script language="javascript">
 document.oncontextmenu=hideContextmenu;
 function hideContextmenu()
 {
  return false;
 }
 </script>

 6.3 在一个专门的<script>标签对中编写某个元素对象的某种事件处理程序代码,并用for属性指定事件源和用event属性指定事件名。 

 <script language="javascript" for="document" event="oncontextmenu">
  window.event.returnValue=false;
 </script>

 

二.window对象
1. window对象代表浏览器的整个窗口,编程人员可以利用window对象控制浏览器窗口的各个方面,如改变状态栏上的显示文字、弹出对话框、移动窗口的位置等。
2. 对window对象的属性和方法的引用,可以省略“window."这个前缀,例如,window.alert("你好")可直接写成alert("你好").
3. window对象----方法
3.1 alert方法
3.2 confirm方法
3.3 prompt方法
3.4 navigate方法:将当前网页导航到另一个URL
3.5 setInterval方法
3.5 setTimeout方法
3.6 clearInterval方法
3.7 clearTimeout方法
3.8 moveTo方法
3.9 resizeTo方法
3.10 open方法
3.11 showModalDialog方法
3.12 showModelessDialog方法
4. window对象----方法举例

<!--test.html网页文件:-->
 <script language="javascript">
  window.open("information.html", "_blank",
   "top=0,left=0,width=200,height=200,toolbar=yes/no titlebar=yes/no    fullscreen=yes/no");
 </script>

<!--information.html网页文件:-->
 <script language="javascript">
  window.setTimeout("window.close()",5000);
 </script>
 <body>
  <center><h3>通知</h3></center>
  5秒钟后,这个窗口将自动关闭!
 </body>

 
5. window对象----属性
5.1 closed
5.2 opener
5.3 defalultstatus
5.4 status
5.5 screenTop
5.6 screenLeft
5.7 window对象----属性举例

//test.html
 <script language="javascript">
 var strStatus="www.google.cn";
 var space_num=0;
 var dir=1;
 funcion scroll()
 {
  var str_space="";
  space_num=space_num+1*dir;
  if(space_num>40||space_num<=0)
  {
   dir=-1*dir;
  }
  for(var i=0;i<space_num;i++)
  {
   str_space+="";
  }
  window.status=str_space+strStatus;
 }

 function start()
 {
  window.setInterval("scroll()',100);
 }
 var child=window.open("information.html","_blank",
   "top=0,left=0,width=200,height=200,toolbar=no");
 function closeChild()
 {
  if(!child.closed)
  {
   child.close();
  }
 }
 </script>
 <body onunload="closeChild()">
 </body>

information.html
 <script language="javascript">
  window.setTimeout("closeit()",5000);
  function closeit()
  {
   opener.start();
   window.close();
  }
 </script>
 <body>
  <center><h3>通知</h3></center>
  5秒钟后,这个窗口会自动关闭!
 </body>

 
6. window对象----事件
6.1 专用事件:onload、onunload、onbeforeunload
 <body onload="alert('欢迎')" onunload="alert('再见')"
  onbeforeunload="window.event.returnValue='请小心'">
 </body>
6.2 通用事件:onclick、onmousemove、onmouseover、onmouseout、onmousedown、
        onmouseup、onkeydown、onkeyup、onkeypress

7. window对象----对象属性
7.1 location对象
 ★window.location.href="www.google.cn";
    等效于:
    window.navigate("www.google.cn");
 ★location对象的replace方法也可用于载入新的网页
 ★location对象的reload方法用于重新载入(刷新)窗口中的当前网页
7.2 event对象
7.3 frames数组对象:表示窗口中所有子窗口的集合
7.4 screen对象
7.5 clipboardData对象
7.6 history对象
7.7 navigator对象
7.8 document对象:表示整个网页文档

8.window对象----event对象
8.1 属性:altKey、ctrlKey、shiftKey、clientX、clientY、screenX、screenY、offsetX、offsetY
 x、y、returnValue、cancelBubble、srcElement、keyCode、button

9. window对象----frames数组对象
9.1 window对象的frames属性是一个数组,它与window对象的parent, top等对象属性,都是用于对HTML的帧标签(<frameset>或<iframe>)进行编程的JavaScript对象。

<!--framedemo.html-->
 <html>
 <head>
 </head>
 <frameset rows="20%,80%">
  <frame name=top src="top.html">?
  <frame name=bottom src="bottom.html">
 </frameset>
 </html>
<!--top.html-->
 <input type=button value="刷新" onclick="window.parent.frames[1].location.reload()">
 <input type=button value="刷新" onclick="parent.frames.bottom.location.reload()">
 <input type=button value="刷新" onclick="parent.frames['bottom'].location.reload()">
 <input type=button value="刷新" onclick="parent.frames.item(1).location.reload()">
 <input type=button value="刷新" onclick="parent.item['bottom'].location.reload()">
 <input type=button value="刷新" onclick="parent.bottom.location.reload()"> 
 <input type=button value="刷新" onclick="parent['bottom'].location.reload()">

 
9.2

<!--top.html-->
 <frameset rows="20%,*">
  <frame name="a">
  <frame name="x" src="bottom.html">
 </frameset>
<!--bottom.htm-->
 <frameset cols="30%,*">
  <frame name="b">
  <frame name="c" src="bottom_right.html">
 </frameset>
<!--bottom_right.html-->
 <script language="javascript">
  top.a.document.write("www.google.cn");
  //parent.parent.a.document.write("www.google.cn");
 </script>

<!--top.html-->
 <frameset row="20%,*">
  <frame name="a">
  <frameset cols="30%,*">
   <frame name="b">
   <frame name="c" src="bottom_right.html">
  </frameset>
 </frameset>
<!--bottom_right.html-->
 <script language="javascript">
  top.a.doucument.write("www.google.cn");
 </script>

 
三. document
1. document对象----方法
1.1 write
1.2 writeln
1.3 open: 用于打开一个新的文档
1.4 close: 当向新打开的文档对象中写完数据后,使用该方法关闭文档流
1.5 clear
1.6 getElementById:
1.7 getElementByName:
1.8 getElementByTagName:
1.9 createElement:
1.10 createStyleSheet:
1.11

<html>
这是最初的内容<br>
<script language="javascript">
 document.write("这是write方法动态写入的内容<br>");
 function updatedoc()
 {
  document.writeln("abc<br>");
  document.writeln("def<br>");
  document.close();
  var owin=window.open("","_blank");
  owin.document.writeln("xyz<br>");
  owin.document.close();
  owin.document.write("abc<br>");
  owin.document.write("def<br>");
  owin.document.close();
 }
</script>
<input type=button name="update" value="更新" onclick="updatedoc()" >
</html>

 2. 网页文档加密
2.1 网页文档内容的加解密
<script>
 document.write(unescape(escape('
  //网页文档
 ')));
</script>
2.2 对Javascript脚本代码进行解密
 <script language="JScript Encode">
 </script>
2.3 对Javascript脚本代码进行解密
2.4 使用ASP、JSP等程序动态产生的Javascript脚本文件来隐藏网页文档内容
 <script language="javascript" src="xxx.asp">
 </script>
</script>

3. document对象----属性
3.1 与<body>标签相关的属性:alinkColor、linkColor、vlinkColor、bgColor、fgColor
3.2 描述网页文档信息的属性:charset、defaultCharset、cookie、fileCreatedDate、fileModifiedDate
   fileSize、lastModified、URL、

分享到:
评论

相关推荐

    张龙 Schema DOM笔记

    ### 张龙 Schema DOM笔记 #### 一、Schema概述 **Schema**是一种用于验证XML文档有效性的工具,类似于**DTD**(Document Type Definition),但它提供了更加强大且灵活的功能。Schema不仅支持更丰富的数据类型,还...

    dom笔记1

    在"DOM笔记1"中,我们主要探讨了与CSS相关的DOM操作以及一些实际应用案例。 首先,我们要理解DOM中的三种基本节点类型:Element节点,Text节点和Comment节点。Element节点代表HTML元素,如`&lt;div&gt;`或`&lt;p&gt;`;Text节点...

    DOM课堂笔记

    达*js DOM课堂详细笔记PPT,DOM操作是JS的重要一环,只有熟练的操作DOM才能用好JS

    javascript DOM笔记 1

    在本文中,我们将深入探讨一些关键的DOM操作,特别是与获取和操作元素及它们的子节点相关的知识点。 首先,创建新的DOM元素可以通过`createElement`方法实现。例如,如果你想要创建一个新的`&lt;div&gt;`元素,你可以写`...

    javascript_使用DOM笔记1

    根据提供的文件信息,我们可以总结出以下几个关键的知识点: ... ...以下是一些常见的方法: ... ```javascript ...这些方法在实际开发中非常常见且实用,掌握它们将有助于更好地理解和使用JavaScript与DOM。

    传播智客扬中科老师讲的DOM 学习笔记

    根据给定的文件信息,我们可以总结出以下关于DOM(Document Object Model)操作的关键知识点: ### DOM简介 DOM是一种处理HTML和XML文档的标准接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM...

    树懒_day04.1_javascript_DOM笔记

    移动开发小白树懒,正在迈向远大的自己而现在努力的打下基础.JavaScript的DOM的高级部分.

    张龙S2SH学习笔记(经典)

    【张龙S2SH学习笔记(经典)】是基于圣思园张龙的视频教程整理出的学习资料,主要涵盖了Struts2、Spring和Hibernate这三大框架的整合使用,也就是我们常说的SSH(Spring、Struts2、Hibernate)框架集成。SSH框架在...

    JSWeb APIS笔记 笔记笔记

    **二、DOM笔记** DOM是HTML和XML文档的结构化表示,提供了编程访问页面内容的方法。JavaScript可以通过DOM API来创建、修改、删除和查找页面元素。例如,`createElement`用于创建新元素,`appendChild`将元素添加到...

    JavaScript HTML DOM学习笔记.emmx

    从菜鸟教程上学习的关于js的学习笔记,可以用于参考学习使用,脑图样式,浏览更方便,有需要的同学可以带走

    DOM知识总结

    史上最详细的DOM笔记,最全DOM操作详解。

    Dom4j学习笔记

    **标题解析:** "Dom4j学习笔记" 这个标题明确指出了我们要探讨的主题——Dom4j。Dom4j是一个流行的Java库,用于处理XML文档。它提供了丰富的API,使得XML的读取、写入、操作变得简单易行。在学习笔记中,通常会涵盖...

    传播智客杨中科DOM51-60学习笔记

    ### 一、选择并修改DOM元素 #### 1.1 直接修改元素属性 在示例代码中,我们看到通过`getElementById`方法选取了ID为`div1`的`&lt;div&gt;`元素,并通过修改其`style`属性中的`width`和`height`值来改变其大小。具体实现...

    jsDom编程笔记01

    JavaScript DOM编程笔记主要涵盖了解析HTML文档生成DOM树、JavaScript与DOM交互以及DOM操作的核心技巧。DOM(Document Object Model)是HTML和XML文档的一种结构化表示,它将文档转化为一个节点树,允许JavaScript...

    韩顺平老师笔记JS面向对象和dom编程笔记

    **JS面向对象编程** JavaScript(JS)是一种广泛用于网页和网络应用的脚本语言,它支持面向...结合韩顺平老师的笔记,这些概念和实践会帮助你深入理解JS面向对象编程和DOM编程,从而更好地构建交互丰富的Web应用程序。

    JS基本功DOM学习笔记

    在JS基本功DOM学习笔记中,我们将深入探讨以下几个核心知识点: 1. **DOM树**:DOM将网页内容表示为一棵由节点构成的树形结构,其中每个节点代表HTML元素、属性、文本等。根节点通常是`document`,其他节点如`&lt;div&gt;...

    韩顺平javascript笔记(最全整理 dom编程 oop 基础语法)

    韩顺平老师的JavaScript笔记全面涵盖了基础语法、面向对象编程以及DOM编程,这些都是学习JavaScript时至关重要的知识点。 首先,基础语法是JavaScript学习的基石。包括变量声明(var、let、const)、数据类型(如...

    Ch08-jQuery操作DOM核心笔记.txt

    Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txt

    JavaScript_DOM_编程艺术读书笔记

    ### JavaScript DOM 编程艺术读书笔记关键知识点解析 #### 一、JavaScript简史与相关技术简介 - **XHTML(可扩展的超文本标记语言)**:这是一种更加严格、更加强大的HTML版本,旨在提高网页的可读性和可扩展性。 ...

    XML DOM4J学习笔记

    本篇笔记将深入探讨XML DOM4J的学习要点。 一、XML基础知识 1. XML结构:XML文档由元素(Element)、属性(Attribute)、文本内容(Text)、注释(Comment)等组成。每个XML文档都有一个根元素,其他元素嵌套在根...

Global site tag (gtag.js) - Google Analytics