BOM__Document对象简介-三种获取节点方式，通过节点层次关系获取节点，以及对象中的属性操作
来源：互联网 发布：企业信息化软件需求 编辑：程序博客网 时间：2024/06/06 08:47
<!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" onclick="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，子节点---------------是可以有多个的，因为子节点不是唯一的，所以是个结合，childNodes3，兄弟节点上一个兄弟节点------是唯一的,previousSibling下一个兄弟节点------是唯一的,nextSibling*//*节点类型：1，标签型节点，类型为12，文本型节点，类型为3 表现方式为#text3,属性型节点，类型为24，注释型节点，类型为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，所以长度为1alert(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.onload=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，节点名称，nodeName2，节点类型, nodeType3，节点值, 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()方法获取该表格内部的tdvar table_td=tableId.getElementsByTagName("td");//用指定的范围获取相应的节点，这点要注意！！！！！！！！！for(var i=0;i<table_td.length;i++){alert(table_td[i].innerText);}} </script></html>
