BOM操作与DOM操作
BOM操作
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
Window 对象表示浏览器中打开的窗口，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.open()可以简写成：open()。
页面操作
| 方法 | 描述 |
|---|---|
| open() | 打开新窗口，可以规定url和新窗口大小等 |
| close() | 关闭窗口 |
| history.forward() | 前进下一页 |
| history.back() | 返回上一页 |
| location.href | 获取页面的url地址 |
| location.reload() | 刷新页面 |
| location.href = url | 跳转到指定url页面 |
弹出框
警告框
alert("警告内容");
确认框
用户点确认返回true，点取消返回false。
confirm("确认内容")
提示框
prompt("提示内容","输入框内容(可不写)")
计时器
js里可以给一些操作进行定时。
function showMsg(){
console.log("时间到了")
}
单次定时
// 赋值给变量以便后续操作
var t = setTimeout(showMsg, 3000) // 3秒钟之后执行一次showMsg
循环定时
// 赋值给变量以便后续操作
var s = setInterval(showMsg,3000) // 每隔3秒执行一次
取消定时
clearTimeout(定时器对象)
clearInterval(定时器对象)
DOM操作
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。
直接查找
通过标签名查找标签
// 查找div标签
document.getElementsByTagName('div') // 数组套标签对象
通过class值查找标签
// 查找class值为c1的
document.getElementsByClassName('c1') // 数组套标签对象
通过id值查找标签
// 查找id值为d1的
document.getElementById('d1') // 因为是id只有一个，只返回一个对象
间接查找
直接查找到的标签还可以通过以下方法间接查找其他标签。
| 方法 | 描述 |
|---|---|
| parentElement | 父节点标签元素 |
| children | 所有子标签 |
| firstElementChild | 第一个子标签元素 |
| lastElementChild | 最后一个子标签元素 |
| nextElementSibling | 下一个兄弟标签元素 |
| previousElementSibling | 上一个兄弟标签元素 |
创建标签对象
创建空标签对象。
var pEle = document.createElement('p') // 创建p标签
标签对象的属性
获取或创建了标签对象后，可以直接给点+属性名的方式设置标签属性值。如：
标签对象.id = 'p1' // 把标签的id属性设为'p1'
标签对象.style = 'color:red' // 把标签的内容颜色变为红色
标签对象.value // 表单标签中可以获取用户输入的数据
标签对象.files // 获取用户上传的文件，结果是一个数组，可以通过索引获取具体文件对象
上述方法只能设置标签默认已有的属性，无法设置标签自定义的一些属性，但是使用Attribute方法就可以：
// 添加自定义属性
标签对象.setAttibute("任意属性名", "值")
// 获取标签属性的值
标签对象.getAttibute("属性名")
// 删除标签属性
标签对象.removeAttibute("属性名")
innerText与innerHTML
标签对象有两个关于标签内部内容的属性：innerText与innerHTML。
标签对象.innerText
标签对象.innerHTML
| 不同情况 | 区别 |
|---|---|
| 获取值的时候 | innerText只会获取文本内容； innerHTML获取文本和标签 |
| 设置值的时候 | innerText不识别标签语法 innerHTML识别标签语法 |
标签内部追加内容
标签对象.append("内容") // 直接追加内容
标签对象.append(其他标签对象) // 标签内部结尾追加标签
属性操作
class属性操作
| 方法 | 描述 |
|---|---|
| 标签对象.classList | 查看所有的类属性 |
| 标签对象.classList.add("值") | 添加class属性的值 |
| 标签对象.classList.remove("值") | 移除class属性的值 |
| 标签对象.classList.contains("值") | 判断是否含有某个class属性的值 |
| 标签对象.classList.toggle("值") | 有则移除这个class值，无则添加这个class值 |
样式操作
改变标签的样式需要更改style属性的值，style属性.css属性也可以更改css样式。
标签对象.style.color = 'red' // 设置标签内容的颜色为red
标签对象.style.fontSize = '18px' // 设置标签内容大小为18px
注意：style里的属性值设置时没有-，如：font-size需要写成fontSize。
