day048 BOM和DOM

时间:2021-07-15 01:13:13

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树结构

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