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                 #某个键盘按键被松开