本帖最后由 秦兰之 于 2013-5-28 20:49 编辑
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function docdemo()
{
/*
当一个html文件被DOM解析后,加载进内存,就是一个DOM树。
每一个标签都是一个节点,为了操作某一个节点,前提就是要获取该节点对象。
最常见的操作无非就是获取页面中的一个节点。
document对象作为html文档的对象,可以获取页面中任意一个节点。
获取方法如下:
getElementById:通过标签的id属性值来获取该标签节点对象,因为一般情况,ID是唯一的。
不是说所有的标签都要定义id属性,这样做太麻烦。
只有大的区域,获取特殊区域,为了方便获取和操作,才定义ID属性。
getElementByName:通过标签的name属性值来获取节点对象,返回的是一个节点数据。
getElementByTagName:通过标签名称获取节点对象,返回的是一个节点数据。
*/
var tabNode = document.getElementById("tabid");
//alert(tabNode.nodeName);
//tabNode.border=1;
//tabNode.borderColor="blue";
//tabNode.setArribute(border,1); //setArribute:设置属性和值。
}
/*
节点都具备三个属性:
1.节点名称:NoteName
2.节点类型:NoteType
3.节点属性:NoteValse
*/
function docdemo2() //通过标签的id属性值来获取该标签节点对象.
{
var textNode = document.getElementByName("user");
alert(textNode[0].type);
}
function docdemo3()
{
//获取div对象。
var divNode = document.getElementTagName("div")[0];
//alert(divNode.innerText); //代表标签内封装的文本数据。
//divNode.innerText="哈哈,将数据改掉";
}
function docdemo4()
{
//想要获取到页面中所有单元格中的数据。
var tdArr = document.getElementTagName("td");
for(var x=0; x<tdArr.length; x++)
{
//alert(tdArr[x].innerText);
}
}
function docdemo5()
{
//只想获取表格id为tabid中的单元格数据。
//凡是容器型标签对象都具备一个共性的方法getNodeTagName():获取该标签中的标签节点。
//1.先获取指定的id所在的表格对象。
var tabNode = document.getElementsById("tabid");
//通过表格对象的getNodeTagName()方法获取该表格内容指定的标签节点对象数组。
var tdNode = document.getElememtsByTagName("td");
for(var x=0; x<tdNode.length; x++)
{
//alert(tdNode[x].innerText);
}
}
</script>
</head>
<body>
用户名:<input type="text" name="user" /><br/>
性 别:<input type="radio" name="sex" value="nan" />男<input type="radio" name="sex" value="nv" />女<br/>
<input type="button" value="演示document对象" /> <!--docdemo 调用0,1,2,3,4,5的方法()-->
<div> 这是一个div区域 </div>
<table id=""tabid>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格三</td>
<td>单元格四</td>
</tr>
</table>
<a href="http:www.sina.com.cn">新浪网站</a>
<span> 这是一个span区域</span>
<table>
<tr>
<td>哈哈</td>
</tr>
<tr>
<td>呵呵</td>
</tr>
</table>
</body>
</html>
看完视频后想运行一下,这可是完全照搬视频上的代码,结果没有效果,到底哪出问题?求大神指点。 |