一、概念
1、DOM
DOM：Document Object Model 文档对象模型
要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作 htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM 即文档对象模型描 绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于 javascript 的核心地位上。
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚 本中对HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
2、节点
加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这 种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类 型的节点：
节点类型 HTML内容 例如
文档节点 文档本身 整个文档document
元素节点 所有的HTML元素 a、div、p
属性节点 HTML元素内的属性 id、href、name、class
文本节点 元素内的文本 hello
注释节点 HTML中的注释 <!-- -->
clipboard1.png
二、元素节点的操作
当 HTML 文档在被解析为一颗 DOM 树以后，里面的每一个节点都可以看做是一个一个的 对象，我们成为 DOM 对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或 者一类节点对象，可以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删 除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合事件使用，就能让我 们的页面在特定时机、特定的事件下执行特定的变换。
- 获取节点
在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可 以通过 Document 对象提供的方法，查找、定位某个对象（也就是我们说的节点）。
注意：操作 dom 必须等节点初始化完毕后，才能执行。处理方式两种:
（1）把 script 调用标签移到 html 末尾即可；
（2）使用 onload 事件来处理 JS，等待 html 加载完毕再加载 onload 事件里的 JS。
方法 描述
getElementById() 根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准
getElementsByTagName() 根据标签名获取 dom 对象数组
getElementsByClassName() 根据样式名获取 dom 对象数组
getElementsByName() 根据 name属性值获取 dom 对象数组，常用于多选获取值
- 创建节点和插入节点
* 创建节点
方法 描述
createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode() 创建一个文本节点，可以传入文本内容 innerHTML
也能达到创建节点的效果，直接添加到指定位置了
* 插入节点
方法 描述
write() 将任意的字符串插入到文档中
appendChild() 向元素中添加新的子节点，作为最后一个子节点
insertBefore() 向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点 需要参考父节点
/**
* 替换元素
*/
function replaceNode() {
// oldNode.parentNode.replaceChild(newNode,oldNode)
// 首先通过旧节点定位到父节点，然后用新的节点替换旧节点
var cxy = document.getElementById("test");
// 创建新节点
var span = document.createElement("span");
span.innerHTML = "攻城狮";
cxy.parentNode.replaceChild(span,cxy);
}
/**
* cloneNode() 复制节点
var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true：深度克隆，可以克隆结构和内容
false(默认值)：只克隆结构
*/
function cloneValue() {
// 得到被克隆的对象
var cloneValue = document.getElementById("music");
var newValue = cloneValue.cloneNode(false); // 浅度克隆，只克隆结构
console.log(newValue);
var deepValue = cloneValue.cloneNode(true); // 克隆结构及内容
console.log(deepValue);
// 将克隆好的结果追加到div中
document.getElementById("mydiv").appendChild(deepValue);
}
- 间接查找节点
方法|属性 描述
childNodes () 返回元素的一个子节点的数组
firstChild() 返回元素的第一个子节点
lastChild() 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点
// 得到div对象
var div1 = document.getElementById("div1");
// childNodes () 返回元素的一个子节点的数组
console.log(div1.childNodes);
// firstChild() 返回元素的第一个子节点
console.log(div1.firstChild);
// lastChild() 返回元素的最后一个子节点
console.log(div1.lastChild);
// parentNode 返回元素的父节点
console.log(div1.parentNode);
// nextSibling 返回元素的下一个兄弟节点
console.log(div1.nextElementSibling); // 下一个元素节点（元素）
console.log(div1.nextSibling); // 下一个节点（包含文本节点）
// previousSibling 返回元素的上一个兄弟节点
console.log(div1.previousElementSibling); // 上一个元素节点（元素）
console.log(div1.previousSibling); // 上一个节点（包含文本节点）
- 替换节点
方法|属性 描述
replaceChild(newNode,oldNode) 用新的节点替换旧的节点
oldNode.parentNode.replaceChild(newNode,oldNode)
首先通过旧节点定位到父节点，然后用新的节点替换旧节点
- 克隆节点
方法|属性 描述
cloneNode() 复制节点
var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true：深度克隆，可以克隆结构和内容
false(默认值)：只克隆结构
- 删除节点
方法|属性 描述
removeChild() 从元素中移除子节点
三、表单操作
表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之 前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提 高用户的体验度。
1、获取表单
document.表单名称
document.getElementById(表单 id);
document.forms[表单名称]
document.forms[索引]; //从 0 开始
<body>
<form id='myform' name="myform" action="" method="post">
</form>
<form id='myform2' name="myform2" action="" method="post">
</form>
</body>
<script>
//四种方式 var form =document.getElementById("myform");
form =document.myform;
form =document.forms["myform"];
form =document.forms[0];
console.log(form);
</script>
2、获取元素
* 获取 input 的元素
1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称; name 属性值
3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] //从 0 开始
<body>
<form id='myform' name="myform" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/>
<br />
密码:<input type="password" id="upwd" name="upwd" value="123456" />
<br /> <input type="hidden" id="uno" name="uno" value="隐藏域" />
个人说明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt();" >
获取元素内容</button>
</form>
</body>
<script>
function getTxt(){
var uno =document.getElementById("uno");
var uname =myform.uname;
console.log(uname+"--------");
var upwd =document.getElementsByTagName('input')[1] ;
var intro =document.getElementsByName("intro")[0];
alert(uno.value+"-->"+uname.value +"-->"+upwd.value+"->"+intro.value);
}
</script>
* 获取 单选按钮
前提：将一组单选按钮设置相同的 name 属性值
(1)获取单选按钮组： document.getElementsByName("name 属性值");
(2)遍历每个单选按钮，并查看单选按钮元素的 checked 属性 若
属性值为 true 表示被选中，否则未被选中
选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定： 没有 checked 属性 或 checked=’false’
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="radio" name="rad" value="1" /> 1
<input type="radio" name="rad" value="2" /> 2
</form>
<script type="text/javascript">
var radios = document.getElementsByName('rad')
//radios[0].checked = 'checked'
for(var i=0; i<radios.length; i++){
console.log(radios[i].checked + '---' + radios[i].value)
}
</script>
* 获取 多选按钮
操作方式与单选同理，不同之处在于可以多选
var ufav=document.getElementsByName("ufav"); var favstr="";
for (i=0;i<ufav.length;i++){
if(ufav[i].checked){
favstr+=ufav[i].value+",";
}
}
favstr =favstr.substr(0,favstr.length-1);
* 获取下拉选项
（1）获取 select 对象： var ufrom = document.getElementById("ufrom");
（2）获取选中项的索引： var idx=ufrom.selectedIndex ;
（3）获取选中项 options 的 value 属性值：
var val = ufrom.options[idx].value;
注意：当通过 options 获取选中项的 value 属性值时，
若没有 value 属性，则取 option 标签的内容
若存在 value 属性，则取 value 属性的值
（4）获取选中项 options 的 text：
var txt = ufrom.options[idx].text;
选中状态设定：selected='selected'、selected=true、selected
未选中状态设定：不设 selected 属性
<body>
来自:
<select id="ufrom" name="ufrom" >
<option value="-1" >请选择</option>
<option selected="selected">北京</option>
<option value="1" >上海</option>
</select><br />
</body>
<script type="text/javascript">
// （1）获取 select 对象
var sel = document.getElementById("ufrom");
// （2）获取选中项的索引
var selectIndex = sel.selectedIndex;
console.log("当前选中项的索引：" + selectIndex);
// （3）获取选中项 options 的 value 属性值
var value1 = sel.value;
var value2 = sel.options[selectIndex].value;
console.log("当前选中项的值：" + value1 + "," + value2);
// （4）获取选中项 options 的 text
var text1 = sel.options[selectIndex].innerHTML;
var text2 = sel.options[selectIndex].text;
console.log("当前选中项的文本：" + text1 + "," + text2);
</script>
3、提交表单
注：提交表单时，表单元素必须设置name属性值
提交类型：
get请求
参数会直接跟在地址栏后面显示，请求参数的长度有限，相对post而言不安全，
不会自动刷新缓存；每次访问时优先获取缓存中的数据，所以请求速度快。
post请求 （需要服务器的支持）
参数不会跟在地址栏后面显示，请求参数长度不限（其实是有长度限制，
与服务器相关），相对而言安全，会自动刷新缓存；请求速度相对而言慢。
通常做查询操作，使用GET请求；增删改使用POST请求。
提交表单
（1）使用普通 button 按钮+onclick 事件+事件中编写代码:
获取表单.submit();
（2）使用 submit 按钮 + onclick="return 函数()" +函数编写代码:
最后必须返回：return true|false;
（3）使用 submit 按钮/图片提交按钮 + 表单 onsubmit="return 函数();" +函数编写代码:
最后必须返回：return true|false;
<form action="01-获取表单.html" method="get">
姓名：<input type="text" name="uname" />
<input type="submit" value="提交" onclick="return checkForm1()"/>
</form>
<form action="01-获取表单.html" method="get" onsubmit="return checkForm2()">
姓名：<input type="text" name="uname" />
<input type="submit" value="提交" />
</form>
<form action="01-获取表单.html" method="get" >
姓名：<input type="text" name="uname1" />
<input type="button" value="提交" onclick="checkForm3()" />
<span id="msg" style="font-size: 12px;color: red;"></span>
</form>
<script type="text/javascript">
/*提交方式一：submit按钮 + onclick事件*/
// 给submit按钮绑定点击事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
//如果return true，则提交表单；return false不提交；若直接return也会提交表单
function checkForm1() {
//return true; // 提交表单
return false; // 不提交表单
//return; // 无效，不会阻止表单提交
}
/*提交方式二：submit按钮 + onsubmit事件*/
// 给表单对象绑定onsubmit事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
//如果return true，则提交表单；return false不提交；若直接return也会提交表单
function checkForm2() {
return true; // 提交表单
//return false; // 不提交表单
//return; // 无效，不会阻止表单提交
}
/*提交方式三：button按钮+点击事件*/
// 给button按钮绑定点击事件，调用时需要使用"函数名()"，如果满足要求则手动提交表单，否则return
function checkForm3() {
var uname = document.getElementsByName("uname1")[0].value;
if ( uname == null || uname.trim() == "") {
console.log("用户名不能为空！");
document.getElementById("msg").innerHTML = "用户名不能为空！";
return;
}
// 手动提交表单
document.forms[2].submit();
}
</script>
转载于:https://www.jianshu.com/p/eae50f3a5a74