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 ...

随机推荐

vue 路由的使用
ue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用 ...
【代码笔记】Web-CSS-CSS 链接(link)
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
Java新知识系列八
什么是死锁,死锁的原因和必要条件: []什么是死锁,死锁的原因和必要条件: 死锁:死锁的原因在于进程在等待其它进程占有的某些资源,而自身的资源又被其它进程等待着,造成了死循环. 出现死锁的 ...
js实现横向跑马灯效果
首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...
HALCON学习笔记
2019-2-2: 硬件选型--->镜头光源相机选型第一讲.avi: 高斯公式:1/u+1/v=1/f u:物距 v:像距 f:焦距线放大倍率:像高/物高或者像距/物距镜头需要掌握 ...
REST风格架构
一说到rest 大家都耳熟能详,很多人的第一反应就是其是前后端请求后台的一种通信方式,甚至有些人将REST 和RPC 混为一谈,认为两者都是基于HTTP类似的东西.实际上很少人能叙述REST 所提出的 ...
什么是POE交换机?
POE交换机和普通交换机的区别有: 1.POE交换机不但可以实现普通交换机的数据传输功能还能同时对网络终端进行供电 .普通的交换机主要是交换数据的功能,并没有具备供电的功能. 2.现在的网络高清摄像机 ...
SQLServer之创建嵌套触发器
嵌套触发器创建规则当触发器执行启动其他触发器的操作时,DML 和 DDL 触发器都是嵌套触发器. 这些操作都可以启动其他触发器等. DML 触发器和 DDL 触发器最多可以嵌套 32 层. 可以通过 ...
Angular安装及创建第一个项目
Angular简介 AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJ ...
configparser_配置解析器
configparser:配置解析器 import configparser config = configparser.ConfigParser() #配置文件 config[', 'Compres ...

JavaScript- BOM, DOM

BOM