前端----DOM DOM(文档对象模型(Document Object Model)) Dom事件:
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作
1、查找元素
① 直接查找
1
2
3
4
|
document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据 class 属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合 |
② 间接查找
innerText:只获取其中的文本,忽略html的各种标签
innerHTML:全部内容
value:
input value获取当前标签中的值
select 获取选中的value值(selectedIndex)
Textarea标签 value获取当前标签中的值
obj=document.getElementById('i1'); <div id="i1">…</div>" 老男孩 "<a>google</a></div> obj.innerText "老男孩 google" obj.innerHTML " 老男孩 <a>google</a> " obj.innerHTML='李杰' "李杰"
obj.innerText = "<a href='http://www.oldboyedu.com'>老男孩</a>" 只修改字符串
obj.innerHTML = "<a href='http://www.oldboyedu.com'>老男孩</a>" 修改成html标签
obj=document.getElementById('i2'); <input type="text" id="i2"> obj.value #获取input的用户输入内容 "python" obj.value='aaa' #修改内容 "aaa"
<select >北京3</option>
</select>
obj=document.getElementById('i3');
<select id="i3">…</select>
obj.value
"11"
obj.value='12'
"12"
搜索使用的默认关键字实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style=" 600px;margin: 0 auto"> <input > #新版本的浏览器用此参数即可自动实现功能,不用写js
</div>
<script>
function Focus() {
var tag = document.getElementById('i1');
var val = tag.value;
if (val = '请输入关键字'){
tag.value = '';
}
}
function Blur() {
var tag = document.getElementById('i1');
var val = tag.value;
if (val.length == 0 ){
tag.value = '请输入关键字';
}
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
|
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
|
③ 扩展练习
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
|
//获取ID
>document.getElementById( 'i1' );
< <div id= "i1" >我是i1</div>
//获取内容
>document.getElementById( 'i1' ).innerText
< "我是i1"
//重新赋值
>document.getElementById( 'i1' ).innerText = '新内容'
< "新内容"
//获取tagname集合
>document.getElementsByTagName( 'a' );
<[<a>aaaaa</a>, <a>bbbbb</a>, <a>ccccc</a>] //获取集合指定索引元素
>document.getElementsByTagName( 'a' )[1]
< <a>bbbbb</a> //对单个元素重新赋值
>document.getElementsByTagName( 'a' )[1].innerText = 66666;
<66666 //对集合中所有文件赋值
>tags = document.getElementsByTagName( 'a' );
<[<a>aaaaa</a>, <a>66666</a>, <a>ccccc</a>] > for ( var i=0;i<tags.length;i++){tags[i].innerText=99999;}
<99999 >tags <[<a>99999</a>, <a>99999</a>, <a>99999</a>] |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//获取ID
>tag = document.getElementById( 'i1' );
< <div id= "i1" >c2</div>
//获取ID的父项
>tag.parentElement < <div> <div>c2Sibling</div>
<div id= "i1" >c2</div>
</div>
//获取父项的子节点
>tag.parentElement.children < [<div>c2Sibling</div>,<div id= "i1" >c2</div>]
//获取父项的大兄弟
>tag.parentElement.previousElementSibling > <div> <div>c1Sibling</div>
<div>c1</div>
</div>
|
2、内容操作
① 内容
1
2
3
4
5
|
innerText 文本 outerText innerHTML HTML内容 innerHTML value 值 |
② 属性
1
2
3
4
5
6
7
8
9
|
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
/* var atr = document.createAttribute("class"); atr.nodeValue="democlass"; document.getElementById('n1').setAttributeNode(atr); */ |
3、Class操作
1
2
3
|
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
|
样式操作: className classList classList.add classList.remove obj.style.fontSize = '16px'; obj.style.backgroundColor='red'; .style.color = 'red' <style> .c1{ font-size:16px; color:red; ... } </style> <div class='c1 c2' style='font=size:16px;background=color'></div>
4、创建标签,并添加到HTML中:
标签练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="AddEle1();" value="+"> <input type="button" onclick="AddEle2();" value="+"> <div > <p><input type="text" /></p> <!--<hr />--> </div> <script> function AddEle1() { //创建一个标签 //将标签添加到id中 var tag = "<p><input type='text' /></p>";
//参数只能是'beforeBegin'、'afterBegin'、‘beforeEnd'、'afterEnd' document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag); } function AddEle2() { var tag = document.createElement('input'); tag.setAttribute('type','text'); tag.style.fontSize='16px'; tag.style.color='red'; var p = document.createElement('p'); p.appendChild(tag); //把input标签放到p标签里面 document.getElementById('i1').appendChild(p); } </script> </body> </html>
5、提交表单
任何标签通过DOM都可以提交表单
document.getElementById('f1').submit()
简单练习:
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
|
//获取ID
>document.getElementById( 'i1' );
< <div id= "i1" >c2</div>
//赋值变量
>tag = document.getElementById( 'i1' );
< <div id= "i1" >c2</div>
//设置class样式
>tag.className = 'c1' ;
> "c1"
//设置成功
>tag < <div id= "i1" class = "c1" >c2</div>
//修改class样式
>tag.className = 'c2' ;
< "c2"
>tag < <div id= "i1" class = "c2" >c2</div>
//获取样式列表
>tag.classList < [ "c2" ]
//样式列表集合中添加样式
>tag.classList.add( 'c3' )
< undefined >tag < <div id= "i1" class = "c2 c3" >c2</div>
//样式列表集合中删除样式
>tag.classList.remove( 'c2' );
< undefined >tag < <div id= "i1" class = "c3" >c2</div>
|
做完上面例子发现不得了了,我们直接可以对样式进行添加修改了,而且现在就可以做动态模块框了,点击按钮可以触发一系列动态效果,吊炸天了呼~,开搞开搞!!!
做之前还得了解这个知识点:
1
2
3
4
5
6
|
<div onclick= "func();" >点我</div>
<script> function func() {
}
</script> |
上面表示当鼠标点击到div后,执行func()函数
做个模态对话框:
页面效果:点击打开后,出现弹出,点击取消,弹出关掉
再做个选项框吧-全选、反选、取消:
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
|
<body> <div>
<table>
<thead>
<tr>
<td>选择</td>
<td>IP地址</td>
</tr>
</thead>
<tbody id= "tb" >
<tr>
<td><input type= "checkbox" /></td>
<td>192.168.2.201</td>
</tr>
<tr>
<td><input type= "checkbox" /></td>
<td>192.168.2.202</td>
</tr>
<tr>
<td><input type= "checkbox" /></td>
<td>192.168.2.203</td>
</tr>
</tbody>
</table>
<input type= "button" value= "全选" onclick= "ChooseAll();" />
<input type= "button" value= "取消" onclick= "CancleAll();" />
<input type= "button" value= "反选" onclick= "ReverseAll();" />
</div>
<script>
function ChooseAll() {
var tbody = document.getElementById( 'tb' );
var tr_list = tbody.children;
for ( var i=0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = true
}
}
function CancleAll() {
var tbody = document.getElementById( 'tb' );
var tr_list = tbody.children;
for ( var i=0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = false
}
}
function ReverseAll() {
var tbody = document.getElementById( 'tb' );
var tr_list = tbody.children;
for ( var i=0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
if (checkbox.checked ){
checkbox.checked= false
} else {
checkbox.checked= true
}
}
}
</script>
</body> |
页面效果:点击全选所有选项框选上;点击取消后恢复;点击反选,只选择未选上的选项框;一个字叼叼叼!!
根本停不下来,后台管理左侧菜单-点击菜单显示选项,其他菜单关闭
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
|
<head> <meta charset= "UTF-8" >
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
height: 35px;
|
页面效果:点击菜单一、菜单一展开,其他菜单关闭;点击其他菜单亦可
其他操作:
console.log(); alert(123); var v=confirm('真的要删除吗?') v:true false console.log(v) location.href #获取当前的url localtion.href='url' #重定向 location.href = location.href <==> location.reload() #刷新 var obj=setInterval(funtion(){ #设置定时器,一直在执行 console.log(1); },1000); clearInterval(obj); #清除定时器 setTimeout(); #指定时间后,定时器只执行一次 例子: <body> <div ></div> <input type="button" value="删除" onclick="DeleteEle();"> <script> function DeleteEle() { document.getElementById('status').innerText='已删除'; setTimeout(function () { document.getElementById('status').innerText=''; },5000) } </script> </body> 使用方法 var obj=setInterval(function(){ },5000) clearInterval(obj);
Dom事件:
onclick,onblur,onfocus
老方法实现表格,鼠标移动变色:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" width="300px"> <tr onmouseover="t1(0);" onmouseout="t2(0);"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr onmouseover="t1(1);" onmouseout="t2(1)";> <td>1</td> <td>2</td> <td>3</td> </tr> <tr onmouseover="t1(2);" onmouseout="t2(2)";> <td>1</td> <td>2</td> <td>3</td> </tr> </table> <script> function t1(n) { var myTrs = document.getElementsByTagName('tr')[n]; console.log(myTrs); myTrs.style.backgroundColor = "red"; } function t2(n) { var myTrs = document.getElementsByTagName('tr')[n]; myTrs.style.backgroundColor = ""; } </script> </body> </html>
新方法实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" width="300px"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> <script> var myTrs=document.getElementsByTagName('tr'); var len = myTrs.length; for(var i=0;i<len;i++){ myTrs[i].onmouseover = function () { this.style.backgroundColor = 'red'; } myTrs[i].onmouseout = function () { this.style.backgroundColor = ''; } } </script> </body> </html>
绑定事件两种方式:
a.直接标签绑定 onclick='xxx()' onfocus
b.先获取Dom对象,然后进行绑定
document.getElementById('xx').onclick document.getElementById('xx').onfocus
this,当前触发事件的标签
a.第一种绑定方式
<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(self){
//self 当前点击的标签
}
b.第二种绑定方式
<input id='i1' type='button' onclick='ClickOn(this)'>
document.getElementById('i1').onclick=funtion(){
//this 代指当前点击的标签
}
c.
事件列表:
语法分析:
可参考银角大王http://www.cnblogs.com/wupeiqi/articles/5643298.html