<!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
用户名：<input type="text" name="text"/>
性别：<input type="radio" name="sex" value="nan" />男<input type="radio" name="sex" value="nv" /><br />
<input type="button" οnclick="node()" value="document对象事件源"/>
<div>aaaaaaaaaaaaaaaaaaaaa</div>
<a href="http://www.baidu.com">百度1</a>
<a href="http://www.baidu.com">百度2</a>
<a href="http://www.baidu.com">百度3</a>
<a href="http://www.baidu.com">百度4</a>
<a href="http://www.baidu.com">百度5</a>
<a href="http://www.baidu.com">百度6</a>
<a href="http://www.baidu.com">百度7</a><br />
<span>span区域</span>
<table id="tableId">
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
<hr />
<table id="tableId2"><tr><!--如果有多个相同的id，通过getElementById只会获取第一个-->
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> 格1</td>
<td> 格2</td>
<td> 格3</td>
<td> 格4</td>
</tr>
<tr><td>aaaaaaaaaaaaaaaa</td></tr>
</table>
</body>
<script type="text/javascript">
//--------------------------------------------------通过及诶单层次关系获取节点对象-----------------------------------------------------------------
/*
通过节点层次关系获取节点对象，各个节点之间存在着层次关系，
1，父节点---------------是惟一的节点，通过parentNode获取，node表示节点
2，子节点---------------是可以有多个的，因为子节点不是唯一的，所以是个结合，childNodes
3，兄弟节点
上一个兄弟节点------是唯一的,previousSibling
下一个兄弟节点------是唯一的,nextSibling
*/
/*
节点类型：
1，标签型节点，类型为1
2，文本型节点，类型为3 表现方式为#text
3,属性型节点，类型为2
4，注释型节点，类型为8 表现方式为#comment
*/
function node(){
var table_node=window.document.getElementById("tableId2");//通过id获取节点
/*//获取父节点---------------------------------------------------------------
var parentNode=table_node.parentNode.parentNode;//获取通过parentNode获取其父节点
alert(parentNode.nodeName+"----"+parentNode.nodeType+"-----"+parentNode.nodeValue); //ok，这样写完全没问题
*/
/*//获取子节点--------------------------------------------------------------
var childNode=table_node.childNodes;//注意表格table的默认子节点是tbody，这一点要注意啊
//alert(childNode.length);//表格的下一级标签为tbody，所以长度为1
alert(childNode[0].nodeName);//拿到的是tbody标签
var child_node=table_node.childNodes;//先获取子节点，
var childs=child_node[0].childNodes;//在获取相应子节点的子节点，
alert(childs.length+"----"+childs[0].nodeName+"-----"+childs[0].nodeValue);//做了一下测试，你懂的
*/
//获取兄弟节点--------------------------------------------------------------------
var pre_node=table_node.previousSibling.previousSibling.previousSibling;//经过试验，可以这样属性连点。注意有一点：如果涉及到span标签，要span标签和相邻标签要直接挨着，不能有空格或换行才行，要不然，通过兄弟节点方式，返回的就是这个中间的空文本，IE浏览器是这样处理的，但其他如火狐等不是这样，会忽略中间的空格或回车
//var pre1=pre_node.previousSibling;
//var pre2=pre1.previousSibling;
//alert("---"+pre_node.nodeValue+"---");//此时为空格
/*对于兄弟节点获取时，会出现空白文本节点，所以最好都要跟上对获取到的节点的判断，所以判断最好加上正则表达式，判断空白或回车符等，比较麻烦，所以获取节点时，尽量避免使用兄弟节点*/
while(pre_node.nodeType==3 && pre_node.nodeValue==' '){//这样判断一下，就可以拿到有效节点，但有点问题，有待解决---------------
pre_node.previousSibling;
}
alert(pre_node.nodeName);
}
//----------------------------------------------------------------获取页面中带有href属性的a标签对象，还有其他属性，要灵活-----------------------------------------
window.οnlοad=function(){
var arr=document.links//获取页面中带有href属性的a标签对象
for(var i=0;i<arr.length;i++){
//alert(arr[i].innerText);//弹出每个a标签中的文本内容
arr[i].target="_black";//通过对象调用其中的target属性，再赋值即可
}
//如果想设置有的是在本页面打开，有的是在新页面打开，可以用div确定相应的区域，然后根据该区域进行操作即可
}
//-------------------------------------------------------三种获取节点的方式，以及及诶单具备的三个属性--------------------------------------------------------
/*
当一个html文本被dom解析后，加载进内存，就是一个dom树
每一个标签都是一个节点，为了操作某一个节点，前提就是先要获取该节点对象。
最常见的操作就是获取页面中的节点
document对象作为html文档的对象，可以获取页面中任意一个节点：
获取方式如下：
getElementById();//通过标签的id属性值获取该标签节点对象。因为id是唯一性的，所以通过该方法返回的是一个节点对象，如果有多个相同的id，只会获取第一个
getelementsByName();//通过name属性，返回的是节点数组
getelementsByTagName();//通过标签名称，返回的是节点数组
节点都具备三个属性：
1，节点名称，nodeName
2，节点类型, nodeType
3，节点值, nodeValue
*/
function docdemo(){
var tableNode=window.document.getElementById("tableId");
/*alert(tableNode);//此是一个对象
alert(tableNode.nodeName);//获取该对象的nodeName属性，即对象名称
alert(tableNode.nodeValue);
//设置属性方式一：
tableNode.border="1";//通过该对象的属性设置表格属性
tableNode.borderColor="blue";//通过该对象的属性设置表格属性，还有很多属性，可以查看html帮助文档
*/
//设置属性方式二：
tableNode.setAttribute("border","1");//通过该方法可以达到上面同样的目的，只不过上面用属性，这里用方法
tableNode.setAttribute("borderColor","red");//通过方法设置颜色
}
function docdemo1(){
var text=document.getElementsByName("text")[0];
//如果上面定义了取数组中 第几个元素，可以直接用
alert(text.value);//两种方式，要灵活一点
//alert(text[0].value);//注意nodeValue与value是不同的，这里用value才行
var radios=document.getElementsByName("sex");
for(var i=0;i<radios.length;i++){
alert(radios[i].value);
}
}
function tagNames(){
var tags=document.getElementsByTagName("div")[0];
alert(tags.innerText);//innerText为标签内封装的文本数据
tags.innerText="哈哈，这用用innerText属性修改了文本内容！！！";//用innerText不仅可以获取文本内容，还可以修改文本内容
}
//获取页面中所有单元格中的数据
function tdArr(){
var arr=document.getElementsByTagName("td");
for(var i=0;i<arr.length;i++){
alert(arr[i].innerText);
}
}
//如果只拿到id为tableId2的table中的单元格中的数据
//凡是容器性标签对象都具有一个共性的方法：getElementByTagName()即获取该标签中的标签节点
function tableTd(){
//1，先获取指定的td所在的表格对象
var tableId=document.getElementById("tableId2");
//2，通过表格对象的getelementByTagName()方法获取该表格内部的td
var table_td=tableId.getElementsByTagName("td");//用指定的范围获取相应的节点，这点要注意！！！！！！！！！
for(var i=0;i<table_td.length;i++){
alert(table_td[i].innerText);
}
}
</script>
</html>
756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
