day048 BOM和DOM

BOM   Browser Object Model(文档对象模型)

> window对象

1、alert     弹出带有提示和一个确认按钮的警示框

2、confirm       弹出带有一个提示和一个确认按钮一个取消按钮的对话框

3、promt          弹出提示用户输入的对话框

>计时器

每隔一会儿就会执行一次某个动作

设置计时器    setInterval(fun,time)

取消计时器    clearInterval(id)

>跳转

location.href   #获取当前网页的url        

扫描二维码关注公众号,回复: 4635430 查看本文章

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'

猜你喜欢

转载自www.cnblogs.com/zhang-yl/p/10171344.html