javascript-----DOM文档对象模型
1.DOM分类
DOM:文档对象模型，提供了添加、移动、该变、或移除的结构文档的方法和属性
DOM Core：锁定一批标签，看成dom对象，进行业务分析
HTML DOM ：把标签和属性看成是一个DOM，即HTML 文档对象
CSS DOM ：style.cssText
style.属性名：
2. HTML文档中的每个成分都是一个节点
1〉整个文档时一个文档节点
2〉每个HTML是一个元素节点
3〉每个HTML中的文本是一个文本节点
3. 获取当前节点的子节点集合childNodes，写的时候有空格的话会影响结果，所以应该先获取节点信息，然后判断节点类型（nodeType），1：element 元素节点 ；2：attr 属性节点； 3：#text 文本节点；
例：
|
1
2
3
4
5
6
7
8
9
10
11
|
window.onload=function(){ // 能力检测 查看浏览器内核引擎内有没有某个属性 var str=document.getElementById("box"); //能力检测 var str1=str.childNodes; for ( var i=0;i<str1.length;i++) { if (str1[i].nodeType==1) { alert(str1[i].innerHTML); } } }; |
4. 创建和插入节点
1〉A(父级对象).appendChild(dom);
2〉 insertBefore(A,B) 表示将A插入到B对象之前
例：
|
1
2
3
4
5
6
7
8
9
|
window.onload=function(){ //动态的构建一个div var str=document.createElement("div"); str.innerHTML="我是div"; var bo=document.getElementById("mine"); var myul=document.getElementById("box"); bo.insertBefore(str,myul); var ss=document.getElementById("first"); ss.style.background="red"; }; |
5.替换和删除节点
replaceChild()
例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
window.onload=function(){ //等待所有的html标签，img。css。js加载完毕后执行 //删除节点 ，A.removeChild(子元素对象) /* var dom=document.getElementById("first"); var box=document.getElementById("box"); box.removeChild(dom); *///替换节点 }; function myreplace(){ var myfirst=document.getElementById("first"); var dom=document.createElement("li"); dom.innerText="打游戏"; var box=document.getElementById("box"); box.replaceChild(dom,myfirst); } |
6.操作节点样式
1〉dom.style.属性名="属性值";规则：碰到有-的，去掉-，后面的第一个字母变成大写；
2〉一次设置n个样式：dom.style.cssText="属性名1:属性值1;属性名2:属性值2";
例：
|
1
2
3
4
5
|
var dom=document.getElementById("first"); /* dom.style.属性名="属性值"; dom.style.backgroundColor="pink"; dom.style.fontSize="30px"; */ dom.style.cssText="background-color:pink;font-size:30px;"; }; |
7. 1〉offsetLeft：类似于css中的margin-left；返回他与父级边框之间的距离，但是父级元素必须有相对定位，否则返回的是本身与浏览器边框之间的距离；
例：
|
1
2
3
4
5
|
window.onload=function(){var small=document.getElementById("small");var left=small.offsetLeft;alert(left);}; |
2〉scrollTop：返回匹配元素的滚动条的垂直位置
例：
|
1
2
3
4
5
6
|
window.onscroll=function(){ var height=document.documentElement.scrollTop||document.body.scrollTop; document.title=height; var bigBox=document.getElementById("big"); bigBox.style.cssText="margin-top:"+height+"px"; }; |
8.dom.className="class属性值"; 规则：配合样式表使用
例：
|
1
2
3
4
5
6
7
8
|
window.onload=function(){ //等待所有的html标签，img。css。js加载完毕后执行 }; function addStyle(){ var dom=document.getElementById("first"); dom.className="mystyle"; } |
<!DOCTYPE html> <html> <head> <title>访问节点</title> <script type="text/javascript"> /* * nodeName: * 元素节点显示的是标签名称 * 属性节点显示的是属性名称 * 文本节点显示的是 #text * 文档节点显示的是#document * nodeValue; * 文本节点显示的是文本 * 属性节点显示的是属性值 * * nodeType: * 1 元素节点 * 2 属性节点 * 3 文本节点 * 8 注释 * 9 文档 * */ window.onload=function(){ var ul=document.getElementsByTagName("ul")[0]; /* alert("节点名称："+ul.nodeName); alert("节点的类型："+ul.nodeType); */ //获得ul中的第一个li var li=ul.firstElementChild; alert("节点的名称："+li.nodeName); alert("节点的类型："+li.nodeType); alert("节点的内容："+li.childNodes[0].nodeValue);// alert("节点的内容："+li.innerHTML);都能获得 //给变猫图片的宽度 var image=document.getElementsByName("cat")[0]; image.setAttribute("width","200px"); //获得图片的src的值 alert(image.getAttribute("src")); }; </script> </head> <body> <ul> <li>小强1</li> <li>小强2</li> <li>小强3</li> </ul> <img name="cat" src="images/cat.jpg"> </body> </html>
<!DOCTYPE html> <html> <head> <title>节点的增删改</title> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> window.onload=function(){ var ul=document.getElementsByTagName("ul")[0]; //新增节点 var newli=document.createElement("li"); newli.innerHTML="小黑"; ul.appendChild(newli); //获得ul第三个li var second=ul.getElementsByTagName("li")[2]; ul.insertBefore(newli,second);//把创建的元素添加到小强3的前面 //删除节点 var reNode=ul.getElementsByTagName("li")[0]; //ul.removeChild(reNode); //替换节点 ul.replaceChild(newli,reNode); }; </script> </head> <body> <ul> <li>小强1</li> <li>小强2</li> <li>小强3</li> </ul> <div id="d"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>新增输入框</title> <script type="text/javascript"> window.onload=function(){ var btn= document.getElementById("btn"); var ul=document.getElementById("u"); //点击事件 btn.onclick=function(){ var li =document.createElement("li");//创建li标签 var input=document.createElement("input");//创建input标签 input.setAttribute("type","text"); input.setAttribute("placeholder","请输入内容"); li.appendChild(input); ul.appendChild(li); }; }; </script> </head> <body> <input type="button" value="新增" id="btn"> <ul id="u"></ul> </body> </html>
<html> <head> <title>table对象</title> <script type="text/javascript"> window.onload=function(){ var table=document.getElementById("myTable"); var btn1=document.getElementById("btn1"); var btn2=document.getElementById("btn2"); //显示表格总行数 btn1.onclick=function(){ alert(table.rows.length); }; //显示第二行第二例的单元格的内容rows是一个数组 cells也是一个数组显示表格内容 btn2.onclick=function(){ alert(table.rows[1].cells[1].innerHTML); }; }; </script> </head> <body> <input type="button" value="显示表格总数" id="btn1" > <input type="button" value="显示第二行的第二例的单元格内容" id="btn2"> <table id="myTable" border="1px"> <tr> <td>第一行第一列</td> <td>第一行第2列</td> <td>第一行第3列</td> </tr> <tr> <td>第2行第一列</td> <td>第2行第2列</td> <td>第2行第3列</td> </tr> <tr> <td>第3行第一列</td> <td>第3行第2列</td> <td>第3行第3列</td> </tr> </table> </body> </html>
<html> <head> <title>新增和删除行</title> <script type="text/javascript"> window.onload=function(){ var table= document.getElementById("myTable"); var btn1= document.getElementById("btn1"); var btn2= document.getElementById("btn2"); //新增insertRow(index) btn1.onclick=function(){ var row=table.insertRow(0); //给行新增列 并且给列赋值 row.insertCell(0).innerHTML="新增行的列1"; row.insertCell(1).innerHTML="新增行的列2"; row.insertCell(2).innerHTML="新增行的列3"; }; btn2.onclick=function(){ table.deleteRow(table.rows.lenth-1); }; }; </script> </head> <body> <input type="button" value="新增" id="btn1" > <input type="button" value="删除最后一行" id="btn2"> <table id="myTable" border="1px"> <tr> <td>第一行第一列</td> <td>第一行第2列</td> <td>第一行第3列</td> </tr> <tr> <td>第2行第一列</td> <td>第2行第2列</td> <td>第2行第3列</td> </tr> <tr> <td>第3行第一列</td> <td>第3行第2列</td> <td>第3行第3列</td> </tr> </table> </body> </html>