ParentNode.getElementById() 不起作用

Question

我在练习html的时候遇到了一个问题。当我在 JavaScript 中使用 parentNode 时，我认为这并不难处理。

但是使用 getElementById 或其他函数获取 parentNode 下的某些元素并不符合我的想法。

var this_question = selectObj.parentNode.parentNode;
    alert(this_question); //it is working perfectly
    alert(this_question.getElementById('question'))

它不起作用。我无法理解...

<script>
function addQuestion(selectObj) {
    var this_question = selectObj.parentNode.parentNode;
    alert(this_question); //it is working perfectly
    alert(this_question.getElementById('question')) //It's not working. I can't understand..
}
</script>

<ol id="question_list">
    <li>
        <textarea class="question" name="question" id="question"></textarea>
        <select name="question_type" id="question_type" onChange="javascript:selectEvent(this)">
            <option>-----</option>
            <option value="text" >단답형</option>
            <option value="paragraph" >서술형</option>
            <option value="multiple_choice">다지선</option>
            <option value="checkbox">다중선택</option>
            <option value="scale">scale</option>
        </select>   

        <div id='answer_div'><p>부가설명:<input name='top_label' id='top_label' type='paragraph' /></p> <p>답변:<input name='answer_text' id='answer_text' type='text' /></p></div>

        <p>
            <input type="button" value="Add Question" onclick="javascript:addQuestion(this)"/>
            <input type="button" value="Done" onclick="javascript:finish()"/>
         </p>
    </li>
</ol>

Answer 1

getElementById() 是文档的方法，在元素中不可用。

您可以使用：

this_question.getElementsByTagName('textarea')[0]

getElementsByTagName() 在 elements 中可用。

Answer 2

您有两个具有相同 id 属性的元素，但 id 属性必须是唯一的：

当您重复 id 属性时，会发生奇怪的事情。例如，如果您将 </code> 更改为 <code>id="question_text"</code>，事情就会开始变得更好：

http://jsfiddle.net/ambigously/67DZr/

来自 HTML4 规范：

id = 姓名 [CS]
该属性为元素指定一个名称。该名称在文档中必须是唯一的。

以及 HTML5 规范：

id 属性指定其元素的唯一标识符 (ID)。该值在元素的主子树中的所有 ID 中必须是唯一的，并且必须至少包含一个字符。

Answer 3

您可以使用：

baseElement.querySelector('#' + id)

它返回：

baseElement 的第一个与指定选择器组匹配的后代元素。

---

请参阅：

https://developer.mozilla.org/en- US/docs/Web/API/Element/querySelector