                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

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

<!DOCTYPE?HTML><html><head><meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"><title>無標(biāo)題文檔</title></head><body><ul?id="con"><li?id="lesson1">javascript?<ul>?????<li?id="tcon">?基礎(chǔ)語法</li>?????<li>流程控制語句</li>?????<li>函數(shù)</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.獲取祖節(jié)點(diǎn)???????2.獲取html/css課程節(jié)點(diǎn)???????3.把課程節(jié)點(diǎn)的子節(jié)點(diǎn)除空白節(jié)點(diǎn)以外的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進(jìn)階篇 9-10

關(guān)注問題我要回答

1238

操作

收起

1 回答

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

<!DOCTYPE?HTML>
<html>
<head>
??<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
??<title>無標(biāo)題文檔</title></head>
<body>
<ul?id="con">
??<li?id="lesson1">javascript
????<ul>
??????<li?id="tcon">?基礎(chǔ)語法</li>
??????<li>流程控制語句</li>
??????<li>函數(shù)</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.獲取祖節(jié)點(diǎn)
????2.獲取html/css課程節(jié)點(diǎn)
????3.把課程節(jié)點(diǎn)的子節(jié)點(diǎn)除空白節(jié)點(diǎn)以外的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')所獲取的元素父節(jié)點(diǎn)有三個(gè)（從元素位置往回?cái)?shù)）：ul、li、ul，因此“l(fā)et myzul = mylist.parentNode.parentNode”所得到的父節(jié)點(diǎn)是li也就是id='lesson1'的父節(jié)點(diǎn)，所以想要獲取父節(jié)點(diǎn)ul也就是id='con'的父節(jié)點(diǎn)那就應(yīng)該是“l(fā)et myzul = mylist.parentNode.parentNode.parentNode”；

2、想要獲取除了document.getElementById('tcon')元素所在的根父節(jié)點(diǎn)以外的節(jié)點(diǎn)并存儲(chǔ)起來，可以使用數(shù)組Array進(jìn)行存儲(chǔ)，因此可以把myhtml定義為數(shù)組“l(fā)et myhtml = new Array()”；

3、在for循環(huán)中對(duì)除了document.getElementById('tcon')元素所在的父節(jié)點(diǎn)li也就是id='lesson1'的父節(jié)點(diǎn)進(jìn)行查找并存儲(chǔ)到數(shù)組myhtml中，if條件判斷中mylist要獲取得到id='lesson1'的父節(jié)點(diǎn)應(yīng)該為mylist.parentNode.parentNode。