zoukankan      html  css  js  c++  java
  • JavaScript高级程序设计-读书笔记(3)

    第8章 BOM

    1、window对象

      (1)全局作用域

      BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。

      所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

      (2)窗口关系及框架

      如果界面中包含框架,这每个框架都拥有自己的window对象,并且保存在frames集合中,可以通过数值的索引(从0开始,从左至右,从上到下)或者框架名称来访问相应的window对象。

      window对象指向的是那个框架的特定实例,而非最高层的框架。

       top对象始终指向最高(最外)层的框架,也就是浏览器对象。

       parent对象始终指向当前框架的直接上层框架。

       self对象始终指向window;实际上,self和window对象可以互换使用,引用self对象的目的只是为了与top和parent对象对应起来。

       (3)窗口位置

    使用下列代码可以跨浏览器取得窗口左边和上边的位置:

    var leftPos = (typeof window.screenLeft == “number”)?

                 window.screenLeft : window.screenX;

    var topPos = (typeof window.screenTop == “number”)?

                 window.screenTop : window.screenY;

    IE 、Safari、Opera、Chrome提供了screenLeft和screenTop属性,分别英语表示窗口相对于屏幕左边和上边的位置。Firefox这在screenX和screenY属性提供相同的窗口位置信息。

    使用moveT()和moveBy方法有可能将窗口精确地移动到一个新的位置。这两个方法都接收两个参数,其中moveT()接收的是新位置的x和有坐标值,而moveBy()接收的是在水平和垂直方向上移动的像素数。

    这两个方法,在Opera和IE7(及更高版本)中默认就是禁用的;另外,这两个方法都不适用与框架,只能对最外层的window对象使用。

    (4)窗口大小

    Firefox 、Safari、Opera、Chrome均为此提供了4个属性:innerWidth、innerHeight、outerWidth和outerHeigh。

    IE没有提供取得当前浏览器窗口尺寸的属性;不过,它通过DOM提供了页面可见区域的相关信息。

    使用resizeTo()和使用resizeBy()方法可以调整浏览器窗口的大小。某些情况下,也有可能被浏览器禁用。

    (5)导航和打开窗口

    使用window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。

    close方法仅适用于通过window.open打开的弹出窗口的关闭;对于浏览器的主窗口,如果没有得到用户的允许是不能关闭的。

    弹出窗口倒是可以调用top.close()在不经用户允许的情况下关闭自己。

    准确地检测出弹出窗口是否被屏蔽,代码如下:

    var blocked = false;

    try {

          var wroxWin == window.open(“http://www.wrox.com”,”_blank”);

          if (wroxWin == null){

          blocked = true;

          }

    } catch(ex){

       blocked = true;

    }

    if (blocked){

           alert(“The popup was blocked”);

    }

    (6)间歇调用和超时调用

    超时调用使用window对象的setTimeout()方法,是在指定的时间过后执行代码;要取消尚未执行的超时调用计划,可以使用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。

    设置间歇调用的方法是setInterval(),是每隔指定时间就执行一次代码;要取消尚未执行的间歇调用,可以使用clearInterval()方法并传入相应的间歇调用ID。

    一般认为,使用超时调用来模拟间歇调用的是一种最佳模式。

      (7)系统对话框

         浏览器通过alert()、confirm()和prompt方法可以调用系统对话框向用户显示消息。

         系统对话框与浏览器显示的网页没有关系,也不包含HTML。他们的外观由操作系统及(或)浏览器设置决定,而不是由CSS决定。

         还有两个通过JavaScript打开的对话框,即window.print()和window.find()。

    2、location地址栏对象

    提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。

    3、navigator浏览器信息对象

    4、screen对象

      基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。

    5、history对象

       保存用户上网的历史记录,从窗口打开的那一刻算起。

       使用go()方法可以在用户的历史记录中任意跳转,可以向前也可以向后。

       另外还使用两个简写方法back()和forward()来代替go ();

    第9章 客户端检测

    1、能力检测

      最常用也是最为人们广泛接受的客户端检测形式(又称特性检测),其目标是在编写代码之前先检测特定浏览器的能力。

    2、怪力检测

      其目标是识别浏览器的特殊行为,存在什么缺陷(“怪癖”也就是bug)。

    3、用户代理检测

       通过检测用户代理字符串来识别浏览器。

       检测呈现引擎、平台、Windows操作系统、移动设备和游戏系统。

    第10章 DOM

    1、节点层次

    DOM可以将任何HTML或XML文档描述成一个由多层节点构成的结构。

    (1)Node类型

    JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法。

    每个节点都有一个nodeType属性,用于表明节点的类型。

    要了解节点的具体信息,可以使用nodeName和nodeValue这两个属性。

    对于元素节点,nodeName中保存的始终都是元素的标签名,而nodeValue的值则始终为null。

    每个节点都有一个childNodes属性,其中保存着一个NodeList对象。NodeList是一种类型数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。而且这个对象也有length属性,但它不是Array的实例。

    每个节点都有一个parentNode属性,该属性指向文档树中的父节点。

                                  节点关系图

    hasChildNodes()方法在节点包含一或多个节点的情况下返回true。

    所有的节点都有的最后一个属性是ownerDocument,该属性指向表示整个文档的文档节点。

    节点操作:

    appendChild()用于向childNodes列表的末尾添加一个节点;

    insertBefore()方法把节点放在childNodes列表中某个特定的位置上;、

    replaceChild()替换节点;

    removeChild()移除节点;

    上述几种方法操作的都是某个节点的子节点,也就是说,要使用这几个方法必须先取得父节点。

     有两个方法是所有类型的节点都有的:

    第一个是cloneNode(),用于创建调用这个方法的节点的一个完全相同的副本。其接受一个布尔值参数:参数为true,执行深复制,也就是复制节点及整个子节点树;参数为false,即只复制节点本身,复制后返回的节点副本属于文档所有,但并没有为它指点父节点。

    另一个方法是normalize(),其作用是处理文档树中的文本节点。当在某个节点上调用这个方法时,就会在该节点的后代节点中查找。如果找到了空文本节点,则删除它;如果找到相邻的文本节点,则将它们合并为一个文本节点。

      (2)Document类型

       所有的浏览器都支持document.documentElement和document.body属性。

       documentElement、firstChild和childNodes[0]的值相同,都指向<html>元素。

       取得元素的操作可以用document对象的几个方法:getElementById()、getElementsByTagName()、getElementsByName();

       将输出流写入到网页有4个方法实现:write()、writeIn()、open()、close()。

    write()会原样写入,而writeIn()则会在字符串的末尾添加一个换行符( )。

    (3)Element类型

    Element类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。

    要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性。

    每个HTML元素中都存在下列标准特性:id、title、lang(元素内容的语言代码,很少用)、dir(语言的方向,值为ltr或rtl,也很少用)、className。

    每个元素都有一个或多个特性,这些特性的用途是给出相应元素或内容的附加信息。操作特性的DOM方法主要有三个,分别为getAttribute()、setAttribute()和removeAttribute()。

    创建元素使用document.createElement()方法。这个方法只接受一个参数,可以是要创建元素的标签名,也可以传入完整的元素标签,也可以包含属性。

    (4)Text类型

    文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容。

    可以通过nodeValue属性或data属性访问节点中包含的文本。

    可以使用document.createTextNode()创建新的文本节点,这个方法接收一个参数——要插入节点中的文本。

    规范化文本节点可以使用normalize()方法。如果在一个包含两个或多个文本节点的父元素上调用该方法,则会将所有文本节点合并成一个节点,结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值。

    与之作用相反,splitText方法会将一个文本节点分成两个文本节点,即按照指定的位置分割nodeValue值。

    2、DOM操作技术               

    (1)动态脚本

       指的是在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本。

       创建动态脚本有两种方式:插入外部文件和直接插入JavaScript代码:

    ²   动态加载外部JavaScript文件,创建节点的DOM代码(整个过程使用函数封装)如下所示:

    function loadScript(url) {

       var script = document.createElement(“script”);    

       script.type = “text/javascript”;

       script.src = url;

       document.body.appendChild(script);

    }

    通过调用这个函数来加载外部的JavaScript文件:

    loadScript(”client.js”);

    (2)动态样式

       能够把CSS样式包含到HTML页面中的元素有两个。其中,<link>元素用于包含来自外部的文件,而<style>元素用于指定嵌入的样式。

    (3)操作表格

       要想创建表格,一般都必须涉及表示表格行、单元格、表头等方面的标签。

     为了方便构建表格,HTML DOM还为<table>、<tbody>和<tr>元素添加了一些属性和方法。

    (4)使用NodeList

       从本质上说,所有NodeList对象都是在访问DOM文档时实时运行的查询。一般,应该尽量减少访问NodeList的次数。

  • 相关阅读:
    《ECMAScript6入门》___阮一峰 笔记
    JS的常用正则表达式 验证密码(转载自用)
    微信小程序 写一个获取验证码 及setInterval 使用基本方法
    python中将图片从客户端(client)推到(POST)到服务器端(server)的方法
    用python将MSCOCO和Caltech行人检测数据集转化成VOC格式
    Tensorflow物体检测(Object Detection)API的使用
    opencv获取IP摄像头(IP-camera)实时视频流
    利用flask将opencv实时视频流输出到浏览器
    Tensorflow同时加载使用多个模型
    opencv在同一窗口打印多张图片
  • 原文地址:https://www.cnblogs.com/ww03/p/5267332.html
Copyright © 2011-2022 走看看