JS中BOM和DOM操作
js是通过这两种来实现操作浏览器和html文件的：
-
BOM：浏览器对象模型 操作对象是浏览器
-
DOM：文档对象模型 操作对象是标签
BOM操作
操作对象为window对象，代指的是浏览器窗口。
window.innerHeight 浏览器窗口的高度
window.innerWidth 浏览器窗口的宽度
// 新建窗口打开页面 第一个参数为url 第二个参数为空 第三个参数写新建窗口大小和位置
window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px')‘
windows.close 关闭当前页面
windows的子对象
// navigator对象
navigator.appName // web浏览器全称
navigator.appVersion // web浏览器厂商和版本的详细字符串
navigator.userAgent // 用来表示当前是否是一个浏览器
navigator.platform // 浏览器运行所在的操作系统
// history对象
history.back() // 回退到上一页
history.forward // 前进到下一页
// location对象
window.location.href // 获取当前页面的url
window.location.href = url // 跳转到指定的url
window.location.reload() // 刷新页面
// 弹出框
alert('弹出内容') // 警告框
confirm('你确定吗') // 确认框
prompt('请输入你的答案','这是你的答案') // 提示框
// 计时器
// 如果想要清除定时任务，那么就需要设置变量
let t = setTimeout('这里可以放代码',3000) // 过一段时间之后触发（一次）,第二个参数就是毫秒
clearTimeout(t) // 取消定时任务
let t = setInterval('js代码',3000) // 每隔3000毫秒就执行一次。
clearInterval(t) // 清除定时器
DOM操作
DOM(Document Object Model)是一套对文档内容进行抽象和概念化的方法。
当王爷被夹在之后就会被创建文档对象模型。被称为对象树，标签都可以称为是节点。
js针对DOM可以进行的操作：
- 创建动态的HTML
- 改变页面的HTML元素
- 改变页面的HTMl属性
- 改变CSS样式
- 对页面中的所有事件做出反应
DOM主要操作的是标签，所以需要先查找标签，然后在进行操作。
// 查找标签的两种方式
在找到标签进行变量名赋值的时候，一般变量名采取的是XXXEle。
// 1.直接查找
document.getElementById('id值') // 通过id查找，返回的是一个标签
document.getElementByClassName('类') // 类查找 返回的是数组
document.getElementByTagName('标签名') // 标签名查找 返回的是数组
// 2.间接查找
let divEle = document.getElementByID('d1')
divEle.parentElemen // 父节点标签元素
divEle.children // 所有子标签
divEle.firstElementChild // 第一个子标签元素
divEle.lastElementchild // 最后一个子标签元素
divEle.nextElementSibling // 下一个兄弟标签元素
divEle.previousElementsibling // 上一个兄弟标签元素
节点操作
let imgEle = document.createElement('img') // 创建一个img标签
img.src = '111.src' // 设置标签的默认属性
imgEle.setAttribute('username','tom') //可以设置自定义属性和默认属性
// 对于查找到的标签内部添加元素
let divEle = document.getElementById('d1')
divEle.appendChild(imgEle) // 在标签内部添加，尾部
divEle.insertBefore(imgEle,child) // 添加到子标签child之前
// 设置文本属性
let aEle = document.createElement('a');
aEle.innerText = '点我你会发现新大陆' // 给标签设置文本内容
aEle.innerHTML = '<p>你猜怎么着</p>' // 也可以设置文本内容且识别Html标签
removeChild(删除的节点) // 删除节点
replaceChild(newnode,某个节点) // 替换节点
getAttribute(属性) // 获取属性
removeAttribute(属性) // 移除属性
获取值操作
// 获取用户标签内部的数据 node.value
let seEle = document.getElementById('select');
seEle.value // 可以获取到值
// 获取用户上传的文件数据 node.files
let fileEle = document.getElementById('d3');
fileEle.files // 获取到文件数据 是一个数组
classcss操作
node.classList // 获取对所有的类属性
node.classList.remove('类属性') // 移除某一个类属性
node.classList.add('类') // 添加类属性
node.classlist.contains('类') // 验证是否包含某个类
node.classList.toggle('类') // 有则删除，无则添加
// 操作css统一由style起手
// 针对css中属性有中横线的，在js中去掉并将单词首字母大写；没有的则不变
node.style.color = 'red'
node.style.fontSize = '24px'
事件
事件：达到某个事先设定的条件，自动触发的动作
// 事件都有哪些？
onclick 用户点击某个对象时调用的事件句柄
ondbclick 用户双击某个对象时调用的事件句柄
onfocus 元素获得焦点，输入框
onblur 元素失去焦点，用于表单验证，用户离开输入框代表输入完了
onchange 域内容被改变，用于表单元素，当元素内容被改变时触发
onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被松开
onkeyup 某个键盘按键被松开
onload 一张页面或图像完成加载
onmousedown 鼠标按钮被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标移到某元素之上
onselect 在文本框中的文本被选中时发生
onsubmit 确认按钮被点击，使用对象是form
// 绑定方式有两种
<button onclick='func1()'>点我</button>
<button id='d1'>点我</button>
<script>
//第一种绑定方式
function func1(){}
// 第二种绑定方式
let butEle = document.getElementById('d1');
butEle.onclick = function () {}
</script>
/*
一般情况下我们把JS代码放到body标签的尾部，
放在其他位置有可能出现标签还未加载的情况而报错
*/
// 绑定事件的两种方式