I see that it is written in a plug-in: determine whether it is a function of DOMlist and encapsulate document.querySelectorAll , as follows
// DOM List
function isDOMList(selector) {
if (!selector) {
return false;
}
if (selector instanceof HTMLCollection || selector instanceof NodeList) {
return true;
}
return false;
}
// document.querySelectorAll
function querySelectorAll(selector) {
var result = document.querySelectorAll(selector);
if (isDOMList(result)) {
return result;
} else {
return [result];
}
} then I wondered why I re-encapsulated querySelectorAll () , and then I wrote a Demo and found that no matter what, querySelectorAll () always got DOMlist . I would like to ask whether this encapsulation determines the role of DOMlist , or under what circumstances, my demo will return false
here is the demo I wrote
<body>
<ul>
<li class="nobe">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li class="nobe">e</li>
</ul>
<button onclick="checkDom()">li</button>
<script type="text/javascript">
function isDOMList(selector) {
if (!selector) {
return false;
}
if (selector instanceof HTMLCollection || selector instanceof NodeList) {
return true;
}
return false;
}
function qSA(selector) {
var result = document.querySelectorAll(selector);
if (isDOMList(result)) {
console.log("DOMlist");
return result;
} else {
console.log("DOMlist");
return [result];
}
}
function checkDom() {
console.log(qSA(".nobe"));
}
</script>
</body>