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         

ps

对一个通过 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

节点查找

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

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

直接查找

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){
};

相关属性

1. 鼠标事件对象

  • offsetX
  • offsetY

2. 键盘事件对象

  • key : 获取按键名称,区分字母的大小写
  • which:获取按键编码。
  • onkeydown事件中,功能按键对应有键盘编码,字符按键一律返回大写字母的ASC码
  • onkeypress事件中,区分大小写字母的ASC码

3. target/srcElement

  事件对象的属性,用来获取事件的触发对象

window.onload = function (){
var div = $("div");
div.onclick = function (event){
//鼠标在元素坐标系中的位置
console.log(event.offsetX,event.offsetY);
//鼠标在页面坐标系中的位置
console.log(event.clientX,event.clientY);
//鼠标在屏幕坐标系中的位置
console.log(event.screenX,event.screenY);
console.log(event.target);
};
onkeydown = function (e){
//console.log(e);
console.log("onkeydown: ",e.key,e.which);
console.log(event.target);
};
onkeypress = function (e){
console.log("onkeypress: ",e.key,e.which);
}
};

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

  1. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  2. 前端 JavaScript BOM & DOM

    内容目录: 1. BOM 2. DOM BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM (D ...

  3. JavaScript BOM和DOM

    Browser Object Model BOM是所有JavaScript的核心,所有的功能其实都建立在BOM基础之上.各浏览器提供的BOM的功能存在很大差异,BOM在HTML5中已经有很大一部分被放 ...

  4. JavaScript:BOM&DOM

    BOM(Browser Object Model): feature: 1.BOM has no relevant standards. 2.The fundamental object of BOM ...

  5. javaScript之DOM,BOM

    javaScript之BOM / DOM: BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ...

  6. 【转】了解nodejs、javascript间的关系!bom&dom&ecmascript

    地址:https://www.cnblogs.com/JetpropelledSnake/p/9450810.html bom&dom:https://www.cnblogs.com/wang ...

  7. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  8. BOM DOM

    http://www.cnblogs.com/yexiaochai/archive/2013/05/28/3102674.html DOM Document Object Model 文档对象模型 一 ...

  9. javascript bom 编程

     javascript bom  编程 BOM: 浏览器对象模型 DOM Window  :窗口Window Document 属性:     status :状态栏     self:自己    ...

  10. 前端基础:JavaScript BOM对象

    JavaScript BOM对象 JavaScript Window - 浏览器对象模型 浏览器对象模型(BOM)使JavaScript有能力与浏览器"对话". 浏览器对象模型(B ...

随机推荐

  1. Android 获取 上下文环境参数 getResources

    1----context.getResources().getConfiguration().orientation;//获取屏幕方向int类型,1:portrait,2:landscape 2--- ...

  2. 对象的使用处理,作用域的和ajax中this的理解

    首先,封装类,理解清楚你需要用的哪几个变量,然后声明,然后在类里封装函数,其中,constructor就是存放初始变量的地方. 这里还是datatable的处理解决, constructor(tabl ...

  3. MongoDB 3.6版本关于bind_ip设置

    2017年下半年新发布的MongoDB 3.6版本在安全性上做了很大提升,主要归结为两点: 1.将将bind_ip 默认值修改为了localhost: 2. 在db.createUser()和 db. ...

  4. AlwaysOn配置时在连接步骤时报错(35250)

    1.错误描述 1XX.XXX.XXX.241(主节点) 1XX.XXX.XXX.242(从节点) 添加节点需要在主节点上执行的,错误代码:35250 报错截图 2.网上相关介绍都是怀疑端口5022的问 ...

  5. linux 按行分割文件

    $ sudo awk 'NR%2==1{close(p".txt");++p}{print > p".txt"}' test.txt $ sudo spl ...

  6. 统计numpy数组中最频繁出现的值

    arr = np.array([[1,2,100,4,5,6],[1,1,100,3,5,5],[2,2,4,4,6,6]]) 方法一: count = np.bincount(arr[:,2]) # ...

  7. 英语口语练习系列-C05-水电

    <登幽州台歌>·陈子昂 陈子昂(公元659-公元700年),唐代文学家,初唐诗文革新人物之一. Num 诗句 1 前不见古人, 2 后不见来者. 3 念天地之悠悠, 4 独怆然而涕下! T ...

  8. ASP.NET基础知识汇总之WebConfig各节点介绍

    web.config虽然一直用,接触最多的也就是节点appSettings和connectionSettings,今天系统的梳理一下,了解一下webconfig各个节点的含义,先简单的浏览一下具体的w ...

  9. 腾讯大数据平台Oceanus: A one-stop platform for real time stream processing powered by Apache Flink

    January 25, 2019Use Cases, Apache Flink The Big Data Team at Tencent     In recent years, the increa ...

  10. SystemTap Beginners Guide

    SystemTap 3.0 SystemTap Beginners Guide Introduction to SystemTap Edition 3.0   Red Hat, Inc. Don Do ...