Question

我正在学习DOM上的基本js操作，它可以在代码的第一部分工作，完成属性替换功能。

然后它不能处理第二部分代码，它需要替换＆＃34; p＆＃34;的第二部分代码的空值。元件。

我在过去2小时内检查了很多次，整个结构与书中的代码相同，但它只是不起作用。

我还检查了MDN有关节点相关条目的信息，但也未能得到这里发生的事情。

gallery.js

function showpics(indexs){

    var linky = indexs.getAttribute("href");
    var holdy = document.getElementById("holder");
    holdy.setAttribute("src",linky);

    var texty = indexs.getAttribute("title");
    var fun = document.getElementById("funnyWords");
    fun.childNodes[0].nodeValue = texty;

}

以下是HTML文件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" http-equiv="IE=Edge,chrome=1">
        <title>YTimes</title>
        <script type="text/javascript" src="gallery.js"></script>
    </head>

    <body>

        <h1>Our Story</h1>

        <section>
            <ul>
                <li><a href="../../Games/WOW/Screenshots/WoWScrnShot_030815_232128.jpg" title = "F" onclick="showpics(this); return false;">F</a></li>
                <li><a href="../../Games/WOW/Screenshots/WoWScrnShot_041214_150925.jpg" title = "2.0 Version" onclick="showpics(this); return false;">2.0</a></li>
                <li><a href="../../Games/WOW/Screenshots/WoWScrnShot_050214_165318.jpg" title = "Riverrun" onclick="showpics(this); return false;">Riverrun</a></li>
            </ul>
        </section>

        <section>
            <p id="funnyWords"></p>
            <span>
                <img src="" alt="" id="holder">
            </span>
        </section>

    </body>

</html>

Answer 1

问题是#funnyWords没有内容：

<p id="funnyWords"></p>

因此，fun.childNodes[0]未定义。

您可以根据需要创建新的文本节点：

if(fun.childNodes.length)
    fun.childNodes[0].nodeValue = texty;
else
    fun.appendChild(document.createTextNode(texty));

或者，新浏览器支持textContent：

fun.textContent = texty;

Answer 2

<head>
    <meta charset="UTF-8" http-equiv="IE=Edge,chrome=1">
    <title>YTimes</title>
    <script type="text/javascript" src="gallery.js"></script>
</head>

<body>

<h1>Our Story</h1>

    <section>
        <ul>
            <li><a href="../../Games/WOW/Screenshots/WoWScrnShot_030815_232128.jpg" title = "F" onclick="showpics(this); return false;">F</a></li>
            <li><a href="../../Games/WOW/Screenshots/WoWScrnShot_041214_150925.jpg" title = "2.0 Version" onclick="showpics(this); return false;">2.0</a></li>
            <li><a href="../../Games/WOW/Screenshots/WoWScrnShot_050214_165318.jpg" title = "Riverrun" onclick="showpics(this); return false;">Riverrun</a></li>
        </ul>
    </section>

    <section>
        <p id="funnyWords">
         <div class="childnode">
         </div>
        </p>
        <span>
            <img src="" alt="" id="holder">
        </span>
    </section>

</body>

这个nodeValue替换代码有什么问题？

2 个答案: