JS中的BOM DOM和事件
概述:
js包含ECMAScript、DOM、BOM。BOM(browser object model)浏览器对象模型,使js获得了操纵浏览器的能力。DOM(document object model)文档对象模型,使js获得了可以获取html内元素的能力。
BOM:
window对象:
window对象是客户端javascript的最高层对象之一,所有的浏览器都支持window对象,也可以粗暴的认为打开一个浏览器窗口或页面就是生成了一个window对象。所有js全局对象,函数以及变量均为windows的对象的组成元素。全局变量是window对象的属性,全局函数是window对象的方法,可以想想成python中的类,类中有静态属性和动态属性。
window.innerHeight | 浏览器窗口的内部高度 |
window.innerWidth | 浏览器窗口的内部宽度 |
window.open() | 打开新窗口 |
window.close() | 关闭当前窗口 |
window子对象:
location.href | 获取当前页面url |
location.href='url' | 跳转url |
location.reload() | 刷新 |
弹出框:
alert() | 警告框 |
confirm() | 确认框 返回true和false |
prompt() | 提示框 提示用户输入某个值,然后点击确认或取消按钮才能操作,如果点击确认,那么返回值就是填写的值,如果取消则为null |
计时相关:
js中我们可以设定一个时间间隔来执行代码,而不是在函数在调用之后立即执行,我们称为计时时间
setTimeout() |
var t=setTimeout(“alert(123)”,1000) |
等待1秒后执行,并且有返回值相当于计时事件的id |
setInterval() |
var t=setTimeout(“alert(123)”,5000) |
每5秒执行一次函数,并且有返回值相当于计时事件的id |
clearTimeout() |
clearTimeout(t) |
取消setTimeout设置 |
clearInterval() | clearInterval(t) | 参数必须是setInterval的返回值 |
以下是定时器的例子:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>计时器</title> </head> <body> <label for="i1">显示日期</label> <input type="text" id="i1"> <input type="button" value="开始" id="start_button"> <input type="button" value="结束" id="stop_button"> <script> var t; var startEle=document.getElementById("start_button"); var stopEle=document.getElementById("stop_button"); function foo_time() { var new_time=new Date(); var str_time=new_time.toLocaleString(); var i1Ele=document.getElementById("i1"); i1Ele.value=str_time; }; startEle.onclick=function () { if (t===undefined) { foo_time(); t= setInterval(foo_time,1000); } }; stopEle.onclick=function () { clearTimeout(t); console.log('cleartimeout',t); t=undefined; } </script> </body> </html>
DOM:
dom使js拥有了操纵html标签的能力。浏览器在创建页面的时候,会按照文档,元素,文本,属性,注释分类,形成了以html为根节点的树,那么这个树就叫做HTML DOM树。js可以通过dom获得标签进行操作,使js拥有了动态改变页面中所有元素,以及它们的属性和css样式能力。
1 查找标签:
1 直接查找:
document.getElementById | document.getElementById('d1') | 根据id获取一个标签 |
document.getElementBysClassName | document.getElementBysClassName('c1') | 根据class获取一组标签 |
document.getElementByTagName | document.getElementByTagName('div') | 根据标签名获取标签合集 |
2 间接查找:
parentElement |
父节点标签 |
children | 所有子标签 |
firstElementChild | 第一个子标签元素 |
lastElementChild | 最后一个子标签元素 |
nextElementChild | 下一个兄弟标签元素 |
previousElementSibling | 上一个兄弟标签元素 |
间接查找思路寻找一个中间标签,然后通过中间标签再去找想要找的标签
var a1Ele=document.getElementById("a1"); a1Ele.parentElement
2 操纵节点(根据dom树来分):
1 创建元素节点:
var imgEle=document.createElement("img"); 找到想要加入的元素 var d3Ele=document.getElementById("d3"); 在d3Ele内加入imgEle标签 d3Ele.appendChild(imgEle) 设置imgEle的属性 imgEle.src=”图片地址”
2 添加元素节点:
1 追加一个子节点,相当于python中列表的append方法:
var imgEle=document.createElement("img"); var d3Ele=document.getElementById("d3"); d3Ele.appendChild(imgEle)
2 在某个元素节点之前插入一个元素节点:
先查找想要插入标签的父标签 var dEle=document.getElementById("cc1"); 超找想要插入标签 var dEle1=document.getElementById("d1"); 创建想要被插入的标签 var spanEle1=document.createElement("span"); 插入 dEle.insertBefore(spanEle1,dEle1); 给被插入标签赋值文本属性 spanEle1.innerText='span---123'; Cc1 和 d1 为包含关系 使用insertBefor,在确定父标签和目标标签时最好使用id
3 删除元素节点:
var dEle=document.getElementById("cc1"); Var sonEle=dEle.firstElementChild dEle.removeChild(sonEle)
4 替换元素节点:
在Ele内部用newnode替换oldnode Ele.replaceChild(newnode,oldnode)
5 操纵属性节点:
setAttribute() | d1Ele.setAttribute("age","18") | 设置属性 |
getAttribute() | d1Ele.getAttribute("age") | 获取属性值 |
removeAttribute() | d1Ele.removeAttribute('age') | 删除属性 |
6 操纵文本节点;
1 获取文本节点的值;
var divEle = document.getElementById("d1"); 获得标签以及子标签的全部内容(标签+文本内容) divEle.innerHTML 获得标签以及子标签文本内容 divEle.innerText
2 变更文本节点的值:
var divEle = document.getElementById("d1"); divEle文本中赋值,此时写入的字符串标签会被浏览器解释成标签来执行 divEle.innerHTML="<div>innerHTML</div>" 给innerText赋值 divEle.innerText="1111"
7 获取值操作
var selEle=document.getElementById('s1'); |
select |
selEle.value |
"021" |
var u1Ele=document.getElementById('u1'); |
Input typle=’text’ |
u1Ele.value |
ddd |
var u1Ele=document.getElementByname(‘sex’) |
Input type=’radio’ |
|
使用jquery获取值 |
var tEle=document.getElementById('t1'); |
Input type=‘’textarea‘’ |
tEle.values |
ssss |
同样重新赋值可以采取一下方式
selEle.value=1
8 class节点操作:
className |
Ele.className |
获取标签下所有的class属性值 |
classList.remove(cls) |
Ele.classList.remove(cls) |
删除指定类 |
classList.add(cls) |
Ele.classList.add(cls) |
添加类 |
classList.contains(cls) |
Ele. classList.contains(cls) |
存在返回true否则返回false |
classList.toggle(cls) |
Ele.classList.toggle(cls) |
存在就删除,否则添加 |
利用toggle操纵class,实现开关灯:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>class相关操作 开关灯</title> <style> .c1{ height: 200px; width: 200px; border-radius: 50%; background-color: black; } .c2{ background-color: red; } /*.c3{*/ /* background-color: #e5ffad;*/ /*}*/ </style> </head> <body> <div class="c1 c2 c3" onclick="chan(this);">dfgdfgdf</div> <div class="c1 c2 c3" >dfgdfgdf2222</div> <div class="c1 c2 c3" >dfgdfgdf3333</div> <div class="c1 c2 c3" >dfgdfgdf444444</div> </body> <script> function chan(ths) { ths.classList.toggle('c2'); }; </script> <script> var divEle=document.getElementsByTagName('div'); for (var i=0;i<divEle.length;i++){ //遍历返回的列表,给每个标签绑定一个事件 divEle[i].onclick=function () { this.classList.toggle('c2') } } </script> </html>
修改指定标签的class属性;
对于没有中横线的css属性,一般直接使用style就行 有中横线的css属性,中横线后的第一个字母大写 var divEles=document.getElementsByTagName('div') divEles[0].style.backgroundColor="blue"
事件:
如果为一个标签某种操作行为绑定了一段js代码,使其能动态的执行,这样可以简单的理解为js的事件。同时这个事件绑定了一个js的函数。
例如:为某个按钮单击操作绑定了一段js代码,就是为这个按钮单击时绑定了一个事件。
常用事件:
onclick |
当用户点击某个对象调用的事件句柄 |
ondbclick |
当用户双击某个对象调用的事件句柄 |
onfocus |
元素获取焦点 |
onblur |
元素失去焦点 |
onchage |
域的内容被改变 |
onkeydown |
某个键盘按钮被按下 |
onkeypress |
某个键盘按键被按下并松开 |
onkeyup |
某个键盘按键被松开 |
onload |
一张页面或一副图像完成加载 |
onmousedown |
鼠标按钮被按下 |
onmousemove |
鼠标被移动 |
onmouseout |
鼠标从某个元素移开 |
onmouseover |
鼠标移到某元素之上 |
onselect |
在文本矿中的文本被选中时发生 |
onsubmit |
确认按钮被点击,使用的对象是form |
绑定方法:
1 写在标签内:
<div class="c1 c2 c3" onclick="chan(this);">dfgdfgdf</div>
<script> function chan(ths) { ths.classList.toggle('c2');}
</script>
2 不写在标签内:
<script> var divEle=document.getElementsByTagName('div'); for (var i=0;i<divEle.length;i++){ //遍历返回的列表,给每个标签绑定一个事件 divEle[i].onclick=function () { this.classList.toggle('c2') } } </script>
3 this
用来表示触发此事件的标签。像python中的实参。而ths 相当于python中的形参。
4 onfocus onblur的搜索框例子:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>搜索框</title> </head> <body> <!--<input type="text" id="d2" placeholder="wawa">--> <input type="text" id="d3" value="奥热曼"> <script> var d3Ele=document.getElementById("d3"); d3Ele.onfocus=function () { this.value=""; }; d3Ele.onblur=function () { if (!this.value.trim()){ this.value='奥热曼'; } } </script> </body> </html>
5 onchange的select例子:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>select联动</title> </head> <body> <div id="d1"> <select name="" id="s1"> <option value="0">--请选择--</option> <option value="1">上海</option> <option value="2">北京</option> </select> <select name="" id="s2" style="max-height: 100%;"> <option value=""></option> </select> </div> <p>this代表的是触发事件的当前标签</p> <script> //给第一个select绑定事件onchange事件 //把对应市的区镇填写到第二个select框里边 //生成option标签 //添加到select内部 var data1={2:["昌平","朝阳","海淀区"],1:["闵行","静安","浦东"]}; var s1Ele=document.getElementById("s1"); var s2Ele=document.getElementById("s2"); s1Ele.onchange=function () { s2Ele.innerHTML=""; var areas=data1[this.value]; for (var i=0;i<areas.length;i++) { var opEle=document.createElement("option"); opEle.innerText=areas[i]; s2Ele.appendChild(opEle); } } </script> </body> </html>