1、标签元素的操作：使用对象调用hasChildNodes()方法判断对象是否含有子节点；有返回true,没有返回false
案例如下：
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="清华大学100周年_1" id="tid_1"/><br>
<input type="text" name="tname" value="清华大学100周年_2" id="tid_2"/><br>
<input type="text" name="tname" value="清华大学100周年_3" id="tid_3"/><br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected" >本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<select name="job" id="job" >
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
</body>
<script type="text/javascript">
//查看id="edu"的节点是否含有子节点
//1.获取id是edu的标签对象
var eduEle = document.getElementById("edu");
//2.使用对象的hasChildNodes方法判断对象是否含有子节点;有返回true,没有返回false
var b = eduEle.hasChildNodes();
alert(b);//true
//查看id="tid_1"的节点是否含有子节点
//链式编程
alert(document.getElementById("tid_1").hasChildNodes());//false
</script>
</html>
2、标签元素的操作：使用父节点对象调用removeChild(子节点对象)，删除子节点对象
案例如下：
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
</body>
<script type="text/javascript">
//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
//1.获取id是city的父节点对象
//var cityEle = document.getElementById("city");
//2.获取id是bj的子节点对象
var bjEle = document.getElementById("bj");
//3.使用父节点对象调用removeChild(子节点对象),删除子节点对象
//cityEle.removeChild(bjEle);
//document.getElementById("city").removeChild(document.getElementById("bj"));
//获取北京的父节点
//使用子节点的属性parentNode获取父节点对象
var ulEle = bjEle.parentNode;
//alert(ulEle);//[object HTMLUListElement]
alert(ulEle.tagName)//UL
</script>
</html>
说明：先得拿到子节点这一对象，再通过父节点调用removeChild(子节点对象)，删除子节点对象。
可使用匿名对象、链式编程操作。
3、标签元素的操作：使用父节点对象中的方法replaceChild(新的子节点对象,被替换的节点对象)
案例如下：
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
<li id="bj" value="beijing" onclick="bjOnclick()">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing"> 重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fankong">反恐精英</li>
<li id="ms" value="moshou">魔兽</li>
<li id="cq" value="chuanqi">传奇</li>
</ul>
</body>
<script type="text/javascript">
//点击北京节点， 将被反恐节点替换
//定义鼠标单击事件的响应函数
function bjOnclick(){
//可以使用父节点对象中的方法replaceChild(新的子节点对象,被替换的节点对象);
//1.获取bj的父节点id是city的对象
var cityEle = document.getElementById("city");
//2.获取被替换的id是北京的节点对象
var bjEle = document.getElementById("bj");
//3.获取新的子节点id是fk的对象
var fkEle = document.getElementById("fk");
cityEle.replaceChild(fkEle,bjEle);//剪切替换
}
</script>
</html>
注：此替换方法是剪切替换。
4、标签元素的操作：使用document对象中的方法createElement(“标签名称”)创建指定标签的对象
案例如下：
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fangkong">反恐</li>
<li id="ms" value="moshou">魔兽</li>
<li id="xj" value="xingji">星际争霸</li>
</ul>
</body>
<script type="text/javascript">
//增加城市节点 <li id="tj" value="tianjin">天津</li>放置到city下
//1.使用document对象中的方法createElement("标签名称")创建指定标签的对象
var tjEle = document.createElement("li");//<li></li>
//2.使用对象的setAttribute方法给标签对象添加id和value属性
tjEle.setAttribute("id","tj");//<li id="tj"></li>
tjEle.setAttribute("value","tianjin");//<li id="tj" value="tianjing"></li>
//3.使用对象的innerHTML属性给标签添加标签体
tjEle.innerHTML = "天津";// <li id="tj" value="tianjin">天津</li>
//4.使用父节点对象city里边的方法appendChild(子节点对象),把子节点对象追加到父节点中
document.getElementById("city").appendChild(tjEle);
</script>
</html>
说明：createElement(“标签名称”)方法结合setAttribute（“属性名”，“属性值”）方法来添加某些属性及属性值。使用innerHTML属性给标签添加标签体。使用父节点调用方法appendChild(子节点对象)，把子节点对象追加到父节点中。
5、标签元素的操作：使用父节点对象中的方法insertBefore(新的子节点,指定的字点),把新的子节点对象,添加到指定的子节点的前面
案例如下：
<html>
<head>
<title>form.html</title>
<meta charset="UTF-8">
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
</body>
<script type="text/javascript">
// 在重庆前面插入新的节点 <li id="tj" name="tianjin">天津</li>
//1.创建li标签对象,设置属性和标签体
var tjEle = document.createElement("li");//<li></li>
tjEle.setAttribute("id","tj");//<li id="tj"></li>
tjEle.setAttribute("value","tianjin");//<li id="tj" value="tianjing"></li>
tjEle.innerHTML = "天津";// <li id="tj" value="tianjin">天津</li>
//2.获取id是cq的标签对象
var cqEle = document.getElementById("cq");
//3.使用父节点对象city中的方法insertBefore(新的子节点,指定的字点),
//把新的子节点对象,添加到指定的子节点的前面
document.getElementById("city").insertBefore(tjEle,cqEle);
</script>
</html>
说明：
appendChild（“子节点”）是追加到后面（父节点内部所有元素的后面）
insertBefore(新的子节点，指定的字点)指的是插入到指定的子节点前面