JS-DOM与表单操作
一DOM 元素节点操作
1. 创建节点和插入节点
很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可
以通过以下几种方式创建新节点
image.png
document.write()在加载文档时使用，会和当前文档使用同一个document对象，所以写入的内容会显示在原来的内容之后；
document.write()在加载文档之后使用（点击按钮触发事件使用），此时document是一个新的对象，会将原来的document对象覆盖，所以原来页面中的内容也会被覆盖。
不要在使用document.write()方法之后去获取元素节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建节点、插入节点</title>
</head>
<body>
<button onclick="addPara();">添加段落</button>
<button onclick="addImg();">添加图片</button>
<button onclick="addTxt();">添加文本框</button>
<button onclick="addOptions()">添加选项</button>
<select name="music" id="mymusic">
<option value="-1">你心内的一首歌</option>
<option value="0">南山南</option>
<option value="1">喜欢你</option>
</select>
<hr />
<div id = "container" style="border: solid 1px pink;"></div>
</body>
<!--
创建节点
方法 描述
createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode() 创建一个文本节点，可以传入文本内容
innerHTML 也能达到创建节点的效果，直接添加到指定位置了
插入节点
方法 描述
write() 将任意的字符串插入到文档中
document.write()在加载文档时使用，会和当前文档使用同一个document对象，所以写入的内容会显示在原来的内容之后；
document.write()在加载文档之后使用（点击按钮触发事件使用），此时document是一个新的对象，会将原来的document对象覆盖，所以原来页面中的内容也会被覆盖。
不要在使用document.write()方法之后去获取元素节点
appendChild() 向元素中添加新的子节点，作为最后一个子节点
insertBefore() 向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点
需要参考父节点
-->
<script type="text/javascript">
/* 添加“段落、图片、文本框、选项” */
// 得到div元素 （获取容器）
var mydiv = document.getElementById("container");
/**
* 添加 段落
*/
function addPara() {
/* 方式一： */
// 创建p元素
var p = document.createElement("p");
// 创建文本节点
var ptxt = document.createTextNode("哈哈哈哈");
// 将文本节点追加到p元素节点里面的最后
p.appendChild(ptxt);
console.log(p);
// 将p元素节点追击到指定容器中
mydiv.appendChild(p);
/*方式二*/
// 创建p元素
var p2 = document.createElement("p");
// 给p标签赋值
p2.innerHTML = "嘻嘻嘻嘻嘻";
// 将p标签追击到指定容器中 appendChild(节点)
mydiv.appendChild(p2);
/*方式三*/
var p3 = "<p>嘿嘿嘿嘿</p>";
mydiv.innerHTML += p3;
}
/**
* 添加图片
*/
function addImg() {
/*方式一*/
// 创建img元素节点
var img = document.createElement("img");
// 设置img元素属性节点
img.src = "img/jay.jpg";
// 设置图片的宽高
img.width = 200;
img.height = 200;
// 将img元素节点追加到div中
mydiv.appendChild(img);
/*方式二*/
// 创建img元素节点
var img2 = document.createElement("img");
// 设置img元素属性节点
img2.setAttribute("src","img/jay.jpg");
// 设置图片的宽高
img2.style.width = "200px";
img2.setAttribute("height",200);
// 将img元素节点追加到div中
mydiv.appendChild(img2);
/*方式三*/
var img3 = "<img src='img/jay.jpg' width=200 height=200 />";
mydiv.innerHTML += img3;
}
/**
* 添加文本框
*/
function addTxt() {
/*方式一*/
// 创建input元素节点
var ipt = document.createElement("input");
// 设置input的类型
ipt.type = "text";
// 给文本框赋值
ipt.value = "Hello";
// 将img元素节点追加到div中
mydiv.appendChild(ipt);
console.log(ipt);
/*方式二*/
// 创建input元素节点
var ipt2 = document.createElement("input");
// 设置input的类型
ipt2.setAttribute("type","text");
// 给文本框赋值
ipt2.setAttribute("value","你好");
// 将img元素节点追加到div中
mydiv.appendChild(ipt2);
/*方式二*/
var ipt3 = "<input type='text' value='hahahah'/>";
console.log(mydiv.innerHTML);
mydiv.innerHTML += ipt3;
}
/**
* 添加下拉选项
*/
function addOptions() {
// 得到下拉框选项
var mymusic = document.getElementById("mymusic");
/*方式一*/
var opt = document.createElement("option");
// 设置opt的value和文本值
opt.value = mymusic.options.length-1;
opt.text = "晴天";
console.log(opt);
// 将下拉选项放置到下拉列表中
//mymusic.appendChild(opt);
/*方式二*/
// 通过下拉列表的options属性设置下拉选项
mymusic.options.add(opt);
/*方式三*/
var opt2 = "<option value='"+mymusic.options.length+"'>不能说的秘密</option>";
mymusic.innerHTML += opt2;
}
/**
insertBefore() 向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点
需要参考父节点
*/
// div.parentElement : div的父元素
var div = document.createElement("div");
div.innerHTML = "我是放在你前面的元素...";
console.log(mydiv.parentElement);
console.log(mydiv.parentNode);
mydiv.parentElement.insertBefore(div,mydiv);
</script>
</html>
2. 间接查找节点
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>间接查找节点</title>
</head>
<body>
<div>
伯伯
</div>
<div id="div1">父亲<div>大儿子</div><div>二儿子</div><div>大女儿</div></div>
<div>
叔叔
</div>
</body>
<!--
间接查找节点
方法|属性 描述
childNodes () 返回元素的一个子节点的数组 （包括文本节点）
firstChild() 返回元素的第一个子节点
lastChild() 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点
-->
<script type="text/javascript">
// 得到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); // 上一个节点（包含文本节点）
</script>
</html>
3. 替换节点和克隆节点
image.png
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="test">程序员</p>
<button onclick="replaceNode()">替换</button>
<br /> <hr />
<ul id="music">
<li>晴天</li>
<li>青花瓷</li>
<li>等你下课</li>
</ul>
<button onclick="cloneValue()">克隆</button>
<div id="mydiv">
</div>
</body>
<!--
替换节点
方法|属性 描述
replaceChild(newNode,oldNode) 用新的节点替换旧的节点
oldNode.parentNode.replaceChild(newNode,oldNode)
首先通过旧节点定位到父节点，然后用新的节点替换旧节点
克隆节点
方法|属性 描述
cloneNode() 复制节点
var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true：深度克隆，可以克隆结构和内容
false(默认值)：只克隆结构
-->
<script type="text/javascript">
/**
* 替换元素
*/
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);
}
</script>
</html>
4. 删除节点
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM增删改查实例</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" style="border-collapse: collapse;" >
<tr>
<td colspan="5"><input type="button" value="添加"/> </td>
</tr>
<tr>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr id="tr_1">
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td>
<button onclick="updateTr(this)">修改</button>
|
<button onclick="deleteTr(this)">删除</button>
</td>
</tr>
<tr id="tr_2">
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td>
<button onclick="updateTr(this)">修改</button>
|
<button onclick="deleteTr(this)">删除</button>
</td>
</tr>
<tr id="tr_3">
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td>
<button onclick="updateTr(this)">修改</button>
|
<button onclick="deleteTr(this)">删除</button>
</td>
</tr>
<tr id="tr_4">
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td>
<button onclick="updateTr(this)">修改</button>
|
<button onclick="deleteTr(this)">删除</button>
</td>
</tr>
</table>
<br /><hr /><br />
<div id="updateDom" style="display: none;">
<table width="300" align="center" >
<tr>
<th>分类ID</th>
<th><input type="text" id="typeId" readonly="readonly" /></th>
</tr>
<tr >
<th>分类名称</th>
<th><input type="text" id="typeName" /></th>
</tr>
<tr>
<th>分类描述</th>
<th><input type="text" id="remark" /></th>
</tr>
<tr>
<th> </th>
<th><input type="button" value="修改" onclick="updateData()" /></th>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
/**
* 删除行记录
*/
function deleteTr(_this) {
console.log(_this.parentNode.parentNode);
// _this指代的是当前点击的按钮对象
// _this.parentNode.parentNode ： 得到按钮的父元素td，再得到td的父元素tr
var tr = _this.parentNode.parentNode;
// 通过removeChild()方法删除指定tr
tr.parentNode.removeChild(tr);
}
/**
* 修改信息
* @param {Object} _this
*/
function updateTr(_this) {
// 得到修改的记录的数据
var tr = _this.parentNode.parentNode;
// 获取tr的所有元素子节点
var childNodes = tr.children;
// 获取td的文本值
var typeId = childNodes[0].innerText;
var typeName = childNodes[1].innerText;
var remark = childNodes[2].innerText;
// 将获取到的值填充到修改的文本框中
document.getElementById("typeId").value = typeId;
document.getElementById("typeName").value = typeName;
document.getElementById("remark").value = remark;
// 显示隐藏的div元素
document.getElementById("updateDom").style.display = "block";
}
/**
* 修改指定行的数据
*/
function updateData () {
// 获取要修改的记录的ID
var typeId = document.getElementById("typeId").value;
// 得到要修改的tr对象
var tr = document.getElementById("tr_" + typeId);
console.log(tr);
// 获取当前tr对象的所有子元素
var tds = tr.children;
// 修改第二个单元格和第三个单元格的值
tds[1].innerHTML = document.getElementById("typeName").value;
tds[2].innerHTML = document.getElementById("remark").value;
// 隐藏修改的div
document.getElementById("updateDom").style.display="none";
}
</script>
</html>
二、JS表单操作
1 获取表单
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取表单</title>
</head>
<!--
获取表单
1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; //从 0 开始
-->
<body>
<form id='myform' name="myform" action="/" method="post">
</form>
<form id='myform2' name="myform2" action="" method="post">
</form>
</body>
<script type="text/javascript">
/* 获取表单*/
//1document.表单名称
console.log(document.myform);
// 2.document.getElementById(表单 id);
console.log(document.getElementById("myform"));
// 4获取文档做所有的表单集合
console.log(document.forms);
// 5、document.forms[表单名称]
console.log(document.forms["myform2"]);
// 6、document.forms[索引]; //从 0 开始
console.log(document.forms[1]);
</script>
</html>
2. 获取 input 的元素
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取input元素实例</title>
</head>
<!--
获取 input 的元素
如 text password hidden textarea 等，前两种常用。
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 type="text/javascript">
/*
获取元素内容
*/
function getTxt(){
//获取表单对象
var myfrom=document.myform;//表单name属性值
console.log(myfrom);
/*获取表单元素*/
//1.通过id获取document.getElementById(元素 id);
console.log(document.getElementById("uname"));
console.log(document.getElementById("uname").value);
//2通过 form.名称形式获取: myform.元素名称; name 属性值
console.log(myform.upwd);
console.log(myform.upwd.value);
//3.通过name获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
console.log(document.getElementsByName("uno")[0]);
console.log(document.getElementsByName("uno")[0].value);
//4.通过tagName数组 :document.getElementsByTagName('input')[索引] //从 0 开始
console.log(document.getElementsByTagName("textarea")[0]);
console.log(document.getElementsByTagName("textarea")[0].value);
}
</script>
</html>
3. 获取 单选按钮
前提：将一组单选按钮设置相同的 name 属性值
(1)获取单选按钮组：
document.getElementsByName("name 属性值");
(2)遍历每个单选按钮，并查看单选按钮元素的 checked 属性
若属性值为 true 表示被选中，否则未被选中
选中状态设定： checked='checked' 或 checked='true' 或 checked
未选中状态设定： 没有 checked 属性 或 checked='false'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取单选按钮</title>
</head>
<!--
获取 单选按钮
前提：将一组单选按钮设置相同的 name 属性值
(1)获取单选按钮组：
document.getElementsByName("name 属性值");
(2)遍历每个单选按钮，并查看单选按钮元素的 checked 属性
若属性值为 true 表示被选中，否则未被选中
选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定： 没有 checked 属性 或 checked=’false’
-->
<body>
<form action="" name="myform">
性别 :
<input type="radio" name="sex" value="1" checked="checked" /> 男
<input type="radio" name="sex" value="2" /> 女
</form>
</body>
<script type="text/javascript">
/*获取一组单选按钮**/
var radios=document.getElementsByName("sex");
//遍历数组，得到选中项的值
for( var i=0;i<radios.length;i++){
//判断是否被选中
if(radios[i].checked){
console.log("选中的值是："+radios[i].value);
}else{
console.log("未选中的值是："+radios[i].value);
}
}
</script>
</html>
4. 获取 多选按钮
操作方式与单选同理，不同之处在于可以多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取多选按钮</title>
</head>
<!--
获取 多选按钮
前提：将一组多选按钮设置相同的 name 属性值
(1)获取多选按钮组：
document.getElementsByName("name 属性值");
(2)遍历每个多选按钮，并查看多选按钮元素的 checked 属性
若属性值为 true 表示被选中，否则未被选中
选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定： 没有 checked 属性 或 checked=’false’
-->
<body>
<form action="" name="myform">
爱好 :
<input type="checkbox" name="hobby" value="singing" checked="checked" /> 唱歌
<input type="checkbox" name="hobby" value="dancing" /> 跳舞
<input type="checkbox" name="hobby" value="rapping" checked/> 打太极
</form>
</body>
<script type="text/javascript">
/*获取一组多选按钮*/
var checkboxs=document.getElementsByName("hobby");
var cks="";
//遍历数组，得到选中项的值
for (var i=0;i<checkboxs.length;i++){
//判断是否被选中
if(checkboxs[i].checked){
console.log("选中的值是："+checkboxs[i].value);
cks+=checkboxs[i].value+",";
}else{
console.log("未选中的值是："+checkboxs[i].value);
}
}
//截取字符串
cks=cks.substring(0,cks.length-1);
console.log("选中的值为："+cks);
</script>
</html>
5. 获取下拉选项
（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 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取下拉框</title>
</head>
<!--
获取下拉选项
（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");
console.log(sel);
// （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>
</html>
6. 提交表单
（1）使用普通 button 按钮+onclick 事件+事件中编写代码:
获取表单.submit();
（2）使用 submit 按钮 + onclick="return 函数()" +函数编写代码:
最后必须返回： return true|false;
（3）使用 submit 按钮/图片提交按钮 + 表单 onsubmit="return 函数();"
+函数编写代码:
最后必须返回： return true|false;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交表单</title>
</head>
<!--
注：提交表单时，表单元素必须设置name属性值
提交类型：
get请求
参数会直接跟在地址栏后面显示，请求参数的长度有限，相对post而言不安全，不会自动刷新缓存；每次访问时优先获取缓存中的数据，所以请求速度快。
post请求 （需要服务器的支持）
参数不会跟在地址栏后面显示，请求参数长度不限（其实是有长度限制，与服务器相关），相对而言安全，会自动刷新缓存；请求速度相对而言慢。
通常做查询操作，使用GET请求；增删改使用POST请求。
-->
<body>
<form action="/www.baidu.com" method="get">
姓名：<input type="text" name="uname" />
<input type="submit" value="提交" onclick="return checkForm1()"/>
</form>
<form action="/www.baidu.com" 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>
</body>
<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>
</html>
转载于:https://www.jianshu.com/p/ea785c7557c2