0

我已经用 javascript 构建了一个 reqursion，它应该运行 HTML 代码的所有元素，并通过它们的层次结构输出 HTML ELEMENTS 的树。

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

问题： 并非所有元素都显示在控制台日志中，例如，您可以看到“TBODY”元素，它有 5 个（TR 元素）子元素，但树中只表示 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 回答
0

根据我的评论，主要问题是您的 HTML 无效......您不能有嵌套<tr></tr>标签。

您还应该确保属性使用单引号或双引号作为值，并且它们之间没有空格（尽管这不是绝对必要的，但这是一个很好的做法）。例如

onclick = submit()

应该替换为

onclick="submit();"
于 2013-09-19T08:38:19.930 回答