BOM和DOM操作
BOM
BOM介绍
BOM：Browser Object Model，即浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
Windows对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。
常用操作
window.open()
Window.opend的作用是打开一个新的窗口。
window.open("https://www.baidu.com")
//在一个新的窗口打开百度
window.close()
Window.close的作用是关闭当前窗口。
window.close() //关闭当前窗口
history.forward()
history.forward的作用是加载历史列表中的下一个 URL（如果存在）。
window.history.forward() //前进一个页面
history.back()
history.back的作用是加载历史列表中的前一个 URL（如果存在）。
window.history.back() //返回上一页
location.href
location.href的作用是获取当前页面的URL。
console.log(location.href) //结果 https://www.baidu.com/s?ie=UTF-8&wd=%E7%99%BE%E5%BA%A6
location.href="URL"
location.href="URL"的作用是跳转到指定的页面
location.href="https://www.baidu.com" //跳转到百度
location.reload()
location.reload()的作用是重新加载当前页面
location.reload() //重新加载当前页面
setTimeout()
setTimeout()的作用是设置一个定时任务。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
var myVar; function myFunction() { myVar = setTimeout(alertFunc, 3000); } function alertFunc() { alert("Hello!"); } //三秒后弹出"Hello!"
clearTimeout()
clearTimeout()的作用是清除定时任务。
clearInterval() 方法的参数必须是由 setTimeout()返回的 ID 值。
var myVar; function myFunction() { myVar = setTimeout(function(){ alert("Hello"); }, 3000); } function myStopFunction() { clearTimeout(myVar); } //组织定时任务生效
setInterval()
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
// 每隔一段时间就执行一次相应函数 var timer = setInterval(function(){console.log(123);}, 3000)
clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
// 每隔一段时间就执行一次相应函数 var timer = setInterval(function(){console.log(123);}, 3000) // 取消setInterval设置 clearInterval(timer);
DOM
DOM介绍
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 树
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
-
-
- 文档节点(document对象)：代表整个文档
- 元素节点(element 对象)：代表一个元素（标签）
- 文本节点(text对象)：代表元素（标签）中的文本
- 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
- 注释是注释节点(comment对象)
-
JavaScript 可以通过DOM创建动态的 HTML：
-
-
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
-
查找标签
直接查找
document.getElementById //根据ID获取一个标签 document.getElementsByClassName //根据class属性获取 document.getElementsByTagName //根据标签名获取标签合集
注：如果我们的js代码需要页面上某个标签加载完毕，那么该js代码应该写在body内部最下方或者引入外部js文件。
间接查找
//全部以document为前缀关键字
parentElement //父节点标签元素 children //所有子标签 firstElementChild // 第一个子标签元素 lastElementChild //最后一个子标签元素 nextElementSibling //下一个兄弟标签元素 previousElementSibling //上一个兄弟标签元素
节点操作
创造节点
语法：
createElement(标签名)
var dEle = document.createElement("div") //添加一个新的元素
添加节点
语法：
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
var dEle = document.getElementById("d1") var imgEle = document.createElement("img") immgEle.setAttribute("src","图片地址") dEle.appendChild(imgEle)
删除节点
语法：
获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
修改节点属性
修改节点文本内容
获取节点文本内容的方式有两种：
1.innerText
不加赋值符号是获取内部文本
加了赋值符号是设置内置文本
不可以识别HTML标签
var pEle = document.getElementById("p1") pEle.innerText //不加赋值符，结果为'123' pEle.innerText="123
" //加了赋值符，不识别HTML标签，结果为'123
'
2.innerHTML
不加赋值符号是获取内部文本
加了赋值符号是设置内置文本
可以识别HTML标签
var pEle = document.getElementById("p1") pEle.innerHTML //不加赋值符，结果为123 pEle.innerHTML="123
" //加了赋值符，可识别HTML标签，结果为h1级别的'123'
修改节点属性
var sEle = document.getElementById('s1') sEle.setAttribute("style","color:blue") // 标签的自带属性可以通过.的方式直接获取和修改 sEle.style.color //获取 sEle.style.color='red' //修改
var input_username = document.getElementById("username"); console.log(input_username.value);
特殊的文本数据如type = file的input标签
标签对象.value '''仅仅获取一个文件地址而已'''
标签对象.files[0] '''获取单个文件数据'''
标签对象.files '''获取所有文件数据'
var input_upload = document.getElementById("upload"); console.log(input_upload.file, input_upload.value
class操作
elementNode.classList.remove(cls) // 删除指定类 elementNode.classList.add(cls) // 添加类 elementNode.classList.contains(cls) // 存在返回true，否则返回false elementNode.classList.toggle(cls) // 存在就删除，否则添加
指定CSS操作
修改方式：
标签对象.style.属性名 = 属性值
对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
elementNode.style.margin;
elementNode.style.width = '100px';
对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
elementNode.style.marginTop;
elementNode.style.backgroundColor = 'red';
事件
在 Web 中, 事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分 — 可能是一个元素、一系列元素、被加载到这个窗口的 HTML 代码或者是整个浏览器窗口。举几个可能发生的不同事件：
-
-
- 用户在某个元素上点击鼠标或悬停光标。
- 用户在键盘中按下某个按键。
- 用户调整浏览器的大小或者关闭浏览器窗口。
- 一个网页停止加载。
- 提交表单。
- 播放、暂停、关闭视频。
- 发生错误。
-
每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。
常用事件：
onclick // 当用户点击某个对象时调用的事件句柄。 ondblclick // 当用户双击某个对象时调用的事件句柄。 onfocus // 元素获得焦点。 onblur // 元素失去焦点。 一般用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange // 域的内容被改变。 通常用于表单元素,当元素内容被改变时触发.（select联动） onkeydown // 某个键盘按键被按下。 当用户在最后一个输入框按下回车按键时,表单提交。 onkeypress // 某个键盘按键被按下并松开。 onkeyup // 某个键盘按键被松开。 onload // 一张页面或一幅图像完成加载。 onmousedown // 鼠标按钮被按下。 onmousemove // 鼠标被移动。 onmouseout // 鼠标从某元素移开。 onmouseover // 鼠标移到某元素之上。 onselect // 在文本框中的文本被选中时发生。 onsubmit // 确认按钮被点击，使用的对象是form。
绑定方式
方式1：
方式2：
// 在事件的函数体代码内部使用 btnEle.onclick = function () { alert(456) console.log(this) }