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