zoukankan      html  css  js  c++  java
  • JS之BOM、客户端检测和DOM

        这是第八章到第十二章的内容,粗略浏览过一遍.

    一、BOM

      浏览器对象模型。包括了window、location、navigator、screen和history对象。

        window:核心对象

    1、JS访问浏览器窗口的一个借口

    2、全局作用域Global对象,所有在全局作用域中生命的变量,函数都会变成window对象的属性和方法。(全局变量不能通过delete删除,而window对象),如果页面中包含框架,并且保存在frames集合中。在frames集合中,可以通过数值索引(从0开始,从左至右,从上到下)或者框架名称来访问响应的window对象。

    框架页面中通过top.frames[i]访问window对象。

      窗口位置:

    var topPos=(typeof window.screenTop==’number’)?window.screenTop:windw.screenY;
    var leftPos=(typeof window.screenTop==’number’)?window.screenTop:windw.screenY;

      打开窗口:

     window.open()4个参数:需要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器

      移动窗口:

    moveTo(x,y)窗口移动到新的(x,y)坐标值,moveBy(x,y)在水平和垂直方向上移动的像素数

      

    间歇调用和超时调用

      超时调用:var id=setTimeout(function(){},1000);

    clearTimeout(id)超时调用函数返回一个数值id,可以通过它来取消超时调用计划

      间歇调用:setInterval()

      系统对话框:

      alert()

      confirm(’Are u sure?’)

      prompt()比confirm增加一个文本输入域,第二个参数可表示默认值,单击ok返回文本域的值,其他返回null

          location对象 

    保存着当前文档的信息,将URL解析为独立的片段(hash.host,href…)

      1查询字符串参数

      2位置操作:location.href=”http”//...”可以修改hash,search,hostname,pathname和port属性设置为新值来改变URL,这种方法会在浏览器历史记录中生成一条新记录,因此用户可以点击后退按钮导航到前一个页面,而replace()方法无法返回

      Location.reload()重新加载,有可能从缓存中加载

      Location.reload(true); 重新加载,从服务器

         Navigator对象

     用于检测显示网页的浏览器类型,Plugins属性,安装插件信息的数组

        Hittory对象

    客户端检测  

      先设计最通用的方法然后再使用特定于浏览器的技术,增强该方案。

        能力检测—>识别浏览器的能力à保证代码最优化

      怪癖检测:识别浏览器的特殊行为

      用户代理检测

    DOM:

      文件对象模型,针对HTML XML

      1、节点层次

         DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型。每种类型分别表示文档中不同的信息及标记。每个节点都有各自的特点、数据和方法,另外也与其他节点存在某种关系。节点中间的关系构成了层次,而所有页面标记则标为一个以特定节点为根节点的树形结构。

      节点关系:每个节点都有个childNodes属性,其中保存着一个NodeList对象。

      

    Node类型

    操作节点 appendChild()向chiedNodes列表末尾添加一个节点

               insertBefore()插入节点

        replaceChild(a,b)a要替换成为a,b被替换的子节点

        removeChild 移除子节点

        复制: cloneNode(true)深复制false只复制本身

    Document.anchors(所有带name的a元素

    <a></a>)/forms(<forms></>)/images/links所有带href的a元素

    文档写入

    将输出流写入到玩各种 write() writeln() open() close()

    DOM拓展

    QuerySelector()返回第一个 querySelectorAll()所有

    HTML5

    1   getElementsByClassName()

      add(value),

      contains(val),

      remove(val),

      toggle(val)如果列表中已经存在给定的值删除它,如果无,添加它

    自定义数据属性 <div id=’’,data-appid=’1234’></div> 添加data-前缀

    标记属性:innerHTML/outerHTML

          InsertAdjacentHTML() 两个参数,第一个是插入位置,第二个插入html文本

        Para1 :beforebegin 在当前元素之前插入一个紧邻的同辈元素

                 afterbegin 在当前元素之下插入一个新的子元素或则在第一个子元素之前再插入一个新的子元素

                 beforeend 在当前元素之下插入一个新的子元素或在最后一个子元素之后插入新的子元素

                 afterend在当前元素之后插入一个紧邻的同辈元素

                         scroolIntoView()通过滚动浏览器窗口或者某个容器元素,调用元素就可以出现在视口中

    文档模式<meta>

           插入文本 innerText  div.innerText=’sdsd’;

      

  • 相关阅读:
    屏蔽右键
    无法解析类型 java.lang.Object。从必需的 .class 文件间接引用了它
    屏蔽右键
    Servlet的三个基本方法
    应用HttpClient来对付各种顽固的WEB服务器 摘抄
    Apache xmlrpc
    利用缓存机制快速读取XML文件数据
    JDBC连接MySQL
    HttpClient入门
    5款主流NoSQL数据库全方位横评
  • 原文地址:https://www.cnblogs.com/hai233/p/5977314.html
Copyright © 2011-2022 走看看