day09-BOM和DOM

1     BOM(Browser Object Model  浏览器对象模型)

        1、全局变量默认是挂在window下的

                var  a = 123;

                alert(window.a)//123

        2、window下的子对象

       A、location

        window.location.href             当前页面的 URL,可以获取,可以修改(页面跳转)。

        window.location.hostname      web 主机的域名

        window.location.pathname      当前页面的路径和文件名

        window.location.port               web 主机的端口 (80 或 443)

        window.location.protocol         所使用的 web 协议(http:// 或 https://)

        window.location.search           请求参数(?后面的内容)

         window.location.reload();

    刷新页面的方法。一般情况下给reload()传递一个true,让他刷新,并不使用缓存。

    缓存的东西一般为js文件,css文件等。

    用这个方法可以让自己不能动的页面动起来了。刷新当前页面。

          B、window.navigator

           navigator.appName      返回获取当前浏览器的名称。

            navigator.appVersion    返回 获取当前浏览器的版本号。

            navigator.platform        返回 当前计算机的操作系统。

            以上属性已经在逐渐被抛弃了。

            一个新的属性将替代这些属性。

            navigator.userAgent   返回浏览器信息(可用此属性判断当前浏览器)

    C、history

        history.go(1)    参数可写任意整数,正数前进,负数后退

        history.back()   后退

        history.forward() 前进

    D、screen: 屏幕

        window.screen.width 返回当前屏幕宽度(分辨率值)

        window.screen.height 返回当前屏幕高度(分辨率值)

3、window下的弹框方法

        alert()   prompt()  confirm()

4、定时器

    超时定时器        间隔定时器

    setTimeout       setInterval

    clearTimeout    clearInterval

5、window.onload

6、window.onscroll

    var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; //兼容

7、window.onresize 屏幕分辨率

2     DOM(Document Object Model 文档对象模型)

        DOM操作

获取DOM节点

   1、 document.getElementById(id名)

    2、getElementsByTagName(标签名)

        得到的是一个集合(不止一个,是一堆)

    3、getElementsByName( ) 通过Name值获取元素,返回值是集合,通常用来获取有name的input的值;

        注:1*不是所有的标签都有name值;

               2*低版本的浏览器会有兼容问题;

   4、 children属性,获得DOM元素的所有子元素;返回值是集合

   5、parentNode属性,获得DOM元素的父级元素

   6、getElementsByClassName(class名称)

        但是:IE8以下不能用

    7、ES5选择器:

     document.querySelector ()  >  一旦匹配成功一个元素,就不往后匹配了

      document.querySelectorAll ()  >>>> 强大到超乎想象;匹配到所有满足的元素, 支持IE8+

属性获取和操作

1、getAttribute( )获取元素的属性值,他是节点的方法!所以前缀必须是节点!

     document.getElementById( ID值 ).getAttribute( )

     什么是元素属性呢? class就是元素属性,写在标签内的所有东西都是标签属性, 比如link的href比如img的src....都是元素属性。

    元素自带的属性可以直接用 . 语法获取,但是自定义属性需要 getAttribute() 和setAttribute( ) 方法

2、setAttribute( )设置元素的属性。同上;

     有些小小的兼容性问题,低版本IE不兼容;

     设置的属性永远都是字符串类型

3、removeAttribute( )删除属性;同上;

     兼容性问题同上;

操作DOM    增、删、克隆节点

创建节点

var oDiv = document.createElement("div");

克隆节点

clonedNode = Node.cloneNode(boolean) // 只有一个参数,传入一个布尔值,true表示深客隆,复制该节点下的所有子节点;false表示浅克隆,只复制该节点

插入节点

parentNode.appendChild(childNode);  // 将新节点追加到子节点列表的末尾

parentNode.insertBefore(newNode, targetNode);  //将newNode插入targetNode之前

替换节点

parentNode.replaceChild(newNode, targetNode);    //使用newNode替换targetNode

移除节点

parentNode.removeChild(childNode);  // 移除目标节点

node.parentNode.removeChild(node);    //在不清楚父节点的情况下使用

childNode.remove()  //IE不支持

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • BOM概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 ...
    azure_1122阅读 285评论 0 0
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,755评论 0 8
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,252评论 0 5
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,106评论 0 21
  • 一、window 对象Window 对象是一个顶层对象,而不是另一个对象的属性,即浏览器的窗口;Window 对象...
    puxiaotaoc阅读 355评论 0 0