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>
浙公网安备 33010602011771号