英文:
What does querySelector() do when not called on the document?
问题
在MDN模板文档中，我看到了这样的代码：clone.querySelectorAll("td");，出于好奇，我写了JS代码片段如下：document.querySelector(".para").append(" hello");h5.querySelector(".para").append(" world")，试图将"world"附加到"hello"后面，但出现了错误。
请解释一下非document(dot)querySelector样式的概念及其用法，以纠正我的错误。
// 创建一个新的h5元素
h5 = document.createElement('h5');
h5.textContent = "text updated";
h5.className = "first";
// 这里的查询使用了document.querySelector，它会在整个文档中查找匹配的元素
document.querySelector(".para").append(" hello"); // 这行代码正常工作
// 但这里的查询使用了h5.querySelector，它会在h5元素内部查找匹配的元素
// 由于h5元素内部没有匹配的元素，会返回null，因此出现错误
h5.querySelector(".para").append(" world"); // 控制台会报null值的错误，意味着没有找到任何匹配的元素
英文:
In the MDN template docs I saw code as clone.querySelectorAll("td");, so out of curiosity I wrote JS code snippet as document.querySelector(".para").append(" hello");h5.querySelector(".para").append(" world") to try to append 'world' to 'hello', but got an error.
Please explain the concept of a non-document(dot)querySelector style and its usage to rectify my error
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
h5=document.createElement('h5');
h5.textContent= "text updated";
h5.className= "first";
document.querySelector(".para").append(" hello");//works
h5.querySelector(".para").append(" world");//console log error of value null meaning nothing selected
<!-- language: lang-html -->
<p class="para"> Test: </p>
<!-- end snippet -->
答案1
得分: 1
调用querySelector()方法时，它会限制搜索范围为元素的后代元素，而不是搜索整个DOM。
你需要在<h5>内插入<p class="para">，这样才能找到它。如果你想查看结果，你需要将h5添加到文档中。
英文:
Calling querySelector() on an element restricts the search to the element's descendants, rather than searching the entire DOM.
You need to insert a <p class="para"> inside the <h5> so it will be found. And if you want to see the results, you need to append h5 to the document.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let h5=document.createElement('h5');
let p = document.createElement('p');
p.textContent = 'Test2:';
p.classList.add('para');
h5.appendChild(p);
document.body.appendChild(h5);
h5.className= "first";
document.querySelector(".para").append(" hello");//works
h5.querySelector(".para").append(" world");
<!-- language: lang-html -->
<p class="para"> Test: </p>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论