打印父节点直到正文

print parentNode until body

本文关键字：正文 父节点 打印      更新时间：2023-09-26

我有这个代码：

<body onMouseDown="javaScript:mouseEventHandler(event);">
   <div id="hello">
        <table>
            <tr>
                <td>Hi friends</td>
            </tr>
        </table>
   </div>
   <div id="result">
    <ul id="ularraydom">
    </ul>
   </div>

我需要输入一个名为 result 的新div，正如我所展示的那样，一个 td 的父节点数组，直到我得到 BODY。

结果应该是这样的：

<ul id="ularraydom">
<li>TD</li> 
<li>TR</li> 
<li>TABLE</li> 
<li>DIV</li> 
<li>BODY</li>
</ul>

我尝试过：

function mouseEventHandler(mEvent)
{
  // Internet Explorer
 if (mEvent.srcElement)
   {
    alert(mEvent.srcElement.nodeName);
   }
 // Netscape and Firefox
 else if (mEvent.target)
   {
    var ularraydom = document.getElementById("ularraydom");
    ularraydom.innerHTML = "<li>" + mEvent.target.parentNode.nodeName; + "</li>";
    }
}
递

归是你的朋友：

function printNode(node){
  var ularraydom = document.getElementById("ularraydom");
  ularraydom.innerHTML += "<li>" + node.nodeName; + "</li>"; // be aware of the += !
  if(node.nodeName !== "BODY"){
    printNode(node.parentNode); //recursion!
  }
}
<body>
   <div id="hello">
        <table>
            <tr>
                <td onclick="printNode(this)">click here</td>
            </tr>
        </table>
   </div>
   <div id="result">
    <ul id="ularraydom">
    </ul>
   </div>
</body>

向上遍历非常简单：

var node = mEvent.target.parentNode;
while (node && node.nodeName !== 'HTML') {
    // print node.nodeName ...
    node = node.parentNode; // up
}
相关文章：