DOM基础
1、什么是DOM:
DOM是W3C（万维网联盟）的标准。
DOM定义了访问HTML和XML文档的标准：
"W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
2、DOM节点
1）nodeType--节点类型
1---元素节点
3---文本节点
1 <!DOCTYPE html"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>无标题文档</title> 5 <script> 6 window.onload = function (){ 7 alert(document.body.childNodes[0].nodeType);//弹出结果为3 8 alert(document.body.childNodes[1].nodeType);//弹出结果为1 9 } 10 </script> 11 </head> 12 13 <body> 14 dfdfdas 15 <span>ddfdfdd</span> 16 </body> 17 </html>
运行效果：
2）childNodes--子节点个数（数组）有兼容性问题
使ul下面的子节点背景颜色变红色
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var oUl = document.getElementById('ul1');
for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType ==1){
oUl.childNodes[i].style.background = 'red';
; }
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
运行效果：
3）children--子节点个数--兼容性比较好
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var oUl = document.getElementById('ul1');
//alert(oUl.children.length);//弹出数量为3
for( var i=0;i<oUl.children.length;i++){
oUl.children[i].style.background = 'green';
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
4）
parentNode---获取父节点
点击链接，隐藏整个li
代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload = function (){ 8 var oA = document.getElementsByTagName('a'); 9 for(var i=0;i<oA.length;i++){ 10 11 oA[i].onclick = function (){ 12 this.parentNode.style.display = 'none';//获取父节点 13 } 14 } 15 } 16 </script> 17 </head> 18 19 <body> 20 <ul> 21 <li>aaaaaaa<a href="javascript:;">隐藏</a></li> 22 <li>bbbbbbb<a href="javascript:;">隐藏</a></li> 23 <li>ccccccc<a href="javascript:;">隐藏</a></li> 24 <li>dddddddd<a href="javascript:;">隐藏</a></li> 25 <li>eeeeeeeee<a href="javascript:;">隐藏</a></li> 26 </ul> 27 </body> 28 </html>
运行效果：
点击后已消失了2个；
5）offsetParent---定位父节点
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload = function (){ 8 oDiv2 = document.getElementById('div2'); 9 oDiv2.onclick = function (){ 10 alert(this.offsetParent.tagName); //div1设置为相对定位时 11 } 12 } 13 </script> 14 </head> 15 16 <body> 17 <div id="div1" style="100px;height:100px;background:red;margin:100px;position:relative;"> 18 <div id="div2" style="100px;height:100px;background:yellow;position:absolute;left:100px;top:100px;"></div> 19 </div> 20 </body> 21 </html>
运行效果：
当div1不设置定位时：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload = function (){ 8 oDiv2 = document.getElementById('div2'); 9 oDiv2.onclick = function (){ 10 alert(this.offsetParent.tagName); 11 } 12 } 13 </script> 14 </head> 15 16 <body> 17 <div id="div1" style="100px;height:100px;background:red;margin:100px;"> 18 <div id="div2" style="100px;height:100px;background:yellow;position:absolute;left:100px;top:100px;"></div> 19 </div> 20 </body> 21 </html>
运行效果：
