当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
每加载一个标记 注释 或者属性，就将其当做节点（node）。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
1) getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
<html> <head> <script type="text/javascript"> function getValue() { var x=document.getElementById("myHeader") alert(x.innerHTML) } </script> </head> <body> <h1 id="myHeader" onclick="getValue()">这是标题</h1> <p>点击标题，会提示出它的值。</p> </body> </html>
2) getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
<html> <head> <script type="text/javascript"> function getElements() { var x=document.getElementsByTagName("input"); alert(x.length); } </script> </head> <body> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <br /> <input type="button" onclick="getElements()" value="How many input elements?" /> </body> </html>
3) getElementsByName() 方法可返回带有指定名称的对象的集合。
注意一下（不兼容） 在ie它只得到标准元素中有name属性的
FF chorem 都可以得到
建议getElementsByName 推荐使用针对表单的时候
<html> <head> <script type="text/javascript"> function getElements() { var x=document.getElementsByName("myInput"); alert(x.length); } </script> </head> <body> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <br /> <input type="button" onclick="getElements()" value="How many elements named 'myInput'?" /> </body> </html>
getElementByTagName(*)能得到所有元素节点，IE支持，不推荐使用。
兼容函数（getElementsByClassName）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function myGetElementsByClassName(className){ var els=[]; if(document.all){//只认识IE； // alert(IE); var elements=document.getElementsByTagName("*"); // alert(elements.length); for(var i=0;i<elements.length;i++){ if(elements[i].className==className){ els.push(elements[i]); } } } else{ els=document.getElementsByClassName(className); } return els; }; </script> </head> <body> <input type="button" class="input1" id="in" value="第一个"/><br/> <input type="button" class="input1" name="one" value="第二个"/><br/> <input type="button" class="input" name="two" value="第三个"/><br/> <input type="button" class="input" name="one" value="第四个"/><br/> <script> var els=document.getElementsByClassName("input"); // alert(els.length); for(var i=0;i<els.length;i++){ els[i].style.backgroundColor="blue"; } </script> </body> </html>
创建和操作节点；
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ border: 1px red solid; } #one{ width:100px; height: 100px; } #two{ width:50px; height: 50px; } </style> <script> window.onload=function(){ var bnt=document.getElementsByTagName('button')[0]; bnt.onclick=function(){ /*var p=document.createElement('p'); var text=document.createTextNode('你好'); p.appendChild(text); document.body.appendChild(p); */ //我们可以使用一个简便的方法就是使用innerHTML; var p=document.createElement('p'); p.innerHTML='<span>你好</span>';//这样可以直接添加很多的节点 document.body.appendChild(p);//添加节点 appendChild 默认是的从最后开始添加 var div = document.getElementById("one"); //删除节点 // document.body.removeChild(div); var div2 = document.getElementById("two"); // div.removeChild(div2); var div5 = document.createElement("div"); div5.innerHTML="div555"; //替换子节点 // div.replaceChild(div5,div2);//replaceChild(newnode,oldnode) //插入 div.insertBefore(div5,div2);//insertBefore(newnode,oldnode) // 复制节点(参数) true 会复制它的子节点 // false 只复制这个节点本事，但是不复制它的子节点 // var div6 = div2.cloneNode(false); //div.appendChild(div6); }; }; </script> </head> <body> <button>点击</button> <div id="one"> div1 <div id="two"> div2 </div> <div> div3 </div> <div> div4 </div> </div> </body> </html>