TypeError：无法读取 null 的属性 parentNode

Question

我的脚本有问题。

http://danny.b.cmmstudents.nl/MM-4/pages/hardware.html

这是我正在使用的 javascript：

var imgPad = "../media/images/";
var canSwap = document.images ? true : false;

var mapAreas = document.getElementsByClassName('iphoneLink');
var eventList = ['mouseover', 'mouseout', 'click', 'touchstart'];
var map = document.getElementById('softwareMap');

var informatieHeading = document.getElementById('informatieHeading');
var informatiePar = document.getElementById('informatiePar');

for(var i=0; i<mapAreas.length; i++){
   for(theEvent of eventList){          
        mapAreas[i].addEventListener(theEvent, function(e){
            if(e.type == 'mouseover'){
                if(map.parentNode.id == "softwareMap"){
                    var checkDb = hwItems[this.getAttribute("data-dbId")].afbeelding;
                    swapImage("mainImg", checkDb); // Perform function 
                } else{
                    var checkDb = swItems[this.getAttribute("data-dbId")].afbeelding;
                    swapImage("mainImg", checkDb); // Perform function 
                } 
            } else if (e.type == 'mouseout'){
                 if(map.parentNode.id == "softwareMap"){
                    swapImage("mainImg", 'iphonex.png'); // Perform function 
                } else{
                    swapImage("mainImg", 'iphonexInside.png'); // Perform function 
                }
            } else if(e.type == 'click'){
                if(map.parentNode.id == "softwareMap"){
                    informatieHeading.textContent = swItems[this.getAttribute("data-dbId")].titel;
                    informatiePar.textContent = swItems[this.getAttribute("data-dbId")].omschrijving;
            } else{
                    informatieHeading.textContent = hwItems[this.getAttribute("data-dbId")].titel;
                    informatiePar.textContent = hwItems[this.getAttribute("data-dbId")].omschrijving;
                }
            } else if (e.type == 'touchstart'){
                informatieHeading.textContent = hwItems[this.getAttribute("data-dbId")].titel;
                informatiePar.textContent = hwItems[this.getAttribute("data-dbId")].omschrijving;  
            };  
        });
    }
}

这是错误：

未捕获的类型错误：无法读取 null 的属性“parentNode” 在 HTMLAreaElement。

这是硬件页面的 HTML： softwarepage 也一样，但有 id 'softwareMap'

<main id="content">
    <div class="iphoneTekst">
      <p>Klik met je vinger op de interactieve iPhone</p>
      <p>Ga met de muis over de interactieve iPhone</p>
    </div>      
   <div id="iphone"><img id="mainImg" src="../media/images/iphonexInside.png" alt="iPhone X" usemap="#hardwareMap" width="772 " height="1472"></div>

    <map id="hardwareMap" name="hardwareMap"><!-- image Map -->
       <area class="iphoneLink" data-dbId="0" alt="" title="" href="#" shape="rect" coords="570,60,706,325">
       <area class="iphoneLink" data-dbId="1" alt="" title="" href="#" shape="rect" coords="59,1209,347,1316">
       <area class="iphoneLink" data-dbId="2" alt="" title="" href="#" shape="rect" coords="498,34,550,114">
       <area class="iphoneLink" data-dbId="3" alt="" title="" href="#" shape="rect" coords="449,1358,678,1433">
       <area class="iphoneLink" data-dbId="4" alt="" title="" href="#" shape="poly" coords="66,235,417,233,420,829,625,837,626,1201,57,1205">
   </map>
   <article id="informatie"><!-- Div wordt ingeladen met info van de iphone-database.js -->
       <div>
           <h2 id="informatieHeading">iPhone X</h2>
           <p id="informatiePar">We hebben altijd al een iPhone willen maken die één en al scherm is. Een iPhone waar je zo in opgaat dat je je er helemaal in verliest. Eentje die zo intelligent is dat hij reageert op een tikje, je stem of zelfs je blik. Met iPhone X hebben we dit doel nu bereikt.<br>Welkom in de toekomst.</p>
        </div>
    </article>
    <div class="ctaBackToTop"><a href="#iphone">Back to top</a></div>
</main>

Answer 1

map 正在返回 null。 getElementById 如果找不到具有相应 id 的元素，则返回 null。简要查看您的页面会发现您的页面上没有 id 为 softwareMap 的 html 元素。但是有一个hardwareMap。

当上面的代码在硬件页面的链接上运行时，没有id为softwareMap的元素，但是在软件页面上有。如果您打算在两个页面上使用上述相同的脚本，则应在 if 语句中进行额外测试以检查 map 是否存在。因此，该语句将变为 if(map && map.parentNode.id) {...} 这将使错误消失。

** 已编辑以包含更多细节。

Answer 2

#softwareMap 不在 DOM 中。

编辑： 准确地说，选择器#softwareMap 在调用querySelector 方法时不匹配DOM 中的任何元素。如果有一些操作应该将目标元素放在 DOM 中，请确保在尝试通过提到的选择器访问它之前调用它。