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
77 lines (66 loc) • 2.64 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Become Method Test</title>
</head>
<body>
<div id="testContainer"></div>
<div id="cycle">
<h2>Cycle Match Test:</h2>
<div class="toBeReplaced">To Be Replaced 1</div>
<div class="toBeReplaced">To Be Replaced 2</div>
<div class="toBeReplaced">To Be Replaced 3</div>
<div class="replacementElement">Replacement Element 1</div>
<div class="replacementElement">Replacement Element 2</div>
</div>
<div id="remove">
<h2>Remove Match Test:</h2>
<div class="toBeReplaced">To Be Replaced 1</div>
<div class="replacementElement">Replacement Element 1</div>
<div class="replacementElement">Replacement Element 2</div>
</div>
<script type="module">
// Import your $ and $$ functions that return { raw: DOMElement }
import { $, $$ } from "../index.js"
function runTests() {
const output = document.createElement("div")
document.getElementById("testContainer").appendChild(output)
const toBeReplacedElsCycle = $$("#cycle .toBeReplaced")
const replacementElsCycle = document.querySelectorAll(
"#cycle .replacementElement"
)
const toBeReplacedElsRemove = $$("#remove .toBeReplaced")
const replacementElsRemove = document.querySelectorAll(
"#remove .replacementElement"
)
// Cycle Match Test
toBeReplacedElsCycle.become(replacementElsCycle, {
mode: "clone",
})
if (
document.querySelectorAll("#cycle .replacementElement").length === 4
) {
output.innerHTML += `<p>Cycle Match Test: <span style="color: green;">Passed</span></p>`
} else {
console.log(replacementElsCycle.raw)
output.innerHTML += `<p>Cycle Match Test: <span style="color: red;">Failed</span></p>`
}
// Remove Match Test
toBeReplacedElsRemove.become(replacementElsRemove, {
mode: "clone",
})
if (
document.querySelectorAll("#remove .replacementElement").length === 2
) {
output.innerHTML += `<p>Remove Match Test: <span style="color: green;">Passed</span></p>`
} else {
console.log(replacementElsRemove)
output.innerHTML += `<p>Remove Match Test: <span style="color: red;">Failed</span></p>`
}
}
runTests()
</script>
</body>
</html>