jsday05补充(节点关系打印)

来源：互联网发布：java me模拟器编辑：程序博客网时间：2024/06/03 19:39

容器一般值为null
div类型为1
节点类型
标签型节点类型 1
属性节点类型2
文本型节点类型3
注释型节点类型8

注意标签之间之间存在空行时会出现一个空白的文本节点在获取节点时一定要注意
节点的关系
父节点parentNode
子节点childNode 直接子节点返回的是一个节点对象数组
兄弟节点
上一个兄弟节点 previousSibling
下一个兄弟节点 nextSibling

获取节点可以通过节点的层次关系完成
也可以document对象完成
getElementById 通过id属性值获取对应的节点对象如果有多个id值相同获取到的是第一个id所属对象尽量保证id唯一性返回的是一个对象
getElementsByName 通过标签的name属性值获取对象返回的是一堆对象是一个对象数组
getElementsByTagName 既没有id也没有name时可以通过标签名来获取对象返回的是一堆对象其实是一个对象数组
大多容器型标签都具备该方法

<script type=" text/javascript">function demo(){       var divobj = document.getElementById("divid");    // divobj.style.backgroundColor="red";    var name = divobj.nodeName;    var type =divobj.nodeType;    var value = divobj.nodeValue;    alert(name+"..."+type+"..."+value);    //获取父节点    //var parent = divobj.parentNode;    //getNodeInfo(parent);    //获取子节点    //var childs = divobj.childNodes;    //alert(childs.length);    //getNodeInfo(childs[0]);//获取div中的文本节点    //获取兄弟节点        //1、获取上一个兄弟节点        //var preNode = divobj.previousSibling.previousSibling;         //getNodeInfo(preNode);        //2、获取下一个兄弟节点        //var nextNode = divobj.nextSibling;        //getNodeInfo(nextNode);        //需要a标签的文本        //var aNode = divobj.nextSibling.nextSibling.nextSibling.nextSibling;        //var aText = aNode.childNodes;        //getNodeInfo(aText[0]);        //需求 获取单元格一文本        //先获取表格节点        //        var tabNode = divobj.nextSibling.nextSibling;        //getNodeInfo(tabNode.childNodes[1].childNodes[0].childNodes[1]);//太长        var tdNodes = tabNode.getElementsByTagName("td");        //getDocAll();        var nodes = document.all;        //listNode(nodes);      //getNodeInfo(tdNodes[0].childNodes[0]);        //var divObj = document.getElementsById("divid");        //alert(divobj.nodeName);}function getNodeInfo(node){    alert(node.nodeName+"类型:"+node.nodeType+"value:" +node.nodeValue+"...");}var info ="";function getDocAll(){    var nodes = document.all;    for(var  x = 0; x<nodes.length;x++)    {        //getNodeInfo(nodes[x]);            info += nodes[x].nodeName+"..."+nodes[x].nodeType+".."+nodes[x].nodeValue+"<br/>";    }   //  var node = document.all(7);//可以加索引但是要数节点很麻烦 一般不用    //getNodeInfo(node);    document.write(info);}/*public void listFiles(File dir){    System.out.println(getSpace(level)+dir.getNames());    level++;    File[] files =dir.listFiles();    for(int x=0; x<files.length;x++)    {        if(files[x].isDirectory)            listFiles(files[x]);        else            System.out.println(getSpace(level)+files[x].getName());     }   }public String getSpace(int level){    StringBuilder sb = new StringBuilder();    for(int x=0;x<level;x++)    {        sb.append(" ");    }       return sb.toString();}*///通过递归获取节点的层次关系var str= "";function listNode(node,level){    printInfo(node,level);    level++;    var nodes = node.childNodes;    for(var x=0;x<nodes.length;x++)    {        if(nodes[x].hasChildNodes())            listNode(nodes[x],level);        else            printInfo(nodes[x],level);      }   }function getSpace(level){        var s ="";        for(var x= 0;x<level;x++)        {            s +="|--";          }        return s;}function printInfo(node,level){    str += getSpace(level)+node.nodeName+"类型:"+node.nodeType+"value:" +node.nodeValue+"..."+"<br/>";}function getNodes(){    listNode(document,0);       document.write(str);}function getAtts()//属性节点{    var q="";    var divObj = document.getElementById("table");    var atts = divObj.attributes;    //alert(atts.length);    for(var x=0; x<atts.length;x++)    {        q += atts[x].nodeName+".."+atts[x].nodeType+".." +atts[x].nodeValue+"...";    }       document.write(q); }</script></head><body><input type="button" value="演示" onclick="getAtts()" /><input type="button" value="demo" onclick="demo()" /><script type="text/javascript">/*var x= 5;alert(x.toString(2));*/</script><div id="divid">dsadsa</div><table id="table">    <tr>        <td>单元格一</td>        <td>单元格二</td>    </tr>    <tr>        <td>单元格三</td>        <td>单元格四</td>    </tr></table><a href="http://www.baidu.com">百度</a><span>span区域</span></body>

阅读全文

0 0

jsday05补充(节点关系 打印)

jsday05补充(节点关系打印)