day048 BOM和DOM
BOM Browser Object Model（文档对象模型）
> window对象
1、alert 弹出带有提示和一个确认按钮的警示框
2、confirm 弹出带有一个提示和一个确认按钮一个取消按钮的对话框
3、promt 弹出提示用户输入的对话框
>计时器
每隔一会儿就会执行一次某个动作
设置计时器 setInterval(fun,time)
取消计时器 clearInterval(id)
>跳转
location.href #获取当前网页的url
location.search #获取url的数据部分，即？号后面的内容
location.href = url #跳到指定的url去 (url不能省略协议名)
DOM Document Object Model（文档对象模型）
> dom树结构
> dom对象
主要是两种: document对象（文档对象）和element对象（元素对象）
> 查找标签
两种方式：
1、直接查找 根据id、class、标签名、自定义名 来查找
主要方法
document.getElementById() #通过id查找，得到一个元素对象
document.getElementsByClassName() #通过类名查找，得到一个元素对象数组
document.getElementsByTagName() #通过标签名查找，得到一个元素对象数组
document.getElementsByName() #通过自定义名查找，得到一个元素对象数组
2、导航查找
通过一个已定位的元素的查找其他元素
nextElementSibling #下一个兄弟节点标签
previousElementSibling #上一个兄弟节点标签
children #儿子节点标签
firstElementChild #第一个儿子节点标签
lastElementchild #最后一个儿子节点标签
>事件绑定
ele.on事件 = function(){ }
>文本操作
1、获取文本
ele.innerHTML #文本和标签都能取到
ele.innerText #只取文本
2、赋值文本
ele.innerHTML="<a href=' ' >123</a>" # 赋的值可以作为标签处理
ele.innerText = "<a href=' ' >123</a>" #赋的值只作为纯文本处理
>属性操作
ele.setAttribute() #设置一个属性
ele.getAttribute() #拿一个属性的值
ele.removeAttribute() #移除一个属性
>class属性操作
ele.classList.add() #ele标签中class属性添加一个值
ele.classList.remove() #ele标签中class属性移除一个值
>css操作
通过调style
ele.style.color = 'red'
ele.style.fontSize = '32px'
>value属性操作
主要用于input, select, textarea 标签
ele.value #查询value值
ele.value="值" #添加value值
>节点的增删改查
1、创建节点对象
let ele = document.createElement("标签名")
ele.setAttribute() #给标签对象设置属性
2、添加节点
父节点.appendChild( newnode )
父节点.insertChild(bewnode，某个节点) #在某个节点前添加新节点
注意：
如果文档树中已经存在了 newchild，它将从文档树中删除，
然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，
而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
所以，同一个节点对象只能在文档中出现一次。
3、删除节点
父节点.removeChild(节点)
4、替换节点
父节点.replaceChild(newnode, 某个节点)
>事件
onfocus #获取光标
onblur #失去光标
onselect #选中文本
onload #页面或图像加载完成，也可以等某个线程完成
onsubmit #提交
onchange #内容替换事件（下列框，文件选择框）
onmousedown #鼠标按钮被按下
onmousemove #鼠标移动
onmouseout #鼠标从某个元素移开
onmouseover #鼠标移到某个元素上
onmouseleave #鼠标从某个元素移开（一般用这个）
onkeydown #某个按键被按下
onkeypress #某个键盘按键被按下并松开
onkeyup #某个键盘按键被松开
