                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

為什么如下代碼沒有正確的輸出

<!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

源自：JavaScript進階篇 9-10

關注問題我要回答

1222

操作

收起

1 回答

KingToAce 回答被采納 +2 積分
2018-11-20

<!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。