问答详情
源自：9-10 访问父节点parentNode

为什么如下代码没有正确的输出

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body><ul id="con"><li id="lesson1">javascript <ul>     <li id="tcon"> 基础语法</li>     <li>流程控制语句</li>     <li>函数</li>     <li>事件</li>     <li>DOM</li> </ul></li><li id="lesson2">das</li><li id="lesson3">dadf</li><li id="lesson4">HTML/CSS <ul>   <li>文字</li>   <li>段落</li>   <li>表单</li>   <li>表格</li>   </ul></li></ul>  <script  type="text/javascript">      var mylist = document.getElementById("tcon");   /*       1.获取祖节点       2.获取html/css课程节点       3.把课程节点的子节点除空白节点以外的innerHTML输出   */   let myzul = mylist.parentNode.parentNode;   let myhtml = null;   for(let element of myzul.childNodes){       if(element !== mylist.parentNode && element.nodeType === mylist.parentNode.nodeType)       myhtml = element;        console.log(myhtml);   }   for(let element of myhtml){       if(element.nodeValue !== null){            document.write(element.innerHTML + "</br>");        }   }</script></body></html>

为什么这样子就不行呢？

提问者：qq_慕桂英8249707 2018-11-10 22:04

个回答

  • KingToAce
    2018-11-20 14:41:42
    已采纳 

    <!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>无标题文档</title></head>
<body>
<ul id="con">
  <li id="lesson1">javascript
    <ul>
      <li id="tcon"> 基础语法</li>
      <li>流程控制语句</li>
      <li>函数</li>
      <li>事件</li>
      <li>DOM</li>
    </ul>
  </li>
  <li id="lesson2">das</li>
  <li id="lesson3">dadf</li>
  <li id="lesson4">HTML/CSS
    <ul>
      <li>文字</li>
      <li>段落</li>
      <li>表单</li>
      <li>表格</li>
    </ul>
  </li>
</ul>
<script type="text/javascript">
  /*
    1.获取祖节点
    2.获取html/css课程节点
    3.把课程节点的子节点除空白节点以外的innerHTML输出
  */
  var mylist = document.getElementById('tcon');
  let myzul = mylist.parentNode.parentNode.parentNode;
  let myhtml = new Array();
  for (let element of myzul.childNodes) {
    if (element !== mylist.parentNode.parentNode && element.nodeType === mylist.parentNode.parentNode.nodeType) {
      myhtml[myhtml.length] = element;
    }
  }
  for (let element of myhtml) {
    document.write(element.innerHTML + '</br>');
  }
</script>
</body>
</html>

    修改地方：

    1、document.getElementById('tcon')所获取的元素父节点有三个（从元素位置往回数）：ul、li、ul，因此“let myzul = mylist.parentNode.parentNode”所得到的父节点是li也就是id='lesson1'的父节点，所以想要获取父节点ul也就是id='con'的父节点那就应该是“let myzul = mylist.parentNode.parentNode.parentNode”；

    2、想要获取除了document.getElementById('tcon')元素所在的根父节点以外的节点并存储起来，可以使用数组Array进行存储，因此可以把myhtml定义为数组“let myhtml = new Array()”；

    3、在for循环中对除了document.getElementById('tcon')元素所在的父节点li也就是id='lesson1'的父节点进行查找并存储到数组myhtml中，if条件判断中mylist要获取得到id='lesson1'的父节点应该为mylist.parentNode.parentNode。

    3