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

随机推荐

java StringBuilder 和 StringBuffer
1, 相对于 String 来说, StringBuilder 和 StringBuffer 均是可变的 2, StringBuilder 线程不安全, StringBuffer 线程安全 3, 运行 ...
Kotlin入门(32)网络接口访问
手机上的资源毕竟有限,为了获取更丰富的信息,就得到辽阔的互联网大海上冲浪.对于App自身,也要经常与服务器交互,以便获取最新的数据显示到界面上.这个客户端与服务端之间的信息交互,基本使用HTTP协议进 ...
南京邮电大学java程序设计作业在线编程第七次作业
王利国的"Java语言程序设计第7次作业(2018)"详细主页我的作业列表作业结果详细总分:100 选择题得分:60 1. 下列叙述中,错误的是( ). A.Java中, ...
win10安装JDK详细教程
电脑进行了重装机器.需要重新安装,在此记录一下. 点击下一步.选择安装路径 . 等待后,选择安装位置. 点击下一步,继续等待. 安装完成. 设置环境变量在桌面右键单击我的电脑→属性→高级系统设置→ ...
linux内核调试技巧之一 dump_stack【转】
在内核中代码调用过程难以跟踪,上下文关系复杂,确实让人头痛调用dump_stack()就会打印当前cpu的堆栈的调用函数了. 如此,一目了然的就能看到当前上下文环境,调用关系了假设: 遇到uvc_ ...
MR单元测试以及DeBug调试
Hadoop的MapReduce程序提交到集群环境中运行,出问题时定位非常麻烦,有时需要一遍遍修改代码和打印日志来排查问题,哪怕是比较小的问题.如果数据量很大的话调试起来就相当耗费时间. 而且,Map ...
Json对象遍历
var json = {"id":"123","name":"tom","sex":"ma ...
Maven构建项目出现No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK? 你应该 ...
css_属性
老师的博客:https://www.cnblogs.com/liwenzhou/p/7999532.htm css的属性整体属性的:作用于全局 width:表示宽 height:表示长 color: ...
HTML---引入css,js | 常用标签示例
一.前端基础包括哪些?如何理解二.css,js引入_及head中其他标签三.特殊符号四.常见的标签 4.1,form表单 4.2,input系列(单选框.复选框.input传文件.重置) 4.3 ...

JavaScript- BOM, DOM

BOM