javascript操作dom对象
Posted 颢Blog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript操作dom对象相关的知识，希望对你有一定的参考价值。
什么叫DOM?
DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是Dhtml编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。
DOM属于浏览器，而不是javascript语言规范里的规定的核心内容。
查找元素
1、直接查找
| 方法名 | 描述 |
| getElementById(id) (document) | 获取有指定惟一ID属性值文档中的元素 |
| getElementsByTagName_r(name) | 返回当前元素中有指定标记名的子元素的数组 |
| document.getElementsByClassName | 根据属性获取标签集合 |
| getAttribute(name) | 返回元素的属性值，属性由name指定 |
1>document.getElementById(\'id\')
|
1
2
3
4
5
6
7
8
9
10
|
<body> <div id="zhang"> 不帅 </div> <script type="text/javascript"> var i = document.getElementById(\'zhang\'); //查找指定的id i.innerText = \'很帅\'; //innerText修改指定的字符串 </script></body> |
显示效果，当我们打开IE的时候不帅就会被修改为很帅
2>getElementsByTagName_r(name)
|
1
2
3
4
5
6
7
8
9
10
|
<body> <div name="zhang"> 不帅 </div> <script type="text/javascript"> var i = document.getElementByTagNmae(\'zhang\'); //查找指定的name名 i.innerText = \'很帅\'; //innerText修改指定的字符串 </script></body> |
其显示效果一样
3>document.getElementsByClassName
|
1
2
3
4
5
6
7
8
9
10
|
<body> <div class="zhang"> 不帅 </div> <script type="text/javascript"> var i = document.getElementClassName(\'zhang\'); //查找指定的class名 i.innerText = \'很帅\'; //innerText修改指定的字符串 </script></body> |
2、间接查找
| 属性名 | 描述 |
| childNodes | 返回当前元素所有子元素的数组 |
| childNodes | 返回当前元素的所有子元素 |
| firstChild | 返回当前元素的第一个下级子元素 |
| lastChild | 返回当前元素的最后一个子元素 |
| nextSibling | 返回紧跟在当前元素后面的元素 |
| previousSibling | 返回紧跟在当前元素前面的元素 |
| parentElement | 返回其父节点标签元素 |
| children | 返回其所有子标签 |
| firstElementChild | 返回第一个子标签元素 |
| lastElementChild | 返回最后一个子标签元素 |
| nextElementtSibling | 返回下一个兄弟标签元素 |
| previousElementSibling | 返回上一个兄弟标签元素 |
利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。
操作元素
1、动态创建内容时所用的W3C DOM属性和方法
| 属性/方法 | 描述 |
| document.createElement_x(tagName) | 文档对象上的createElement_x方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素 |
| document.createTextNode(text) | 文档对象的createTextNode方法会创建一个包含静态文本的节点 |
| <element>.appendChild(childNode) | appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。 |
| <element>.setAttribute(name, value) | 这些方法分别获得和设置元素中name属性的值 |
| <element>.insertBefore(newNode, targetNode) | 将节点newNode作为当前元素的子节点插到targetNode元素前面 |
| <element>.removeAttribute(name) | 这个方法从元素中删除属性name |
| <element>.removeChild(childNode) | 这个方法从元素中删除子元素childNode |
| <element>.replaceChild(newNode, oldNode) | 这个方法将节点oldNode替换为节点newNode |
| <element>.hasChildnodes() | 这个方法返回一个布尔值，指示元素是否有子元素 |
2、标签内容
|
1
2
3
|
innerText 获取标签文本内容innerHTML 获取HTML内容value 获取值，即form提交表单的值 |
即实例如下：
|
1
2
3
4
5
6
7
8
|
<div class="zhang">1111</div><div class="yan">2222</div><input class="lin" type="text" value="张岩林"><script> document.getElementsByClassName("zhang").innertext = 123; // 获取类名为zhang的标签并把内容改为123 document.getElementsByClassName("yan").innerHTML = 456; //获取类名为yan的标签并把内容改为456 document.getElementsByClassName("lin").value = "张岩林很帅"; //获取类名为lin的标签并把内容改为张岩林很帅</script> |
3、属性
|
1
2
3
|
attributes // 获取所有标签属性setAttribute(key,value) // 设置标签属性getAttribute(key) // 获取指定标签属性 |
通过自定义属性可以做一个全选，反选，取消选择的案例，代码如下：
|
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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> <input type="button" value="全选" onclick="Checkall();"> <input type="button" value="取消" onclick="Cancleall();"> <input type="button" value="反选" onclick="recvall();"></div><div id = "i1"> <ul> <li><input type="checkbox" value="1" class="c1">篮球</li> <li><input type="checkbox" value="2" class="c1">足球</li> <li><input type="checkbox" value="3" class="c1">排球</li> </ul></div><script> function Checkall() { var b = document.getElementsByClassName("c1"); for (var i = 0 ;i < b.length;i++){ var check = b[i]; check.checked = true } } function Cancleall() { var b = document.getElementsByClassName("c1"); for (var i = 0 ;i < b.length;i++){ var check = b[i]; check.checked = false } } function recvall() { var b = document.getElementsByClassName("c1"); for (var i = 0 ;i < b.length;i++){ var check = b[i]; if (check.checked){ check.checked = false }else { check.checked = true } } }</script></body></html>全选、反选、取消案例 |
注：onclick是属于点击事件，后面会提到
4、class操作
|
1
2
3
|
className // 获取所有类名classList.remove(cls) // 删除指定类classList.add(cls) // 添加类 |
当我们鼠标放到全部商品的时候，下面就出现好多商品，其商品是属于隐藏的，触发事件以后他才显示出来，其中间的操作就是定义了一个css隐藏属性，鼠标放上去后，移除CSS隐藏属性；鼠标移走又把隐藏属性给添加上去。
|
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
|
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>隐藏</title> <style> .hide{ display: none; } </style></head><body><span onmouseover="mouOver();" onmouseout="mouOut();">放这上面有东西出来，不放东西又消失</span><div class="hide" id = "zhangyanlin" style="font-size: 60px">张岩林好帅</div><script> function mouOver() { document.getElementById("zhangyanlin").classList.remove("hide"); } function mouOut() { document.getElementById("zhangyanlin").classList.add("hide"); }</script></body></html>来个案例醒醒脑 |
5、标签操作
dom创建标签，添加到指定位置
|
1
2
3
4
5
6
7
8
9
10
11
|
// 方式一var zhang = "<input type=\'text\' />";xxx.insertAdjacentHTML("beforeEnd",zhang);xxx.insertAdjacentElement(\'afterBegin\',document.createElement(\'a\')) //注意：第一个参数只能是\'beforeBegin\'、 \'afterBegin\'、 \'beforeEnd\'、 \'afterEnd\' // 方式二var tag = document.createElement(\'div\')xxx.appendChild(tag) //往后追加一个div元素xxx.insertBefore(tag,xxx[1]) //插到指定位置，可根据索引 |
|
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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div> <div> <input type="text" /> <input type="button" value="添加" onclick="AddElement(this);" /> </div> <div style="position: relative;"> <ul id="commentList"> <li>alex</li> <li>eric</li> </ul> </div> </div> <script> function AddElement(ths) { // 获取输入的值 var val = ths.previousElementSibling.value; ths.previousElementSibling.value = ""; var commentList = document.getElementById(\'commentList\'); //第一种形式，字符串方式 //var str = "<li>" + val + "</li>"; // \'beforeBegin\'、 \'afterBegin\'、 \'beforeEnd\'、 \'afterEnd\' // beforeEnd内部最后 // beforeBegin 外部上边 //afterBegin 内部贴身 //afterEnd 外部贴墙 //commentList.insertAdjacentHTML("beforeEnd",str); //第二种方式，元素的方式 var tag = document.createElement(\'li\'); tag.innerText = val; var temp = document.createElement(\'a\'); temp.innerText = \'百度\'; tag.appendChild(temp); // commentList.appendChild(tag); commentList.insertBefore(tag,commentList.children[1]); } </script></body></html>添加标签操作案例 |
6、样式操作
|
1
2
3
4
5
6
7
8
|
<body><div id = i1>张岩林很帅</div><script>var obj = document.getElementById(\'i1\');obj.style.fontSize = "32px";obj.style.backgroundColor = "red";</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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .bb{ color: #9a9a9a; } .aa{ color: black; } </style></head><body> <input class="bb" value="请输入内容" onfocus="inpAtu(this);" onblur="onBtu(this);"> <script> function inpAtu(ths) { ths.className = "aa"; var text = ths.value; if (text == "请输入内容"){ ths.value = ""; } } function onBtu(ths) { var text = ths.value; if (text == "请输入内容" || text.trim().length == 0){ ths.className = "bb"; ths.value = "请输入内容"; } } </script></body></html>input输入框提示 |
7、位置操作
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
总文档高度document.documentElement.offsetHeight 当前文档占屏幕高度document.documentElement.clientHeight 自身高度tag.offsetHeight 距离上级定位高度tag.offsetTop 父定位标签tag.offsetParent 滚动高度tag.scrollTop |
网页右下角有个返回顶部，一点就返回到上面了，其实就是计算这些高度；还有当你鼠标往下拉的时候，左边菜单栏相对应的样式都会变。
|
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|