jessquery
Version:
Modern JavaScript is pretty good, but typing document.querySelector() is a pain. This is a tiny library that makes DOM manipulation easy. jQuery is around 80kb (30kb gzipped), while this is only around 8kb (3.5kb gzipped). Lots of JSDoc comments so it's s
55 lines (45 loc) • 1.85 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Become Multi-Element Test</title>
</head>
<body>
<div id="testContainer"></div>
<div class="toBeReplaced">To Be Replaced 1</div>
<div class="toBeReplaced">To Be Replaced 2</div>
<div class="replacementElement">Replacement Element 1</div>
<div class="replacementElement">Replacement Element 2</div>
<script type="module">
import { $, $$ } from "../index.js"
function becomeMultiElementTest() {
const output = document.createElement("div")
document.getElementById("testContainer").appendChild(output)
const toBeReplacedEls = $$("div.toBeReplaced")
const replacementEls = $$("div.replacementElement")
replacementEls.forEach((el, i) => {
el.textContent += " " + i
})
console.log("toBeReplacedEls:", toBeReplacedEls)
console.log("replacementEls:", replacementEls)
toBeReplacedEls.become(replacementEls, { mode: "move", match: "fill" })
const replacedElements = document.querySelectorAll(
".replacementElement"
)
if (
replacedElements.length === 2 &&
!document.querySelectorAll(".toBeReplaced").length
) {
output.style.color = "green"
output.textContent = "become multi-element test PASSED"
} else {
output.style.color = "red"
output.textContent = "become multi-element test FAILED"
}
}
// Add an event listener to ensure the DOM is fully loaded before running the code.
document.addEventListener("DOMContentLoaded", becomeMultiElementTest)
</script>
</body>
</html>