一、BOM

  (一)概念:是 Browser object model 的缩写,简称浏览器对象模型。

    BOM 提供了独立于内容而与浏览器窗口进行交互的对象

    由于 BOM 主要用于管理窗口与窗口之间的通讯,因此其核心对象是 window

  (二)Window窗口对象

  

    1.Window 对象是 BOM 的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为 window 的子对象,由于window 是顶层对象,因此调用它的子对象时可以不显示的指明 window 对象。

  (三)Window 内置对象(location/history/navigator)及方法

    1. Location 对象

      1)Location 对象包含有关当前 URL (统一资源定位器)的信息,是 window 对象的一个部分,可通过 window.location 属性来访问

      2)href 属性:是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL,因此,我们可以通过为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容

      语法:location.href = URL;

         Demo:location.href = http://www.baidu.com;

      3)Reload()用于重新加载当前文档(刷新)

      语法:location.reload();

         Location.reload(true):刷新页面,不使用缓存

    2.History 对象

      1)History.back():载入历史列表中前一个网址,相当于按下“后退”按钮

      2)History.forward():载入历史列表中后一个网址(如果有的话),相当于按下“前进”按钮

      3)History.go():打开历史列表中一个网址

        注:要使用这个方法,必须在括号内指定一个正数或负数

    3.Navigator 对象

      1)appName:浏览器名称

      2)appVersion:浏览器版本

      3)platform:操作系统注:最新的浏览器已经全面放弃以上这些属性

      4)userAgent:用户代理信息,通过该属性可以获取浏览器及操作系统信息

    4.Window下的方法

      1)alert();警告框

      2)confirm();选择框

      3)prompt();提示输入框

      4)open();打开新窗口

      5)close();关闭当前窗口

二、onload 事件

三、定时器

  (一) SetInterval():(间歇式)计时器:按照指定的周期(以毫秒计)来调用函数或计算表达式

  (二) clearInterval():可取消由 setInterval()设置计时

  (三) setTimeout()(超时)定时器:用于在指定的毫秒数后调用函数或计算表达式

  (四) clearTimeout():可取消由 setTimeout()方法设置的定时

  (五) demo:1. 页面换背景

四、Window.onscroll 事件

  (一) Document.documentElement.scrollTop 代表垂直的滚动条,向下滚动的距离

  (二) Document.body.scrollTop//chrome 代表垂直的滚动条,向下滚动的距离

  (三) Document.documentElement.scrollLeft

  (四) Document.body.scrollLeft

  (五) 兼容写法:

    1. document.documentElement.scrollTop || document.body.scrollTop

    2. document.documentElement.scrollLeft || document.body.scrollLeft

四、DOM

  (一) 概念:DOM 即(Document Object Model)文档对象模型

  (二) 作用:通过 JavaScript 操作 DOM,可以重构整个 HTML 文档、添加、移除、改变或重排页面上的项目

  (三)DOM 的基本操作(查询、修改、创建、删除)

    查询

    1. getElementById():获取特定 ID 元素的节点。如果找到相应的元素则返回该元素的节点对象,如果不存在,则返回 null

    2. getElementsByTagName():获取相同元素的节点列表(对象伪数组)

    3. getElementsByName():获取相同名称的节点列表

    4. getElementsByClassName():获取相同 class 属性的节点列表(IE9 以下不兼容)

      function byClassName(obj,className){

        if(obj.getElementsByClassName){

          return obj.getElementsByClassName(className);

        }else{

          var arr = [];

          var eles = obj.getElementsByTagName('*');

          for(var i = 0,len = eles.length;i < len;i ++){

            if(eles[i].className === className){

              arr.push(eles[i]);

            }

          }

          return arr;

        }

      }

    5. document.documentElement:获取 html 的方法

    6. document.body:获取 body 的方法

    7. querySelector : 通过选择器获取一个元素(IE7 及以下不兼容),返回一个对象

    8. querySelectorAll : 通过选择器获取一组元素(IE7 及以下不兼容),返回一个集合

    创建

    1. createElement():创建一个元素节点

    2. createTextNode():创建一个文本节点

    3. 扩展:document.createDocumentFragment()创建文档碎片

    修改

    1. 父节点.replaceChild(newNode, oldNode) 方法用新节点替换某个子节点

     删除

    1. 父节点.removeChild(nodeChild):删除节点

    2.指定的节点.remove(node)

    扩展:追加节点

    1. appendChild():向指定节点的子节点列表末尾追加新的节点

  (四)DOM 元素类型(元素和文本)

    1.node 节点属性

    节点可以分为元素(标签)节点、属性节点和文本节点,而这些节点又有三个非常有用的属性,分别为:nodeName、nodeType 和 nodeValue.

    2.节点类型:元素 1 属性 2 文本 3

               

    扩展:克隆节点

    document.body.appendChild(oDiv.cloneNode(true));

    如果不加参数只克隆 父节点,不克隆子节点;如果加true参数,则克隆整个节点包含子节点

    扩展:获取属性节点

    

JS学习笔记Day9的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  3. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  4. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  5. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  6. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  7. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  8. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  9. 一点感悟:《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

随机推荐

  1. MongoDB副本集功能及节点属性梳理

    副本集的主要功能 副本集是MongoDB高可用的基础,其主要作用 归纳为以下几点: (1)高可用,防止设备(服务器.网络)故障.提供自动FailOver功能. (2)无需配置高可用性虚拟节点:无论是S ...

  2. Linux AIDE(文件完整性检测)

    一.AIDE的概念 AIDE:Advanced Intrusion Detection Environment,是一款入侵检测工具,主要用途是检查文档的完整性.AIDE在本地构造了一个基准的数据库,一 ...

  3. python爬虫【实战篇】模拟登录人人网

    requests 提供了一个叫做session类,来实现客户端和服务端的会话保持 使用方法 1.实例化一个session对象 2.让session发送get或者post请求 session = req ...

  4. Redis内存优化memory-optimization

    https://redis.io/topics/memory-optimization  官方文档 一.特殊编码: 自从Redis 2.2之后,很多数据类型都可以通过特殊编码的方式来进行存储空间的优化 ...

  5. 报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop bei

    项目中遇到父组件传值 activeIndex <Tabs :tabs="tabs" :activeIndex="activeIndex" >< ...

  6. web 本地存储 (localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  7. 正则表达式regex(golang版)

    代码: //File: main.go package main import ( "fmt" "regexp" ) func main() { r := re ...

  8. AI SegNet

    SegNet,是一种基于编码器-解码器架构的深度全卷积神经网络,用于图像语义分割. 参考链接: https://ieeexplore.ieee.org/document/7803544

  9. css实现多行文本溢出显示省略号(…)

    WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit- ...

  10. 13点值得我们注意的谷歌的JavaScript编写风格

    对于编写有效的JavaScript来说,这些并不是硬性的.快速的规则,而只是在源文件中维护一致的.吸引人的样式选择的规则.这对于JavaScript来说尤其有趣,它是一种灵活且多变的语言,允许多种风格 ...