Fatal编程技术网
  • javascript/
  • Javascript replaceChild（）应该如何工作？

Javascript replaceChild（）应该如何工作？

javascript

Javascript replaceChild（）应该如何工作？,javascript,Javascript,我在自学javascript，不理解从一些示例代码中得到的结果。为了简洁起见，我删减了代码 html： <body> <h1>firstChild and lastChild Property Lab</h1> <hr /> <form> <label>Enter some text to add or replace in the OL element

我在自学javascript，不理解从一些示例代码中得到的结果。为了简洁起见，我删减了代码

html：

<body>
        <h1>firstChild and lastChild Property Lab</h1>
        <hr />
        <form>
            <label>Enter some text to add or replace in the OL element:</label>
            <br />
            <input type="text" name="input" size="50" />
            <br />
            <input type="button" value="Insert at Top"
                    onclick="prepend(this.form)" />
            <input type="button" value="Append to Bottom"
                    onclick="append(this.form)" />
            <br />
            <input type="button" value="Replace First Item"
                    onclick="replaceFirst(this.form)" />
            <input type="button" value="Replace Last Item"
                    onclick="replaceLast(this.form)" />
        </form>
        <ol id="myList">
            <li>Initial Item 1</li>
            <li>Initial Item 2</li>
            <li>Initial Item 3</li>
            <li>Initial Item 4</li>
        </ol>
    </body>
我想如果我在文本框中输入一些文本并单击“替换第一项”按钮，列表中的第一项将被替换。但是，我第一次这样做时，它被放在列表的顶部，现在列表有5项。然后，如果我更改文本框中的文本并再次单击“替换第一项”按钮，列表中的第一项将更改

我不明白为什么会这样。我原以为只要我一按按钮，就会更换。我正在Ubuntu 10.04上使用Firefox4。此外，如果我尝试替换列表中的最后一项，结果与上面所述的相同

谢谢，吉姆，这里有两件事不对。首先，您选择的是
值，而不是
var firstLI=document.getElementById（'myList'）.firstChild.value的元素
so使用
var firstLI=document.getElementById（'myList'）.firstChild取而代之

其次，信不信由你，你的
firstChild
是一个
TextNode
节点，当前标记为空文本。删除
和第一个
    • 之间的空白，使其
  • …
    • ，如下所示：
    
两个问题：
    

  • 您需要传递节点，而不是
    值
    属性（该属性甚至不存在）
    • 

  • 第一个子节点是文本节点，而不是元素（确切地说是空白）。您可以删除空白或用更可靠的
    .getElementsByTagName（'li'）[0]
    替换对
    firstChild
    的调用
    • 

    

    
支持，按照锡上的说明执行。为了获得最高效率，您可以执行以下操作：
    

    var list = document.getElementById('myList');
var firstLI = list.firstElementChild || list.getElementsByTagName('li')[0];

    

    谢谢，行得通。firstChild.value不是作者的错，我正在试验，但忘了删除它，我的错。
  • 格式是直接从书中获得的，我自己永远也不会明白这一点，谢谢。@Cleanman2调试这类问题的一个快速方法是使用
    console.log（variable）
    查看收集到的内容，因为它显示元素、对象、数组等。谢谢提示。今天我学到了很多有用的东西，很高兴我找到了这个资源。

    var list = document.getElementById('myList');
var firstLI = list.firstElementChild || list.getElementsByTagName('li')[0];

    														
    •