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');设置 标签属性和值。
标签操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input onclick="Add();" type="submit" value="添加" \>
<input onclick="Add2();" type="submit" value="添加2" \>
<div id="i1">
<hr>
<p>123</p>
</div>
<script> //第一种方法，把标签写成字符串加 function Add() {
var tag = "<p><input type='text' value='test' /></p>";
var obj = document.getElementById('i1');
//obj.insertAdjacentHTML("beforeEnd",tag); //在当前标签的所有子标签之后加，加在当前标签的内部
//obj.insertAdjacentHTML("afterBegin",tag); //在当前标签的所有子标签之前加，加在当前标签的内部
//obj.insertAdjacentHTML("beforeBegin",tag); //在当前标签之前加，加在当前标签的兄弟标签层
obj.insertAdjacentHTML("afterEnd",tag); //在当前标签之后加，加在当前标签的兄弟标签层
} //第二种方法，把标签写成对象串加 function Add2() {
var tag = document.createElement('input');
var p = document.createElement('p');
tag.setAttribute('value',"test2");
p.appendChild(tag);
var obj = document.getElementById('i1');
obj.insertAdjacentElement("afterBegin",p);
// obj.appendChild(tag); //在当前标签内追加子标签
// obj.insertBefore(tag,obj.children[1]) //在当前标签内的指定孩子后加标签
}
</script>
</body>
</html>
利用DOM变相实现各类标签都能提交表单：
<form id="f1" action="https://baidu.com" method="get">
<input type="text" \>
<input type="submit" value="提交" \>
<a onclick="Submit();">点我</a>
</form>
<script>
function Submit() {
document.getElementById('f1').submit();
}
</script>