BOM知识点概览
BOM是什么？
Browser Object Model (BOM) 浏览器对象模型。
浏览器对象模型BOM
1.window对象
window 它表示浏览器窗口。
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
2.window screen对象
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
console.log("可用宽度:"+window.screen.availWidth);
console.log("可用高度:"+window.screen.availHeight);
console.log("屏幕高度:"+window.screen.height);
console.log("屏幕宽度:"+window.screen.width);
3.window location对象
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web协议（http: 或 https:）
4.window history对象
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
history.go() -参数列表的数值即为前进或者后退的页面个数
function goForward() {
history.go(2);//go() 里面的参数用来限制前进或者后退的页面个数
}
function goBack() {
history.go(-1);//后退一个页面
}
5.navigator对象
用于提供当前浏览器及操作系统等信息，这些信息都放在navigator的各个属性中。常用属性
appCodeName 获取浏览器的内部代码名。
appMinorVersion 获取浏览器的辅版本号，常用于浏览器的补丁货服务包。
appName 获取浏览器的名称。
appVersion 获取浏览器的平台和版本信息。
language 获取当前浏览器的语言，例如，可能的一个结果是“zh-CN”。
cookieEnabled 获取浏览器中是否启用 cookie 的布尔值。
cpuClass 获取计算机系统的 CPU型号，例如，Inter通常得到的结果是x86。
onLine 获取浏览器是否处于在线模式，结果是布尔值。
platform 获取运行浏览器的操作系统平台。 systemLanguage 获取 OS 使用的默认语言。
userAgent 获取由客户机发送服务器的 user-agent 头部的值。
userLanguage 获取 OS的自然语言设置。
mimeTypes 获取浏览器支持的所有的MIME类型的数组。
plugins 获取安装在浏览器上的所有插件的数组。
product 获取浏览器的产品名，例如，可能的结果是Gecko。
productSub 获取浏览器产品的更多信息，例如，可能的结果是20030107。
vendor 获取浏览器的厂商名称，例如，可能的结果是Google Inc.。
vendorSub 获取浏览器的厂商更多信息。
6.消息框 alert,prompt,confirm
function alertTest() {
window.alert("xxxx");
}
function promptTest() {
window.prompt("请输入一段数字","例如：1234");
}
function confirmTest() {
window.confirm("请确认是否提交","确认");
}
alertTest();// 此时页面出现警告框
promptTest();// 提示框
confirmTest();//确认框
7.计时
计时事件：JavaScript 在设定的时间间隔之后来执行代码。
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
setTimeout() - 在指定的毫秒数后执行指定代码。
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
8.cookie
cookie,储存在用户本地终端上的数据.JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;（键值对以分号分隔）。来自菜鸟教程的一个cookie实例链接: https://www.runoob.com/try/try.php?filename=tryjs_cookie_username代码如下
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;//创建cookie并且设置了cookie名称和过期时间
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i var c = ca[i].trim(); if (c.indexOf(name)==0) { return c.substring(name.length,c.length); } } return ""; } function checkCookie(){ var user=getCookie("username"); if (user!=""){ alert("欢迎 " + user + " 再次访问"); } else { user = prompt("请输入你的名字:",""); if (user!="" && user!=null){ setCookie("username",user,30); } } } checkCookie(); DOM知识点概览 DOM是什么？ DOM 是 W3C（万维网联盟）的标准。W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 什么是 HTML DOM？ HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM树（节点树） HTML 文档中的所有内容都是节点： 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点
My header
这段代码对应下面的dom树节点树中是层级关系：
在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点
HTML DOM方法
HTML DOM方法是可以在节点（HTML 元素）上执行的动作.在DOM树中所有的html元素都被看做是一个对象，而DOM方法就是用来获取这些对象的值和属性，并且可以进行修改和添加删除。
获取节点元素的方法
根据 ID 获取
使用 getElementById() 方法可以获取带有 ID 的元素对象。document.getElementById('id');
My header
你好世界！
根据标签名获取
1.使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName('标签名');
//还是用上面的html页面
var h1 = document.getElementsByTagName("h1");
console.log(h1);//打印一个集合
注意：
因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的。
如果获取不到元素,则返回为空的伪数组(因为获取不到对象)。
2.还可以获取某个元素(父元素)内部所有指定标签名的子元素.
element.getElementsByTagName('标签名');
My header
你好世界！
我是行内元素
注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。
通过 HTML5 新增的方法获取
1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2. document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll(‘选择器’); // 根据指定选择器返回
注意：querySelector 和 querySelectorAll里面的选择器需要加符号（类选择器 . 和 id选择器 # ）,比如:document.querySelector(‘#nav’); document.querySelector(‘.bd’);
My header
你好世界！
我是行内元素
hello
hi
特殊元素获取
1.获取body元素
doucumnet.body // 返回body元素对象
2.获取html元素
document.documentElement // 返回html元素对象
My header
你好世界！
我是行内元素
hello
hi
修改操作节点元素
修改 HTML DOM 包含：
改变 HTML内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）
1.改变html内容
改变元素内容，最简单的方法是使用 innerHTML 属性或者innerText来修改文本元素内容。element.innerHTML = "值"这里的值可以是一个标签
111
element.innerText = "值"例如：给id属性值为div1的元素添加一段文本内容
My header
你好世界！
2.给html修改样式
element.style.属性='值'例如：将h1标题添加一个背景色，并且将文字颜色改成蓝色。
My header
你好世界！
3.创建新的 HTML 元素 (新增子元素)
element.appendChild
My header
你好世界！
4.删除已有的 HTML 元素
element.remove()
My header
你好世界！
小结：1.一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）2.一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点3.DOM对象方法
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
还是多多练习，熟练自然掌握不需要刻意记忆，需要用到时查阅即可！
5.使用事件
当 HTML 元素"有事情发生"时，浏览器就会生成事件：
在元素上点击
加载页面
改变输入字段
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时
onclick 事件
鼠标被点击完成后就会触发onclick事件。例如，给一个按钮添加点击事件用来切换整个页面的背景色，实现夜间模式切换，哈哈哈哈！
My header
你好世界！
初始页面效果点击按钮后心血来潮，再来一个升级版，模式互相切换！
My header
你好世界！
onload和onunload事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。例如，cookie的检验。
onchange 事件
onchange事件一般用于表单检验（输入字段的验证）。比如通过onchange事件将输入的字符转换为大写。
通过onchange事件，将输入框中的数据转换为大写字母
onmouseover 和 onmouseout 事件
当鼠标移入会触发 onmouseover 事件，鼠标移出时会触发onmouseout事件。
onmousedown、onmouseup 事件
当鼠标被按下时触发onmousedown事件，鼠标松开时触发onmouseup事件。
以上就是基础的dom操作了，暂时完结。