0

HTMLコードのすべての要素を実行し、階層ごとにHTML要素のツリーを出力することになっているjavascriptを使用してreqursionを構築しました。

HTML コード: 

<body>
<p id = "asdgadsfgasdf"><h1>as<strong>asdfasdf</strong>dfasdf</h1></p>
<table id = "table1">
        <tr id = "tr1">
        <td id = "try1" style="background-color:green;"><p id="ChosenColor3"> html file1</p></td>
        <tr id = "trNotFounded">
            <td id = "t1"><p id="Choor3"> html file2</p></td>
        </tr>
        </tr>
        <tr  ></tr>
        <tr>
        <td id = "try2"><p id="ch4"> css file</p></td>
        <td><button id="bestRated3" onclick = arrayTest()> ב.מ </button></td>
        <td><button id="submitForm" onclick = submit()> end</button></td>
        </tr>
        <tr>
        <td id = "try6"><h1 id = "Cr5"> text </h1></td>
        <td><h1 id="Chose111">aasdfasdf</h1></td>
        <td><p id = "1234"> hello111   <span>Here is the problem1</span>   <b>  Here     is the problem2</b>hiii</p></td>
        </tr>
    </table>

<p id = "tr5"> hello </p>
</body>

JAVASCRIPT コード:

var z1 = document.body.childNodes;
var level = "";
getChildsArea(z1);

function getChildsArea(z) {
        if (z.length > 1) {
          for (i=0; i<z.length; i++){
        if (z[i].nodeType == 1) {
            console.log(level + z[i].nodeName + " CLIENT Area: " + z[i].clientWidth*z[i].clientHeight + " ID: " + z[i].getAttribute('id'));
            if ((z[i].childNodes.length == 0) || ((z[i].childNodes.length == 1 && z[i].childNodes[0].nodeType != 1))) {
                continue;
             }

             else{
                   for (k=0; k<z[i].childNodes.length; k++) {
                    if(z[i].childNodes[k].nodeType == 1) console.log(level + "childs: " + z[i].childNodes[k].nodeName
                                             + " ID: " + z[i].childNodes[k].getAttribute('id'));
                    }
                   level = level + "  ";
                   getChildsArea(z[i].childNodes);
                   level = level.substring(0, level.length - 2)
            }
        }   
          }
        }
        else if (z.length == 1 && z[0].nodeType == 1) {
            console.log(level + z[0].nodeName + " CLIENT Area: " + z[0].clientWidth*z[0].clientHeight + " ID: " + z[0].getAttribute('id'));
        }
  }

出力 (コンソール ログによる):

P CLIENT Area: 0 ID: asdgadsfgasdf
H1 CLIENT Area: 49136 ID: null 
childs: STRONG ID: null 
  STRONG CLIENT Area: 0 ID: null 
TABLE CLIENT Area: 83448 ID: table1  
childs: TBODY ID: null  
  TBODY CLIENT Area: 83448 ID: null
  childs: TR ID: tr1  
  childs: TR ID: trNotFounded  
  childs: TR ID: null  
  childs: TR ID: null  
  childs: TR ID: null  
    TR CLIENT Area: 13176 ID: tr1  // THIS ONE IS OK
    childs: TD ID: try1  
      TD CLIENT Area: 1232 ID: try1  
      childs: P ID: ChosenColor3  
        P CLIENT Area: 1080 ID: ChosenColor3  
    TR CLIENT Area: 16470 ID: null // THIS ONE IS OK

   // where are 3 more ??

    childs: TD ID: try2  
    childs: TD ID: null  
    childs: TD ID: null  
      TD CLIENT Area: 1568 ID: try2  
      childs: P ID: ch4  
        P CLIENT Area: 1080 ID: ch4  
      TD CLIENT Area: 3752 ID: null  
      childs: BUTTON ID: bestRated3  
        BUTTON CLIENT Area: 558 ID: bestRated3  
      TD CLIENT Area: 9660 ID: null  
      childs: BUTTON ID: submitForm  
        BUTTON CLIENT Area: 594 ID: submitForm

問題: コンソール ログにすべての要素が表示されるわけではありません。たとえば、5 つの (TR 要素) 子を持つ "TBODY" 要素が表示されますが、ツリーには 2 つの子しか表示されません。私は自分のコードで何かを見逃していると確信しています。誰か助けてもらえますか? ありがとう、ドロン

4

2 に答える 2

1

フィドルを書いたところです。 http://jsfiddle.net/ppbjT/1/

この再帰はすべての要素を表示します。ログを埋め込みます。

function findAllElements(element){
    spacing+=spaceValue;
    if(element.tagName){
        console.log(spacing+element.tagName+(element.id? ("#"+element.id):"")+element.className? ("."+element.className):""));
        var children =element.childNodes;
        for (var i= 0;i<children.length;i++){
            findAllElements(children[i])
        }
    }
    spacing=spacing.slice(0,-spaceValue.length);

}

于 2013-09-19T08:53:54.167 に答える