8.1 Core DOM的操作
-
查看节点
-
创建和增加节点
-
删除和替换节点
8.1.1 查看节点
-
访问指定节点的方法
-
getElementById()
:返回一个节点对象 -
getElementsByName()
:返回多个(节点数组) -
getElementsByTagName()
:返回多个(节点数组)
-
-
查看/修改属性节点
-
getAttribute("属性名")
-
setAttribute("属性名","属性值")
-
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>使用getAttribute读取节点的属性值</title>
<style type="text/css">
img{
border:0px;
float:left;
padding:3px;
}
body{
margin:0px;
font-size:12px;
line-height:20px;
}
input{
margin-top:5px;
}
</style>
<script type="text/javascript">
function hh(){
var hText=document.getElementById("fruit").getAttribute("src");
alert("图片的路径是:"+hText);
}
function check(){
var favor=document.getElementsByName("enjoy");
var like="你喜欢的水果是:";
for(var i=0;i<favor.length;i++){
if(favor[i].checked==true){
like+="\n"+favor[i].getAttribute("value");
}
}
alert(like);
}
function change(){
var imgs=document.getElementsByTagName("img");
imgs[0].setAttribute("src","images/grape.jpg");
}
</script>
</head>
<body>
<img src="images/fruit.jpg" alt="水果图片" id="fruit" />
<h1 id="love">
选择你喜欢的水果:
</h1>
<input name="enjoy" type="checkbox" value="apple" />苹果
<input name="enjoy" type="checkbox" value="banana" />香蕉
<input name="enjoy" type="checkbox" value="grape" />葡萄
<input name="enjoy" type="checkbox" value="pear" />梨
<input name="enjoy" type="checkbox" value="watermelon" />西瓜
<br />
<input name="btn" type="button" value="显示图片路径" onclick="hh()" />
<br />
<input name="btn" type="button" value="喜欢的水果" onclick="check()" />
<br />
<input name="btn" type="button" value="改变图片" onclick="change()" />
</body>
如果编程时希望访问某个元素的父元素,但又不知道父元素的ID、name、tag,怎么办?
-
根据层次关系查找节点
-
parentNode
-
firstChild
-
lastChild
-
obTable.lastChild.firstChild.firstChild.innerHTML
:lastChild
是tbody
,(thead
是firstChild
),firstChild
是tr
,firstChild
是td
,innerHTML
是欧阳兰。
<script type="text/javascript">
function checks(){
var tt=document.getElementById("myTable");
/*查找第二行第一个单元格内容*/
var s=tt.lastChild.firstChild.firstChild.innerHTML;
/*查找最后一行最后一个单元格内容
var s=tt.lastChild.lastChild.lastChild.innerHTML;
*/
/*查找最后一行第一个单元格内容
var s=tt.lastChild.firstChild.lastChild.innerHTML;
*/
alert(s);
}
</script>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
<thead>
<td>姓名</td>
<td>课程</td>
<td>成绩</td>
</thead>
<tbody>
<tr>
<td>欧阳兰</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>白杨</td>
<td>数学</td>
<td>96</td>
</tr>
</tbody>
</table>
<input name="btn" type="button" value="第二行第一个单元格内容" onclick="checks()" />
</body>
8.1.2 创建和增加节点
创建和增加节点的方法:
-
createElement():创建节点
-
appendChild():末尾追加方式插入节点
-
insertBefore():在指定节点前插入新节点
-
cloneNode():克隆节点
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>增加节点</title>
<script type="text/javascript">
function newNode(){
var oldNode=document.getElementById("sixty1");//访问插入节点的位置
var image=document.createElement("img");//创建一个图片节点
image.setAttribute("src","images/newing.jpg");//设置图片路径
document.body.insertBefore(image,oldNode);//插入图片到sixty1前面
}
function copyNode(){
var image=document.getElementById("sixty1");//访问复制的节点
var copyImage=image.cloneNode(false);//复制指定的节点
document.body.appendChild(copyImage);//在页面最后增加节点
}
</script>
</head>
<body>
<h2>
喜欢的水果
</h2>
<input id="b1" type="button" value="增加一幅图片" onclick="newNode()" />
<input id="b2" type="button" value="复制原图" onclick="copyNode()" />
<br />
<img src="images/sixty1.jpg" id="sixty1" alt="水果" />
<img src="images/sixty2.jpg" id="sixty2" alt="果篮" />
</body>
8.1.3 删除和替换节点
删除和替换节点的方法:
-
removeChild():删除节点
-
replaceChild():替换节点
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>删除节点</title>
<script type="text/javascript">
function delNode(){
var dNode=document.getElementById("sixty1");//访问被删除的节点
document.body.removeChild(dNode); //删除图片
}
function repNode(){
var oldimage=document.getElementById("sixty2");//访问被替换的节点
var newimage=document.createElement("img");//创建一个图片节点
newimage.setAttribute("src","images/repimg.jgp");//设置图片路径
document.body.replaceChild(newimage,oldimage);//替换原来的图片
}
</script>
</head>
<body>
<h2>
喜欢的水果
</h2>
<input id="b1" type="button" value="删除图片" onclick="delNode()" />
<input id="b2" type="button" value="替换图片" onclick="repNode()" />
<br />
<img src="images/sixty1.jpg" id="sixty1" alt="水果" />
<img src="images/sixty2.jpg" id="sixty2" alt="果篮" />
</body>
8.2 HTML DOM的特有对象和操作
8.2.1 HTML DOM对象
8.2.2 HTML DOM对象的属性访问
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用HTML DOM对象的属性访问节点</title>
<script type="text/javascript">
function change(){
var imgs=document.getElementById("s1");
imgs.src="images/grape.jpg";
}
function show(){
var hText=document.getElementById("s1").alt;
alert("图片的alt是:"+hText);
}
</script>
</head>
<body>
<img src="images/fruit.jpg" id="s1" alt="水果图片" />
<br />
<input name="b1" type="button" value="改变图片" onclick="change()" />
<input name="b2" type="button" value="显示图片路径" onclick="show()" />
</body>
8.2.3 HTML DOM对象 —— table对象
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用HTML DOM操作表格</title>
<style type="text/css">
body{
font-size:13px;
line-height:25px;
}
table{
border-top:1px solid #333;
border-left:1px solid #333;
width:300px;
}
td{
border-right:1px solid #333;
border-bottom:1px solid #333;
}
.center{
text-align:center;
}
.title{
text-align:center;
font-weight:bold;
background-color:#cccccc;
}
</style>
<script type="text/javascript">
function addRow(){
var newRow=document.getElementById("myTable").insertRow(2);
var.coll=newRow.insertCell(0);
coll.innerHTML="幸福从天而降";
var col2=newRow.insertCell(1);
col2.innerHTML="¥18.5";
col2.align="center";
}
function updateRow(){
var uRow=document.getElemnetById("myTable").rows[0];
uRow.className="title";
}
function delRow(){
document.getElementById("myTable").deletRow(1);
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
<tr id="row1">
<td>书名</td>
<td>价格</td>
</tr>
<tr id="row2">
<td>看得见风景的房间</td>
<td class="center">¥30.00</td>
</tr>
<tr id="row3">
<td>60个瞬间</td>
<td class"center">¥32.00</td>
</tr>
</table>
<input name="b1" type="button" value="增加一行" onclick="addRow()" />
<input name="b2" type="button" value="删除第2行" onclick="delRow()" />
<input name="b3" type="button" value="修改标题" onclick="updateRow()" />
</body>