我个人的理解是,它是代码的结构树,以便于增删改查它的每一个结点。
例如:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM节点</title> </head> <body> <h1 id="hd">Heading</h1> <p id="p">DuanLuo</p> <table> <tr> <td>One</td> <td>Two</td> </tr> <tr> <td>Three</td> <td>Four</td> </tr> </table> <script type="text/javascript"> var tdElement=document.getElementsByTagName("td"); //一个集合,包含所有名为“td”的结构 for(i=0;i<tdElement.length;i++){ tdElement[i].style.color="red"; } var container=document.documentElement; //锁定控件 alert(container.tagName) //得到控件名称,看看是不是根目录。输出“HTML” </script> </body> </html>
【输出】
【思路】“DuanLuo”在<p>里面,先定位到这里,改变颜色,然后再找到“Heading”所属的节点对象,在这个节点下面添加新的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM节点</title> </head> <body> <h1 id="hd">Heading</h1> <p id="p">DuanLuo</p> <script type="text/javascript"> //pEle.setAttribute("align","center"); //用代码,使它居中 //开发时使用第三方插件(用js写的,例如写博客的插件,所以要学会改格式) var pEle=document.getElementById("p"); var h=document.getElementById("hd"); var pEle2; //锁定“DuanLuo”节点(在Heading下) if(h.nextSibling.nodeType==1){ //如果节点是空白(空行也算节点)。就隔两行。 pEle2=h.nextSibling }else{ pEle2=h.nextSibling.nextSibling; } pEle2.style.color='green'; //变成绿色 var newPara=document.createElement("p"); //这个p是标签的类型名字,不是标签的id。 var txt=document.createTextNode("Hahahaha");//添加文字 h.parentNode.appendChild(newPara); //动态添加节点 newPara.appendChild(txt); </script> <table> <tr> <td>One</td> <td>Two</td> </tr> <tr> <td>Three</td> <td>Four</td> </tr> </table> </body> </html>
【输出】
【解析】由于“DuanLuo”和“Hahahaha”同属<head>标签结点下的同一层次的<p>结点,如果要将同一层次的节点显示的顺序替换,可以使用“document.body.insertBefore(newPara,pEle2); ”变成下图:
<!DOCTYPE html> <html> <head> <title>Table Demo</title> </head> <body> <script type="text/javascript"> //line 1 //生成节点元素 var tab = document.createElement("table"); tab.setAttribute("border","1"); //定义表格的样式 var tr = document.createElement("tr"); var td = document.createElement("td"); var td2 = document.createElement("td"); //生成节点的文字 var cell1 = document.createTextNode("Car"); var cell2 = document.createTextNode("1000"); //完成父子关系 document.body.appendChild(tab); //body下添加节点 tab.appendChild(tr); tr.appendChild(td); tr.appendChild(td2); td.appendChild(cell1); td2.appendChild(cell2); //Line 2 //生成节点和文本节点 var tr = document.createElement("tr"); var td = document.createElement("td"); var td2 = document.createElement("td"); var cell3 = document.createTextNode("bike"); var cell4 = document.createTextNode("200"); //完成父子关系 tab.appendChild(tr); tr.appendChild(td); tr.appendChild(td2); td.appendChild(cell3); td2.appendChild(cell4); </script> </body> </html>
【输出】