DOM操作

一、前戏

截止到目前为止,我们已经学习了javascript的一些简单的语法,但是使用这些简单的语法,并不能做出一些我们经常看到的一些效果,比如说表格的全选和反选等,因此为了能够操作网页上的元素,我们需要继续学习DOM相关的知识。

所谓的DOM,就是使用JS操作整个浏览器,但是这个浏览器对象比较大,因此为了方便操作,又分为三个子对象:

####1. BOM对象

BOM对象主要操作地址栏,浏览历史,窗口的高度等

####2. DOM对象

DOM对象主要操作网页上的元素和相关的CSS

####3. window对象

window对象是浏览器的宿主对象,其提供的方法和属性与js语言没有任何关系

上面的三个对象中,我们主要学习的是DOM对象,通过DOM编程,可以轻易的实现我们常见的一些效果


二、DOM对象–查找元素

####1.直接查找

document.getElementById        根据ID获取一个标签
document.getElementsByName      根据name属性获取标签集合
document.getElementsByClassName   根据class属性获取标签集合
document.getElementsByTagName    根据标签名获取标签集合

####2.间接查找

parentNode       父节点
childNodes       所有子节点
firstChild        第一个子节点
lastChild        最后一个子节点
nextSibling       下一个兄弟节点
previousSibling    上一个兄弟节点

parentElement      父节点标签元素
children         所有子标签
firstElementChild   第一个子标签元素
lastElementChild    最后一个子标签元素
nextElementtSibling  下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素

案例:表格的全选和反选以及取消


三、DOM对象–属性操作

####1.操作内容

innerText   文本
innerHTML   HTML内容
value      值

####2.操作属性

attributes            获取所有标签属性
setAttribute(key,value)    设置标签属性
getAttribute(key)       获取指定标签属性
removeAttribute(key)     删除属性

案例:验证码倒计时发送

####3.样式操作

  • 3.1 指定类操作

    className          获取所有类名
    classList.remove(cls)   删除指定类
    classList.add(cls)     添加类
    案例:左侧菜单显示 和 模态框显示取消

  • 3.2 指定css操作

    obj.style.backgroundColor = “red”;

使用js操作css的属性的规律如下:

1.对于没有中划线的css属性一般直接使用style.属性名即可。如:

obj.style.margin,obj.style.width,obj.style.left,obj.style.position等

2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。如:

obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等

案例:表格的隔行换色 和 文本框获取失去焦点 以及 小说阅读网站,点击大中小变换字体

四、事件

####1.常见的一些事件

获得焦点事件——–onfocus
失去焦点事件——–onblur
内容改变事件——–onchange
载入页面———–onload
单击事件———–onclick
鼠标移入事件——–onmouseover
鼠标移出事件——–onmouseout

案例:onchange 多级菜单联动

####2.绑定事件的三种方式

面试题:写一个行为,样式,结构相分离的页面?

  • 2.1 html属性的方式绑定
1
<a href='www.baidu.com' onclick="t1();"> 百度 </a>

作为WEB开发人员,这是最早碰到的一种事件绑定方式,这种绑定方式非常古老

优点:兼容性最强

缺点也很明显:
1:需要在DOM渲染时分析绑定语句,影响DOM渲染速度(IE下尤其)
2:形式上没达到”结构与行为”相分离的原则
3:t函数在全局内执行,不方便访问该DOM对象

  • 2.2 对象属性方式
1
2
3
4
var bd = document.getElementById('bd');
bd.onclick = function(){
console.log(this.id);
}

这种绑定是把一个DOM对象onclick属性赋值为一个函数,那此时函数内部的this指向的是该DOM对象,即这个a对象

缺点:该方式只能为一种事件,绑定一个回调函数

即:.onclick = fn1, .onclick=fn2;
最终的效果是.onclick=fn2 执行

  • 2.3 addEventListener方式(了解)
1
2
3
var i0 = document.getElementById('i1');
i0.addEventListener('click', function(){console.log('a');})
i0.addEventListener('click', function(){console.log('b');})

格式:addEventListener(‘事件’,绑定的函数, true/false);

1.如果添加了多个事件处理函数,则按添加时的先后顺序来执行
2.事件处理函数中的this指代的是DOM对象本身(w3c标准)
3.第一个事件参数,一律把事件名称的“on”去掉

优点: 能为同一种事件,如onclick,绑定多个函数函数中的this指向该DOM对象,操作方便

缺点:IE8及以下版本不支持此方法


五、window对象

1.window对象常见的方法

1.1 随手就能用到的方法

  1. window.alert(msg);
  2. window.confirm(msg);
  3. window.open(URL, 位置);
1
2
3
4
5
6
window.alert('fuck');
window.confirm('确认要删除吗?');
window.open('./02.html', '_blank');

// 02.html如下代码:
<input type='button' onclick='window.close()' />

1.2 比较常用到的方法

setInerval()

  • 在载入后,每隔指定的时间就执行一次回调函数
  • timer = setInterval(“函数()” , 毫秒数);

clearInterval()

  • 取消setInterval()的设置
  • clearInterval(timer)

setTimeout()

  • 在载入后,在指定的时间就执行一次回调函数(只是一次
  • timer = setTimeout(“函数()” , 毫秒数);

clearTimeout()

  • 取消setTimeout()的设置
  • clearTimeout(timer)

2.window对象常见的属性

window.location

利用window对象的子对象location的href属性,可以完成简单的页面跳转

  1. window.location.href      获取URL
  2. window.location.href = ‘url’ 重定向
  3. window.location.reload     重新加载

六、常见的案例

案例:表格的全选和反选以及取消

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<input type="button" value="全选" onclick="SelectAll();"/>
<input type="button" value="取消" onclick="CancelAll();"/>
<input type="button" value="反选" onclick="ReverseAll();"/>

<table border="1">
<thead>
<tr>
<th>选择</th>
<th>ip</th>
<th>端口</th>
</tr>
</thead>
<tbody id="infobody">
<tr>
<td><input type="checkbox" /></td>
<td>192.16.0.100</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.16.0.100</td>
<td>81</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.16.0.100</td>
<td>82</td>
</tr>
</tbody>
</table>
<script>
function SelectAll(){
var InfoBody = document.getElementById('infobody');
var InfoChilden = InfoBody.children;

for(var i = 0; i < InfoChilden.length; i++){
var myInput = InfoChilden[i].children[0].children[0];
myInput.checked = true;
}
}

function CancelAll(){
var InfoBody = document.getElementById('infobody');
var InfoChilden = InfoBody.children;

for(var i = 0; i < InfoChilden.length; i++){
var myInput = InfoChilden[i].children[0].children[0];
myInput.checked = false;
}
}

function ReverseAll(){
var InfoBody = document.getElementById('infobody');
var InfoChilden = InfoBody.children;

for(var i = 0; i < InfoChilden.length; i++){
var myInput = InfoChilden[i].children[0].children[0];

if(myInput.checked){
myInput.checked = false;
}else{
myInput.checked = true;
}
}
}
</script>

案例:左侧菜单展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<style>
.header{
width:400px;
height:38px;
line-height: 38px;
background-color: #204982;
cursor: pointer;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="navigator">

<div class="item">
<div id="i1" class="header" onclick="changeMenu('i1')">菜单一</div>
<div class="content hide">
<div>111111</div>
<div>111111</div>
<div>111111</div>
</div>
</div>

<div class="item">
<div id="i2" class="header" onclick="changeMenu('i2')">菜单二</div>
<div class="content hide">
<div>222222</div>
<div>222222</div>
<div>222222</div>
</div>
</div>

<div class="item">
<div id="i3" class="header" onclick="changeMenu('i3')">菜单三</div>
<div class="content hide">
<div>333333</div>
<div>333333</div>
<div>333333</div>
</div>
</div>

</div>

<script>
function changeMenu(nid){
// 1. 先获取到当前点击的div
var current_div = document.getElementById(nid);
// console.log(current_div);

// 2.通过当前点击的div,从而获取到其父节点 class=navigator
var elements = current_div.parentElement.parentElement.children;
// console.log(elements);

// 3.通过获取到的父级元素,然后设置content元素为hide
for(var i=0; i<elements.length; i++){
elements[i].children[1].classList.add('hide');
}

// 4.将点击的那个div的hide样式去除掉
current_div.nextElementSibling.classList.remove('hide');
}
</script>

案例:模态框的显示和取消

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<style>
.one{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.two{
position: fixed;
width: 500px;
height:400px;
/*top:200px;*/
left:40%;
background-color: white;
z-index: 10;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<input type="button" value="添加" onclick="showModel();"/>

<!-- 遮罩层开始 -->
<div id='one' class="one hide"></div>
<!-- 遮罩层结束 -->

<!-- 模态弹出框开始 -->
<div id='two' class="two hide">

<p><input type="text" value=""/></p>
<p><input type="text" value=""/></p>
<p><input type="button" value="取消" onclick="hideModel();"/>
<input type="button" value="确定" /></p>

</div>
<!-- 模态弹出框结束 -->

<script>
function showModel(){

var myonediv = document.getElementById('one');
var mytwodiv = document.getElementById('two');


myonediv.classList.remove('hide');
mytwodiv.classList.remove('hide');
}

function hideModel(){

var myonediv = document.getElementById('one');
var mytwodiv = document.getElementById('two');


myonediv.classList.add('hide');
mytwodiv.classList.add('hide');

}

</script>

案例:发送验证码倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
<button id="btn" >发送验证码</button>
</body>
<script>
var total = 10; // 总共多少秒
var curCount; // 当前剩余秒数
var mytimer;

var btn = document.getElementById("btn");

btn.onclick = function(){
curCount = total;
this.setAttribute("disabled","true");
this.innerText = "请在" + curCount + "秒内输入验证码";
mytimer = setInterval(setRemainTime, 1000);
};

function setRemainTime(){
if(curCount == 0){
clearInterval(mytimer);
btn.removeAttribute("disabled");
btn.innerText = "重新发送验证码";
}else{
curCount -= 1;
btn.innerText = "请在" + curCount + "秒内输入验证码";
}
}
</script>

案例:表格的隔行换色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<body>
<table border="1" width="500px">
<tr onmouseover="test1(0);" onmouseout="test2(0);">
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
<tr onmouseover="test1(1);" onmouseout="test2(1);">
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
<tr onmouseover="test1(2);" onmouseout="test2(2);">
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
</table>

</body>
<script>
function test1(n){
// console.log(123);
var myTr = document.getElementsByTagName("tr")[n];
myTr.style.backgroundColor = "red";
}

function test2(n){
// console.log(456);
var myTr = document.getElementsByTagName("tr")[n];
myTr.style.backgroundColor = "";
}
</script>

案例:文本框获取和失去交点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />

<script>
function Focus(ths){
ths.style.color = "black";
if(ths.value == '请输入关键字' || ths.value.trim() == ""){

ths.value = "";
}
}

function Blur(ths){
if(ths.value.trim() == ""){
ths.value = '请输入关键字';
ths.style.color = 'gray';
}else{
ths.style.color = "black";
}
}
</script>

案例:菜单联动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<body>
<select name="province" id="province" onchange="ld();">
<option value="-1">请选择</option>
<option value="0">北京</option>
<option value="1">山西</option>
</select>
<select name="city" id="city">

</select>
</body>
<script>
var citys = [
["海淀","东城","西城","朝阳"],
["太原","大同","运城","晋中"]
];
function ld(){
var provinces = document.getElementById("province");
var opts;

if(provinces.value == -1){
opts = '';
document.getElementById("city").innerHTML = opts;
return;
}

var areas = citys[provinces.value];
for(var i = 0; i < areas.length; i++){
opts += "<option value='" + i + "'>" + areas[i] + "</option>";
}

document.getElementById("city").innerHTML = opts;
}
</script>

案例:小说阅读,点击大中小更改字体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<button onclick="bigger();">大</button>
<button onclick="middle();">中</button>
<button onclick="smaller();">小</button>
<p>轻轻地我走了,正如我轻轻的来!</p>
</body>
<script>
function bigger(){
var p = document.getElementsByTagName("p")[0];
p.style.fontSize = '25px';
}

function middle(){
var p = document.getElementsByTagName("p")[0];
p.style.fontSize = '18px';
}

function smaller(){
var p = document.getElementsByTagName("p")[0];
p.style.fontSize = '13px';
}
</script>