javascript-----DOM文档对象模型
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>