BOM

Browser Object Model 浏览器对象模型, 提供与浏览器窗口进行交互的方法

它使 JavaScript 有能力与浏览器进行“对话”。　BOM 最主要的对象就是 window 对象

全局变量和全局方法都是 window 的属性和方法, 实际使用的时候书写可以忽略 " window. "

var a = 100;

console.log(a,window.a)



function foo(){

    console.log(a)

}

foo()

window.foo()

window 对象

核心的窗口对象, 随着网页打开自动创建

常用的方法

window.innerHeight　　　  //浏览器窗口的内部高度

window.innerWidth　　    // 浏览器窗口的内部宽度

window.open()　　　　　　 // 打开新窗口 详情见下面

window.close() 　　      // 关闭当前窗口 无参数

window.opener　　　　　　 // 返回对创建该窗口的 Window 对象的引用 （可读可写）

window.alter()　　　　 // 警告框, 无返回值 只用于提示信息 只有确认按钮

window.prompt()　　　　// 输入框, 带返回值的弹窗, 可输入, 提供两个按钮 确认取消
window.confirm() 　　　// 确认框, 返回布尔值, 提供两个按钮 确认取消

open 详解

window.open(URL,name,features,replace)

参数

URL: 可选，新开页面的 URL 　　
name: 可选，声明窗口名称　　
features: 可选，制定窗口特性

常用 replac 参数

height=100 窗口高度；　　　　　　　　　　　　
width=400 窗口宽度；　　　　　　　　　　　　
top=0 窗口距离屏幕上方的象素值；　　　　　　　　　　　　
left=0 窗口距离屏幕左侧的象素值；　　
replace 　可选，布尔值，规定浏览历史搜否替换覆盖 window.opener

对一个通过 window.open 打开的窗口，通过 window.opener 调用父窗口的方法.

可直接通过 window.opener.foo({{ yangtuo }} 在子页面通过参数的将数据传递给父页面调用父页面的参数　　.

从而可以实现子页面和父页面之间的数据传递.

常用属性

history

功能　　保存当前窗口访问过的 URL .

属性

　　length　　当前窗口访问过的数量 ( 只要 URL 不同都会被记录不是访问次数, 要注意区分 ).

方法

　　back()　　返回前一个 URL ( 后退按钮 ).

　　forward()　　前进到下一个 URL ( 前进按钮 ).

　　go(n)　　参数可取正负值, 值代表几个 URL , 正 - 前进, 负 - 后退 .

location

功能　　保存或操作地址栏的URL

方法　　

　　reload( false / true )　　重载页面, 设置为 false 从缓存中加载页面, 为 true 表示强制从服务器重载

定时器方法

间隔调用 ( 周期性定时器 )

每隔一段时间就执行一次代码

var timeID = setInterval(function,interval)

参数　　

　　function　　需要执行的操作

　　interval 　　指定时间间隔 单位 ms

返回值　　返回定时器 ID 彼此区分

关闭间歇调用定时器

clearInterval(timeID)

超时调用 ( 一次性定时器 )

等待一段时间后执行一次代码

var timeID = setTimeout(function,timeout)

用法参数返回值同上

关闭超时调用计时器

clearTimeout(timeID)

定时器关闭处理

超时调用的内存占用较少.这里的关闭方法只是提供了一个关闭途径

但是间歇调用的不间断调用是会对内存造成影响因此需要考虑何时关闭

定时器实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function start() {

            // 开启定时器

            timer = setInterval(function () {

                var date = new Date();

                console.log(date);

            }, 1000);

            return timer

        }

        function stop() {

            clearInterval(timer)

        }

    </script>

</head>

<body>

<button onclick="start()">开始</button>

<button onclick="stop()">关闭</button>

</body>

</html>

每隔一秒打印当前时间

        var i = 5;

        var timerID = setInterval(function () {

            if (i == 1) {

                clearInterval(timerID)

            }

            console.log(i);

            i--

        },1000)

倒计时5s

var res = confirm("是否关闭当前窗口");

if (res) {

    setTimeout(function () {

        window.close()

    }, 3000);

}

超时调用, 延时3s关闭窗口

DOM 对象

Document Object Model,提供操作文档（html元素）的方法，核心为document对象

节点概念

将文档中所有的内容（标签，文本，标签属性，注释）封装成节点对象

节点查找

查找到多个节点的时候会以列表的形式返回

可以用索引的方式取出内部元素, 当然也可以切片

直接查找

document.getElementById("") 　　　　　　　 　  // 根据ID获取一个标签

document.getElementsByClassName("") 　　　  // 根据class属性获取

document.getElementsByTagName("")　　　　  // 根据标签名获取标签合集
document.getElementsByName("") 　　　　　 // 根据 表单控件的 name 属性值获取

间接查找(无括号)

通过一个已知节点, 基于位置或者亲属关系来间接查找

A.parentElement 　　　　　　　　　     //找父节点标签元素

A.children　　　　 　　　　　　　　    // 找所有子标签

A.firstElementChild 　　　　　　    // 第一个子标签元素

A.lastElementChild 　　　　　　    // 最后一个子标签元素

A.nextElementSibling 　　　　    // 下一个兄弟标签元素

A.previousElementSibling 　　  // 上一个兄弟标签元素

节点创建 / 删除 / 替换

创建节点

创建后是不存在的, 必须要找位置安置

document.createElement("B"); 　　// 创建一个 B 标签

添加节点

添加节点必须基于父节点来操作

A.appendChild(B)    　　    // 在 A 的里面作为 A 的最后一个子节点添加 B

A.insertBefore(B,C)    　　// 在 A 里面的 子标签C 前面添加 B

删除节点

节点的删除只能有父节点来操作

A.document.removeChild(B)	// 从 A 标签里面移除 B 标签

替换节点

节点的替换同样只能由父节点来操作

A.replaceChild(B, C)　　　　　　 // 从 A 标签中将 C 标签替换成 B 标签

节点属性创建 / 删除

创建属性

自带的属性可以直接设置和取值

A.B = "C"	   　　　　　　  // 为 A 创建 B 属性,值为 C

自定义属性

A.setAttribute("B", "C");      // A 节点添加 B 属性, B 属性值为 C

A.getAttribute("B");           // 获取 A 标签的 B 属性值

删除属性

自定义,默认都可

A.removeAttribute("B")    　　　 // 移除 A 节点的 B 属性

节点内容

innerText

A.innerText = "B"    // 给 A 节点设置显示内容为 B

ps:

如果 A 有子标签.设置 A 内容后.会清除子标签只剩下一个文本 B

取值的时候只能取到子标签的内容

innerHtml

A.innerHtml = "<p>p</p>"    // 给 A 节点设置显示内容为 B

ps:

主要用于快速添加简单的标签

取值的时候可以取到子标签本身不仅仅是内容

value

只适用于 input, select, textarea

A.value	　　　　　　　　　　　　// 获取A的值

节点样式操作

A.className 　　　　　　　　　　　　  // 获取所有样式类名(字符串)

A.classList.remove("c1") 　　　　 // 删除指定类

A.classList.add("c1")　　　　 　　// 添加类

A.classList.contains("c1")     // 存在返回true，否则返回false

A.classList.toggle("c1") 　  　// 存在就删除，否则添加

A.style.backgroundColor="red"	// 将 A 的背景颜色设置成红色

JS操作CSS属性的规律

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

　　obj.style.margin
　　obj.style.width
　　obj.style.left
　　obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可(小驼峰)。如：

　　obj.style.marginTop
　　obj.style.borderLeftWidth
　　obj.style.zIndex
　　obj.style.fontFamily

3. 属性值中的单位不可省略. 比如 px

节点空间关系

parentsNode

获取父节点, 父元素

childNodes

获取子节点, 包含文本节点和元素节点

children

获取子节点数组, 只包含元素节点, 不包含文本节点

nextSibling

获取下一个兄弟节点

previousSibling

获取上一个兄弟节点

事件

事件类型

鼠标事件

onclick 　　　　　 //　单击

ondblclick 　　  　// 　双击

onmousemove 　   //　鼠标移动

onmouseout 　　 //  鼠标移出

onmouseover 　　// 鼠标移入

键盘事件

onkeydown 　　     //  某个键盘按键被按下 ( 只要是按键都触发 )

onkeypress 　　    // 某个键盘按键被按下 ( 今举行字符按键 )

onkeyup 　　　　  // 某个键盘按键被松开

元素或者文档加载完毕

onload 　　　　   //  一张页面或一幅图像完成加载。

表单控件的按钮监听

oninput           // 监听输入框的输入状态 ( 实时监听 )

onchange 　　　　  // 监听表单控件的值发生变化

onfocus 　　　　　 // 监听文本框焦点状态

onblur 　　　　　　// 监听文本框失去焦点状态

onsubmit 　　　   //　监听提交状态

onselect 　　　　  //  在文本框中的文本被选中时发生

// onsubmit 事件由form 监听 , 点击提交按钮自动触发,

// 检测表单数据是否可以发生, 允许给出返回值为 布尔值

// true 表示可以提交, false 表示不可发送

form.onsubmit = function () {

    if(uname.value.length == 0) {

        // 阻止提交

        return false;

    } else {

        return true;

    }

}

所有事件的实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="index.js"></script>

    <script>

        window.onload = function () {

            // 鼠标

            // console.log($("h1"));

            // $("h1").ondblclick = function () {

            //     alert("双击")

            // };

            // $("div").onmouseover = function () {

            //     console.log("鼠标移入")

            // };

            // $("div").onmousemove = function () {

            //     console.log("鼠标移动呀动")

            // };

            // $("div").onmouseout = function () {

            //     console.log("鼠标移出")

            // };

            // 键盘

            // onkeydown = function () {

            //     console.log("键盘被按")

            // };

            // onkeypress = function () {

            //     console.log("字符被按")

            // };

            // onkeyup = function () {

            //     console.log("松开了")

            // };

            // 表单

            var form = $("form");

            var uname = $("input");

            var hobby = $("input", 1);

            uname.onfocus = function () {

                console.log("表单的获取焦点")

            };

            uname.onblur = function () {

                // this 表示当前的触发对象

                console.log("获取值: ", this.value)

            };

            uname.oninput = function () {

                console.log("实时监听获取值: ", this.value)

            };

            uname.onchange = function () {

                console.log("前后不一致了: ", this.value)

            };

            hobby.onchange = function () {

                console.log("按钮变了: ", this.checked)

            };

            // onsubmit 事件由form 监听 , 点击提交按钮自动触发,

            // 检测表单数据是否可以发生, 允许给出返回值为 布尔值

            // true 表示可以提交, false 表示不可发送

            form.onsubmit = function () {

                if(uname.value.length == 0) {

                    // 阻止提交

                    return false;

                } else {

                    return true;

                }

            }

        };

    </script>

    <style>

        div {

            width: 200px;

            height: 200px;

            background-color: palegreen;

        }

    </style>

</head>

<body>

<h1>标题</h1>

<div>文本啦文本</div>

<form action="/" method="post" enctype="multipart/form-data">

    用户名: <input type="text" name=""><br>

    兴趣: <input type="checkbox" name="" value="1"><br>

    <input type="submit">

</form>

<script>

    console.log("我看看谁比我快")

</script>

</body>

</html>

整合后的实例

事件绑定方式

内敛方式

<div id="d1" onclick="changeColor(this);">点我</div>

<script>

　　function changeColor(ths) {

　　　　ths.style.backgroundColor="green";

　　}

</script>

注意

this是实参，表示触发事件的当前元素。

函数定义过程中的ths为形参。

外部引入

<div id="d2">点我</div>

<script>

var divEle2 = document.getElementById("d2");

divEle2.onclick=function () {

this.innerText="呵呵";

}

</script>

标准事件监听

btn.addEventListener("click",function(){},false)

参数

　　省略 on 前缀的事件名称

　　事件发生后执行函数

　　设置事件传递机制默认 false

事件传递

　　事件由多个元素同时监听

　　事件发生后的传递顺序

　　默认冒泡传递, 从里向外逐一触发

　　设置为 true 表示捕获, 从外向内触发执行

window.onload

　　绑定事件的时候，要等到文档加载完毕

　　对于不存在的元素无法绑定事件

　　window.onload事件在文件加载过程结束时触发

　　位于DOM中的所有对象都被读取完毕时才会触发

    <script>

        window.onload = function () {

            // 获取元素

            console.log($("h1"));

        };

    </script>

注意

.onload()函数存在覆盖现象

事件对象

事件对象伴随事件触发自动创建，存储所有与当前事件相关的信息。

作为参数自动传入事件处理函数中，只需要接收后进行相关操作

div.onclick = function (evt){

};

JavaScript- BOM, DOM的更多相关文章

JavaScript BOM DOM 对象
title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...
前端 JavaScript BOM & DOM
内容目录: 1. BOM 2. DOM BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM (D ...
JavaScript BOM和DOM
Browser Object Model BOM是所有JavaScript的核心,所有的功能其实都建立在BOM基础之上.各浏览器提供的BOM的功能存在很大差异,BOM在HTML5中已经有很大一部分被放 ...
JavaScript：BOM&DOM
BOM(Browser Object Model): feature: 1.BOM has no relevant standards. 2.The fundamental object of BOM ...
javaScript之DOM,BOM
javaScript之BOM / DOM: BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ...
【转】了解nodejs、javascript间的关系！bom&dom&ecmascript
地址:https://www.cnblogs.com/JetpropelledSnake/p/9450810.html bom&dom:https://www.cnblogs.com/wang ...
Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
BOM DOM
http://www.cnblogs.com/yexiaochai/archive/2013/05/28/3102674.html DOM Document Object Model 文档对象模型一 ...
javascript bom 编程
javascript bom 编程 BOM: 浏览器对象模型 DOM Window :窗口Window Document 属性: status :状态栏 self:自己 ...
前端基础：JavaScript BOM对象
JavaScript BOM对象 JavaScript Window - 浏览器对象模型浏览器对象模型(BOM)使JavaScript有能力与浏览器"对话". 浏览器对象模型(B ...

随机推荐

每秒生成一千万个【可视有序】分布式ID的简单方案
去年做了一个产品,会经常导入导出大量的外部数据,这些数据的ID有的是GUID类型,有的是字符串,也有的是自增.GUID类型没有顺序,结果要排序得借助其它业务字段,整体查询效率比较低:字符串ID本来是用 ...
怎么打开iPhone的开发者模式
1.需要连接Xcode 2.打开一个app就有了
pthread_once()函数详解
转自:pthread_once()函数详解 pthread_once()函数详解在多线程环境中,有些事仅需要执行一次.通常当初始化应用程序时,可以比较容易地将其放在main函数中.但当你写一个库 ...
学习安卓开发[1] - 程序结构、Activity生命周期及页面通信
一.程序结构 Android原生应用采用了MVC的架构设计模式,因此可以将一个Android APP中的对象归为Model.View或Controller中的一种. 具体到某个实际的APP结构中,它一 ...
Android八门神器(一): OkHttp框架源码解析
HTTP是我们交换数据和媒体流的现代应用网络,有效利用HTTP可以使我们节省带宽和更快地加载数据,Square公司开源的OkHttp网络请求是有效率的HTTP客户端.之前的知识面仅限于框架API的调用 ...
win快捷键
******************键盘快捷键大全****************** 一.常见用法: F1 显示当前程序或者windows的帮助内容. F2 当你选中一个文件的话,这意味着“重命名 ...
Lua中string.format占位符的使用
虽然lua中字符串拼接"string.format"相对于".."消耗较大,但有时为了代码的可读性,项目中还是经常用到"string.format&q ...
Docker的使用初探（一）：常用指令说明
目录 Docker的使用初探(一):常用指令说明为什么要用Docker Docker的安装与简单使用国内镜像加速常用指令 Docker的使用初探(一):常用指令说明前几个星期实践的了,再不记录 ...
英语进阶系列-A06-本周总结
本周总结目录Content 英语进阶系列-A01-再别康桥英语进阶系列-A02-英语学习的奥秘英语进阶系列-A03-英语升级练习一英语进阶系列-A04-英语升级练习二英语进阶系列-A05-英 ...
iBATIS 传MAP处理方式（value是list的方式）
1.前提条件参数是map结构的数据 key:String 类型 value:list 集合 2.处理方式遍历集合一般常规的方式使用iterate,这里也不例外了,如下 <iterate op ...

JavaScript- BOM, DOM

BOM