BOM 对象
BOM 简介
BOM（browser Object Model）即浏览器对象模型BOM 由一系列对象组成，是访问、控制、修改浏览器的属性的方法BOM 没有统一的标准（每种客户端都可以自定标准）。BOM 的顶层是 window 对象
window 对象
window 对象表示浏览器中打开的窗口。
使用 window 对象中的属性和方法，可以省略对象名，直接写方法名和对象名
属性：
location ：当前 URL 的信息history ：客户访问过的 URL 的信息screen ：客户端的屏幕信息navigator ：浏览器基本信息document ：文档对象 函数： 弹框 // 提示框（显示带有一段消息和一个确认按钮的警告框）
alert(提示信息);
// 确认框（显示带有一段消息以及确认按钮和取消按钮的对话框）。点击确定，返回true；点击取消，返回false
confirm(提示信息);
// 输入框（显示可提示用户输入的对话框）。点击确定，返回输入的内容；点击取消，返回null
prompt(提示信息);
浏览器窗口 // 打开一个新的浏览器窗口或查找一个已命名的窗口
open(网址)
// 关闭浏览器窗口
close()
定时器 // 执行一次的定时器
setTimeout(函数, 毫秒值);
// 反复执行的定时器
setInterval(函数, 毫秒值);
// 参数：
// 函数：定义一个有名函数，传递函数名字，或者使用匿名函数
// 毫秒值：设置定时器的时间，在指定的时间结束之后，会执行传递的函数
// 返回值：返回的是定时器的 id 值，可以用于取消定时器使用
// 取消执行一次的定时器
clearTimeout(定时器的id值);
// 取消反复执行的定时器
clearInterval(定时器的id值);
示例： var timeId = setTimeout(function () {
alert("c4爆炸了!");
}, 5000);
//alert(timeId); // 2
function butOnclick() {
// 取消执行一次的定时器
cl
}
location 对象
Location 对象包含有关当前 URL（浏览器的地址）的信息。
属性:
href ：获取当前浏览器的url地址 href = “新的url地址” ： 跳转页面，相当于在浏览器地址栏中输入了地址，并且敲击回车（打开页面） hostname ：主机名
port ：端口名host ：主机名+端口名 方法：
reload() ：重新加载当前文档。 刷新页面
web 存储
HTML5 为 JS 增加了两个可以存储数据的对象
localStorage ：本地存储，永久存储数据，作用域：所有页面永久访问sessionStorage ：会话存储，临时存储数据，作用域：一次会话（连续跳转的几个页面） 不管是 localStorage，还是 sessionStorage，可使用的 API 都相同 常用函数（以 localStorage 为例）：
setItem(key, value) ：存储一个数据getItem(key) ：获取一个数据removeItem(key) ：删除一个数据clear() ：清除所有数据
history 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
函数：
back() ：后退到前一个页面（加载 history 列表中的前一个 URL）forward() ：前进到后一个页面（加载 history 列表中的下一个 URL）go(n) ：直接前进到第 n 个页面
go(-n) ：直接后退到第 n 个页面
screen 对象
Screen 对象包含有关客户端显示屏幕的信息。
screen 对象中的属性，可以通过 screen.属性名 直接使用
属性：
height ：返回显示屏幕的高度（像素）width ：返回显示器屏幕的宽度（像素）
navigator 对象
navigator 对象包含有关浏览器的信息。
navigator 对象中的属性，可以通过 navigator.属性名 直接使用
属性：
appName ：返回浏览器的名称appVersion ：返回浏览器的平台和版本信息userAgent ：浏览器类型
超链接与表单的跳转控制
超链接和表单都可以进行跳转。跳转属于它们的默认功能。 一般在它们触发的一个事件中，可以通过返回 false，来阻止他们的跳转！
function fun5(){
alert('超链接被点击了！');
return false;
}
function f() {
alert("阻止表单提交");
return false;
}
//阻止提交
DOM 对象
DOM 是 document object model，也就是文档对象模型。
可以将 HTML 页面看做一个文档，在 js 眼中就是一个 document 对象。
这个 document 对象中就包含了页面中的所有元素。
DOM 中的节点分类：
元素节点（element node）属性节点（attribute node）文本节点（text node）
dom 获取元素
方式1：es6 提供了强大的根据 CSS 选择器获取元素的接口（推荐） // 根据css选择器获取一个元素
document.querySelector(CSS选择器)
// 根据css选择器获取元素对象数组集合
document.querySelectorAll(CSS选择器)
方式2：es5 提供的获取元素的接口 // 根据 id 获取一个元素：
document.getElementById(ID) // 等价于es6的 querySelector(#ID)
// 根据 class 获取多个元素：
document.getElementsByClassName(class) // 等价于es6的 querySelectorAll(.class)
// 根据标签名称获取多个元素：
document.getElementsByTagName(标签名称) // 等价于es6的 querySelectorAll(标签)
// 根据 name 属性获取多个元素：
document.getElementsByName('name值') // 等价于es6的 querySelectorAll(元素名称[name=name值])
小总结：
es6 接口获取元素功能非常强大，而且接口非常易用es5 接口功能非常局限，而且接口使用复杂
间接根据层次关系获取节点：
父节点：parentNode：表示该元素的父节点孩子节点：
childNodes：表示该元素的所有子节点的集合，数组对象firstElementChild：第一个儿子节点lastElementChild：最后一个儿子节点 兄弟节点：
nextElementSibling：该元素后一个兄弟元素节点previousElementSibling：该元素前一个兄弟元素节点
dom 操作内容
常用函数 // 向body中追加html内容
document.write(html内容)
// 获取或者修改元素的纯文本内容（从元素内部起始位置到终止位置的文本内容, 不包含内部的Html标签）
element对象.innerText;
// 获取或者修改元素的html内容（从元素内部的起始位置到终止位置的全部内容, 包括其内部的Html标签）
element对象.innerHTML;
// 获取或者修改包含自身的html内容
element对象.outerHTML;
示例
dom 操作属性
方法1： // 获取元素的一个属性的值。注意：只能获取标签上属性的值，获取不用用户输入的内容
element对象.getAttribute(属性名)
// 给元素设置一个属性，可以设置原生和自定义
element对象.setAttribute(属性名, 属性值)
// 移除元素的一个属性
element对象.removeAttribute(属性名)
方法2： // 获取或修改一个属性的值
element对象.属性名
注：
方法1 可以对自定义属性进行操作；但是 方法2 只能对标准属性进行操作。文本输入框标签：通过对象名.value 属性，可以获取到页面中用户输入的内容。复选框|单选框标签：
通过 对象名.checked 属性可以获取到选中状态。选中：true；未选中：false通过 对象名.getAttribute() 函数获取属性值：有 checked 属性，值就是 checked；没有 checked 属性，值就是 null
dom 操作元素
常用方法 // 获取或者设置标签的html内容
element对象.innerHTML
// 移除元素
element对象.outerHTML=""
// 创造一个节点，返回一个element对象
document.createElement("标签名称)
// 给父标签添加一个子标签
parentElement对象.appendChild(newNode)
// 在指定节点前插入新节点
parentElement对象.insertBefore(newNode,beforeNode)
// 替换节点的方法
parentElement对象.replaceChild(newNode, oldNode)
// 删除节点的方法
parentElement对象.removeChild(childNode)
示例：
dom 操作样式
通过 style 对象 // 获取或者修改一个样式
element对象.style.css样式
// 设置多个css样式
element对象.style.cssText = "样式键值对;样式键值对..."
注意：
style 对象，只能获取行内样式（写在一行中），不能获取内嵌的样式（写在 head 的 style 中）和外链的样式（写在css文件中） style 是对象。typeof 的结果是 Object 值是字符串，没有设置值是空字符串"" 命名规则：驼峰命名 DOM 中的 style 对象并不等同 html 标签中 style 属性，在 JS 中，横杠 - 是不能作为标识符的 比如：背景色样式在 DOM 中是 backgroundColor，而在 CSS 中是 background-color style 对象的常用属性：backgroundColor（背景色）、backgroundImage（背景图片）、color（颜色）、width（宽像素）、height（高像素）、border（边框）、opacity（设置透明度，IE8 以前是 filter: alpha(opacity=xx)） 通过 className 属性 节点的 className 属性对应于 css 中的类选择器 // 获取或者修改class属性值（样式）
element对象.className
// 获取class属性值集合，返回一个classList对象（es6特别提供的操作元素class的接口）
element对象.classList
element.classList 的常用方法： add("class样式名称") // 添加一个class样式
remove("class样式名称") // 移除一个class样式
contains("class样式名称") // 判断是否包含某一个样式,包含返回true，不包含返回false
toggle("class样式名称") // 切换一个class样式。有则删除，无则添加
添加事件：通过对象名.事件属性名 给元素添加事件 示例：
1. 设置一个css样式
2. 批量设置css样式
3. 通过class设置样式
4. 切换class样式
文章来源
发表评论