DOM,全称documention,文档意思 ，就是把整个html文档当成一个对象来操作，里面有很多方法，如getElementByid(),getElementByid().innerText();.....
当然对象也可以嵌套。
查找 直接查找 var obj = document.getElementById('i1') 间接查找 文件内容操作： innerText 仅文本 innerHTML 全内容，包括标签 value input value获取当前标签中的值 select 获取选中的value值（selectedIndex） textarea value获取当前标签中的值 搜索框的示例
输入框获取焦点，默认值消失，如果没有输入值，焦点离开，输入框默认值又会回来。 <input type="text" onfocus="Focus();" onblur="Blur();" id="i1" style="color: #dddddd;" value="请输入关键字"/> <input type="text" placeholder="请输入关键字" /> <!--html5新属性placeholder直接实现，当输入框内有内容，默认值不显示，没内容又显示--> <script> function Focus() { var tag = document.getElementById("i1"); var val = tag.value; if(val == "请输入关键字"){ tag.value = ""; } } function Blur() { var tag = document.getElementById("i1"); var val = tag.value; if(val.length == 0){ tag.value = "请输入关键字"; } } </script>
CLASS 样式表操作：
obj.className;获取当前样式列表，以字符串显示，即class="c1 c2 c3",中的c1 c2 c3内容。
obj.classList;获取当前样式列表，以数组显示。
obj.className="c3 d4",重新指定样式
obj.classList.add('c1');添加样式集
obj.classList.remove('c3');删除新式集
以下是小力度修改，添加单个样式。
obj.style.fontSize = '16px';
obj.style.backgroundColor = 'red';
obj.style.color = "red";
注意：在style中样式是以中杠连接的，到Js中换成驼峰式书写，首单词小写，第二个单词首字母大写。
属性操作：
obj.attributes;获取对象的所有属性
obj.getAttribute('id');获取id属性的值
obj.removeAttribute('id');删除id属性
obj.setAttribute('id','i1');设置 标签属性和值。
标签操作：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input onclick="Add();" type="submit" value="添加" > 9 <input onclick="Add2();" type="submit" value="添加2" > 10 <div id="i1"> 11 <hr> 12 <p>123</p> 13 </div> 14 <script> 15 16 17 //第一种方法，把标签写成字符串加 18 19 function Add() { 20 var tag = "<p><input type='text' value='test' /></p>"; 21 var obj = document.getElementById('i1'); 22 //obj.insertAdjacentHTML("beforeEnd",tag); //在当前标签的所有子标签之后加，加在当前标签的内部 23 //obj.insertAdjacentHTML("afterBegin",tag); //在当前标签的所有子标签之前加，加在当前标签的内部 24 //obj.insertAdjacentHTML("beforeBegin",tag); //在当前标签之前加，加在当前标签的兄弟标签层 25 obj.insertAdjacentHTML("afterEnd",tag); //在当前标签之后加，加在当前标签的兄弟标签层 26 } 27 28 29 //第二种方法，把标签写成对象串加 30 31 function Add2() { 32 var tag = document.createElement('input'); 33 var p = document.createElement('p'); 34 tag.setAttribute('value',"test2"); 35 p.appendChild(tag); 36 var obj = document.getElementById('i1'); 37 obj.insertAdjacentElement("afterBegin",p); 38 // obj.appendChild(tag); //在当前标签内追加子标签 39 // obj.insertBefore(tag,obj.children[1]) //在当前标签内的指定孩子后加标签 40 } 41 </script> 42 </body> 43 </html>
利用DOM变相实现各类标签都能提交表单：
1 <form id="f1" action="https://baidu.com" method="get"> 2 <input type="text" > 3 <input type="submit" value="提交" > 4 <a onclick="Submit();">点我</a> 5 </form> 6 <script> 7 function Submit() { 8 document.getElementById('f1').submit(); 9 } 10 </script>