本节思维导图
先通过一个小案例来了解一个操作dom树。
案例:在列表末尾添加节点
<html>
<head>
<title>标题</title>
<script>
function add()
{
var ul1=document.getElementById("ulid");
var li1=document.createElement("li");//创建标签的方法
var text1=document.createTextNode("555");//创建文本的方法
li1.appendChild(text1);//将节点添加到节点末尾的方法
ul1.appendChild(li1);
}
</script>
</head>
<body>
<ul id="ulid">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<input type="button" value="add" onclick="add();">
</body>
</html>
Element对象:元素对象(标签对象)
方法:
getAttribute():获取标签的属性值
<input type="text" value="abc" id="text1">
<script>
var text1=document.getElementById("text1");
alert(text1.getAttribute("value"));
</script>
setAttribute():设置标签的属性值
<input type="text" value="abc" id="text1">
<script>
var text1=document.getElementById("text1");
text1.setAttribute("value","edg");
alert(text1.getAttribute("value"));
</script>
removeAttribute():从标签中删除指定属性
<input type="text" value="abc" id="text1">
<script>
var text1=document.getElementById("text1");
text1.removeAttribute("value");
alert(text1.getAttribute("value"));
</script>
Node对象:
属性:
nodeName:返回节点的名称
nodeType:返回节点的类型
nodeValue:返回节点的值,根据其类型
例子:
<ul id="ulid">
<li id="liid1">china</li>
<li id="liid2">england</li>
<li id="liid3">america</li>
<li id="liid4">japan</li>
</ul>
<script>
var li1=document.getElementById("liid1"); //获取liid1的对象
alert(li1.nodeType); //标签的TYPE为1
alert(li1.nodeName); //标签的NAME就是大写的标签名,这里是LI
alert(li1.nodeValue); //没有值,为null
var id1=li1.getAttributeNode("id");//getAttributeNode(),获取属性节点
alert(id1.nodeType); //属性节点的type为2
alert(id1.nodeName); //属性节点的name为小写的属性名称,这里是id
alert(id1.nodeValue); //属性的值,这里是liid1
var text1=li1.firstChild; //获取节点下的第一个子节点,这里用来获得文本节点
alert(text1.nodeType); //文本节点的type为3
alert(text1.nodeName); //文本节点的name为#text
alert(text1.nodeValue); //文本内容,这里是china
</script>
parentNode:返回节点的父节点
firstChild:返回节点的首个子节点
lastChild:返回节点的最后一个子节点
nextSibling:返回节点之后的同级节点
previousSibling:返回节点之前的同级节点
innerHTML属性:获取标签中的内容或者设置标签的内容。
获取标签中的内容
<ul id="ulid">
<li id="liid1" >china</li>
<li id="liid2">england</li>
<li id="liid3">america</li>
<li id="liid4">japan</li>
</ul>
<script>
var li1=document.getElementById("liid1");//获取li对象
alert(li1.innerHTML);//获取li里的文本内容,这里是china
</script>
设置标签中的内容(可以是html代码)
<div id="div1">
</div>
<script>
var div1=document.getElementById("div1");//获取div对象
div1.innerHTML="<table><tr><td>aaaaaaa</td></tr><tr><td>bbbbbb</td> </tr><tr><td>ccccccc</td></tr></table>";向div里写入表格
</script>
操作DOM树的方法:
appendChild():添加子节点到末尾
例子:
将一个div里的列表添加到另一个div中,appendChild方法的效果类似剪切效果,将第一个div里的列表剪切到第二个div中
<div id="div1">
<ul id="ulid">
<li id="liid1" >china</li>
<li id="liid2">england</li>
<li id="liid3">america</li>
<li id="liid4">japan</li>
</ul>
</div>
<div id="div2">
</div>
<script>
var ul1=document.getElementById("ulid");
var div1=document.getElementById("div2");
div1.appendChild(ul1);
</script>
insertBefore(newNode,oldNode):在指定的子节点前面插入新的子节点
例子:
<ul id="ulid">
<li id="liid1" >china</li>
<li id="liid2">england</li>
<li id="liid3">america</li>
<li id="liid4">japan</li>
</ul>
<script>
var ul1=document.getElementById("ulid");// 先获取父节点
var li3=document.getElementById("liid3");//获取指定的节点
var insert=document.createElement("li");//创建标签
var text=document.createTextNode("france");//创建文本
insert.appendChild(text);//将文本节点添加到标签节点下
ul1.insertBefore(insert,li3);//将新节点插入
</script>
removeChild():删除子节点
例子:
<ul id="ulid">
<li id="liid1" >china</li>
<li id="liid2">england</li>
<li id="liid3">america</li>
<li id="liid4">japan</li>
</ul>
<script>
var ul1=document.getElementById("ulid");//获取父节点
var li2=document.getElementById("liid2");//获取要删除的节点
ul1.removeChild(li2);//删除子节点
</script>
replaceChild(newNode,oldNode):替换节点
例子:
<ul id="ulid">
<li id="liid1" >china</li>
<li id="liid2">england</li>
<li id="liid3">america</li>
<li id="liid4">japan</li>
</ul>
<script>
var ul1=document.getElementById("ulid");//获取父节点
var li4=document.getElementById("liid4");//获取要替换的子节点
var li5=document.createElement("li");//创建新的元素
var text=document.createTextNode("canada");//创建文本节点
li5.appendChild(text);
ul1.replaceChild(li5,li4);//进行替换
</script>
cloneNode(boolean):复制节点(不常用)
值为true表示复制。
案例:动态显示时间
<div id="div1">
</div>
<script>
window.setInterval("getTime();",1000);//定时器,每隔一秒钟执行一次
function getTime()
{
var div1=document.getElementById("div1");//获取div,在div里显示
var date=new Date();//获取当前时间
div1.innerHTML=date.toLocaleString();//将div里的内容显示为当前时间
}
</script>
案例:实现复选框的全选反选练习
<html>
<head>
<title>标题</title>
</head>
<body>
<input type="checkbox" name="all" id="all" value="all" onclick="setall();">全选/全不选
<hr>
<input type="checkbox" name="aihao" value="aihao1">篮球
<hr>
<input type="checkbox" name="aihao" value="aihao2">足球
<hr>
<input type="checkbox" name="aihao" value="aihao3">滑雪
<hr>
<input type="checkbox" name="aihao" value="aihao4">游戏
<hr>
<input type="button" name="all1" value="全选" onclick="all1();">
<input type="button" name="all2" value="全不选" onclick="all2();">
<input type="button" name="fan" value="反选" onclick="fan();">
<script>
function all1() //按钮全选的方法
{
var arr=document.getElementsByName("aihao");//获取所有复选框
for(var i=0;i<arr.length;i++)
{
arr[i].checked=true;//复选框的checked属性为true时,表示被选中
}
}
function all2() //按钮全不选的方法
{
var arr=document.getElementsByName("aihao");
for(var i=0;i<arr.length;i++)
{
arr[i].checked=false;//复选框的checked属性为false时,表示没被选中
}
}
function setall() //复选框全选/全不选的方法
{
var arr1=document.getElementById("all");
if(arr1.checked==true)
{
all1();
}else
{
all2();
}
}
function fan() //按钮反选的方法
{
var arr=document.getElementsByName("aihao");
for(var i=0;i<arr.length;i++)
{
//对每个复选框进行遍历,取相反的状态,实现反选
if(arr[i].checked)
{
arr[i].checked=false;
}else
{
arr[i].checked=true;
}
}
}
</script>
</body>
</html>
案例:下拉列表左右选择练习
<html>
<head>
<title></title>
<style type="text/css">
div{
float:left;
}
div select{ //设置下拉列表的大小
width:100px;
height:200px;
}
span{ //设置span
display:block;
cursor:pointer;//当光标指向span时,出现手指的效果
background:gray;
margin:2px 2px;
}
</style>
</head>
<body>
<div>
<select multiple="multiple" name="1" id="1"> //select的multiple属性为显示全部下拉列表的内容
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
<option value="8">选项8</option>
</select>
<span id="add" onclick="right();">选中添加到右边>></span>
<span id="addall" onclick="rightall();">全部添加到右边>></span>
</div>
<div>
<select multiple="multiple" name="2" id="2">
<option value="1">选项9</option>
</select>
<span id="remove" onclick="left();"><<选中删除到左边</span>
<span id="removeall" onclick="leftall();"><<全部删除到左边</span>
</div>
<script>
function right() //将选中的列表项添加到右边下拉列表的方法
{
var select1=document.getElementById("1");
var select2=document.getElementById("2");
var options=select1.getElementsByTagName("option");
for(var i=0;i<options.length;i++)
{
var option=options[i];
if(option.selected==true)//当列表项被选中时,selected为true,这里判断选中的列表项
{
select2.appendChild(option);将列表项添加到右边的列表
i--;//因为列表的长度不断变小,当列表项被添加到右边时,列表长度减一,这时候i是增加的,就会遗漏一些列表项,所以需要i--,让i一直从0开始
}
}
}
function left()//将选中的列表项添加到第一个列表
{
var select1=document.getElementById("1");
var select2=document.getElementById("2");
var options=select2.getElementsByTagName("option");
for(var i=0;i<options.length;i++)
{
var option=options[i];
if(option.selected==true)
{
select1.appendChild(option);
i--;
}
}
}
function rightall()//将第一个列表所有列表项添加到第二个列表
{
var select1=document.getElementById("1");
var select2=document.getElementById("2");
var options=select1.getElementsByTagName("option");
for(var i=0;i<options.length;i++)
{
var option=options[i];
select2.appendChild(option);
i--;
}
}
function leftall()//将第二个列表所有列表项添加到第一个列表
{
var select1=document.getElementById("1");
var select2=document.getElementById("2");
var options=select2.getElementsByTagName("option");
for(var i=0;i<options.length;i++)
{
var option=options[i];
select1.appendChild(option);
i--;
}
}
</script>
</body>
</html>
案例:省市联动练习
<html>
<head>
<title></title>
</head>
<body>
<select id="select1" onchange="change(this.value);">//onchange 在元素改变时触发,这里的参数是传递选择的列表项的value
<option>--请选择--</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
<option value="中国">中国</option>
<option value="英国">英国</option>
</select>
<select id="select2">
</select>
<script>
var arr=new Array(4);
arr[0]=["中国","北京","上海","南京","重庆","四川"];
arr[1]=["日本","北海道","大阪","东京","九州","长崎"];
arr[2]=["德国","慕尼黑","柏林","法兰克福","狼堡"];
arr[3]=["英国","伦敦","考文垂","利物浦","泽西"];
function change(value)
{
var select2=document.getElementById("select2");
var options=select2.getElementsByTagName("option");
for(var i=0;i<options.length;i++)//先看列表里有没有值,有的话就清除
{
select2.removeChild(options[i]);
i--;
}
for(var i=0;i<arr.length;i++)//判断第一个元素和第一个列表项的值是否相同,相同就将数组里后面的值添加到列表里
{
if(arr[i][0]==value)
{
for(var j=1;j<arr[i].length;j++)
{
var option=document.createElement("option");
var text=document.createTextNode(arr[i][j]);
option.appendChild(text);
select2.appendChild(option);
}
}
}
}
</script>
</body>
</html>
案例:动态生成表格
思路为获取到行和列,然后通过循环将表格的html代码写入到一个变量中,然后用innerHTML属性显示这个表格
<html>
<head>
<title></title>
</head>
<body>
行:<input type="text" id="text1">
列:<input type="text" id="text2">
<br>
<input type="button" value="生成" onclick="build();">
<div id="div1">
</div>
<script>
function build()
{
var text1=document.getElementById("text1");
var text2=document.getElementById("text2");
var tab="<table border='1'>";//设置一个变量存放表格的代码
for(var i=0;i<text1.value;i++)
{
tab+="<tr>";
for(var j=0;j<text2.value;j++)
{
tab+="<td>zzzzzzz<td>"
}
tab+="</tr>"
}
tab+="</table>"
var div1=document.getElementById("div1");
div1.innerHTML=tab;//将表格的代码显示在div中通过innerHTML属性
}
</script>
</body>
</html>