《JavaScript高级程序设计》读书笔记 56章

第五章 浏览器中的javascript

     1.<script>标签

          该标签通常放在<head>中。如果声明了src属性,则<script>标签中的代码可能无效(由浏览器决定),若没声明,则可以写任何代码

     2.内嵌代码和外部文件

          一般认为,大量的js代码不应内嵌入html中

          理由是:安全性,代码维护,缓存

     3.建议在<body>中,只使用事件注册函数

     4.在开始载入页面时,js就开始运行了。<head>和<body>均属于window下作用域,但细分不同。<head>标签中无法访问<body>标签中的函数,同名函数两个作用域也互不影响。

     5.js代码隐藏。若支持js,则忽略//-->  执行<script>标签; 而不支持js,则

     <script type="text/javascript"><!--

          function(){
               alert("a");

          }

//-->

     </script>

     6.BOM

Image(4)

          window对象是整个BOM的核心,所有对象和集合都以某种方式回接到window对象。

          7.window对象

               window对象表示整个浏览器窗口,但不必表示其中包含的内容。此外,window还可用于移动或调整它表示的浏览器的大小,对着对它产生其他影响

                window对象有两个实例,top和parent,top始终指向浏览器的顶层窗口,及浏览器自身。而parent对象与

               1.窗口操作

                    moveBy(dx,dy)   moveTo(dx,dy)  resizeBy(dw,dh)  resizeTo(w,h)  直接传number就可以,浏览器窗口碰边就不在移动

               2.浏览器窗口位置

                    IE中   window.screenLeft和window.screenTop来判断窗口的位置。document.body.offsetWidth和document.body.offsetHeight属性可以获取视口的大小(显示HTML页的区域),但他们不是标准属性

                    Mozilla和Opera中  window.screenX和window.screenY来判断窗口的位置。window.innerWidth和window.innerHeight来判断视口大小

               3.系统对话框 (模态)

                    alert()  

                    confirm()   返回boolean,判断用户点击确定还是取消

                    prompt()    使用 Image(5)

               4.状态栏   貌似IE 火狐都不支持这个属性

                    defaultStatus和status两个属性

                    defaultStatus   永久改变

                    status   改变一下

               5.时间间隔和暂停

                    js支持暂停和时间间隔,这可有效的告诉浏览器应该何时执行某行代码

                    window对象的setTimeout()方法设置暂停。该方法接受两个参数,要执行的代码和在执行它之前要等待的毫秒数

                    要取消还未执行的暂停,可调用clearTimeout()方法,并将暂停ID传递给它

                    window对象的setInternal()方法设置间隔

                    clearInternal()清除

               6.历史 history属性

                    可以访问浏览器窗口的历史个数,但是不能访问URL,处于安全考虑

                   go()方法只有一个参数,前进或后退的页面数。window.history.go(1)   window.history.go(-1)

                    back()  forward()方法

               7.document对象   唯一一个既属于BOM又属于DOM的对象。在BOM角度看,document对象由一系列集合构成,这些集合可以提供页面自身的信息。由于BOM没有可以知道实现的标准,所以各个浏览器的document对象都稍有不同

                    document对象实际上是window对象的属性。

                    document.lastModified  最后修改页面的日期,是字符串

                    document.referrer  浏览器历史中后悔一个位置的URL

                    document.title      浏览器历史中后退一个位置的URL

                    document.URL      当前载入的页面的URL

                    document.anchors     页面所有锚的集合

                    document.applets      页面中所有applet的集合

                    document.forms         页面中所有表单的集合

                    document.images       页面中所有图像的集合

                    document.links          页面中所有链接的集合  

                    document对象最常用的方法

                    write()   writeln()  这两个方法都接受一个参数,将字符串插入到调用它们的位置。这样浏览器就会像处理页面中的常规HTML代码一样处理这个文档字符串

注意:要插入内容属性,必须在完全载入页面前调用write()和writeln()方法。如果任何一个方法是在页面载入后调用的,他将抹去页面的内容,显示指定的内容。

                    当你想显示无需返回服务器的页面时,document.open和document.close非常有效

               8.location对象  号称BOM中最有用的对象之一

Image(6)

Image(7)

                    3个方法

                         assign()   相当于location.href   会在浏览器中留下历史

                         replace()   也是跳转页面,但不会再浏览器中留下历史

                         reload()    重新加载页面,可以指定从缓存加载还是服务器加载。必要时一定放在代码的最后一行

注意:document.location 和 window.location 指的是一个东西

               8.navigator

                    navigator对象时最早实现的BOM对象之一,包含大量有关web浏览器的信息,它也是window的属性之一

Image(8)

Image(9)

                  9.screen对象

Image(10)

第六章 DOM基础

         1.xml

               xml的主要目的是使用文本以结构化的方式来表示数据

               DOM是针对XML的基于树的API,虽然慢,但使用简单

注意:DOM是语言无关API,意味着它的实现并不与java,javascript或者其他语言绑定

2.对DOM的支持上,火狐最好,oper和safari其次,IE最差

           3.节点属性与方法Image(11)

           4.节点类型Image(12)

           5.处理特性

               只有Element节点才有attributes

               <p id="id" sytyle="color:red">asd</p>

               假设op是指向这一标签的引用,则可以这样获取id的值

               op.attributes.getNamedItem("id").nodeValue。

               太累赘, 于是又了setAttribute()和getAttribute()以及removeAttribute()方法

          6.访问指定节点

               1.getElementById()   IE6中,如果给定的id匹配某个元素的name值,也会返回该值。

               2.getElementsByTagName  返回一个包含所有的tagName特性等于指定值得元素的NodeList

                  getElementByTagName("*") 返回指定NodeList的所有元素 (在IE6中,要使用document.all)

               3.getElementsByName()

           7.创建和操作节点

               1.创建新节点

Image(13)

Image(14)

注意:在页面完全下载到客户端机器之前,是无法完全构建dom树。因为这个原因,必须使用window.onload事件句柄来执行所有的代码

              2.常用方法

                    createElement()   createNodeText()  appendchild()

                    replaceChild()  removeChild()  insertBefore()

                    createDocumentFragment()  一次性添加大量文档改动

           8.HTML DOM特征功能

                    核心DOM的特性和方法是通用的,是为了在各种情况下操作有所XML文档而设计的

                    而HTML DOM的特性和方法是在专门针对HTML的同时也让一些DOM操作更加简便

                1.让特性像属性一样

                    例如<img src="1.jpg" alt="hehe"/>

                    若想改变img,可以用setAttribute()  也可以用img.src 或 img.alt

                    IE对setAttribute支持并不尽如人意,推荐使用属性

               ============以下是DOM  L2的东西,了解即可============================

                2.NodeIterator,可以对DOM树进行深度优先遍历

                3.TreeWalker     有NodeIterator所有的功能,并且添加了一些遍历方法

            9.测试与DOM标准的一致性

               implementation对象是DOM文档的一个特性,唯一的方法是hasFeature()

               例如,像检查对XML DOM  Level1的支持,可以这样调用

               var bXmlLevel1=document.implementation.hasFeature("xml","1.0") 支持则返回true

原文地址:https://www.cnblogs.com/qiuyeyaozhuai/p/2720642.html