This JavaScript library let's you manipulate DOM the easiest way. It's syntax is a little like JQuery and it is easy to learn for beginner programmers. You can manipulate DOM in one line using this library
RapidDOM is a lightweight JavaScript library that allows you to manipulate DOM with just a single line of code, with easy syntax like jQuery. With RapidDOM, you can manipulate DOM, toggle classes, add styles etc. easily.
To use RapidDOM in your project, you need to import the RapidDOM module in your JavaScript file. You can do this by adding the following code into your script file:
import { $ } from './node_modules/rapid-dom/index.js';
<h1> element inside the <body> tag$('body').create('h1')
<h1> element$('h1').remove()
Hello World! inside of <h1> element$('h1').content('Hello World!');
<h1> element$('h1').styles('color: red; background-color: green; padding: 10px')
my-para to all the selected <p> elements$('p').addClass('my-para')
my-para from all the <p> elements only (If other tags also having this class then this way it will be removed from only <p> tags)$('p').removeClass('my-para')
<button> element and then toggling class named dark-theme means if this is exists in button then it will be removed and if it is not exists then it will be added$('button').toggle('dark-theme')
<img> element then setting it's attribute to src and value as https://www.linkedin.com/in/naved-uddin-800241195/$('img').setAt('src', 'https://www.linkedin.com/in/naved-uddin-800241195/')
src of all the <img> elements will be returned and you can store it in a variable to later uselet val = $('img').getAt('src') // Suppose 'https:www.google.com' is returned
console.log(val) // Output : https:www.google.com
alt attribute from the <img> elements$('img').removeAt('alt')
import { $ } from './node_modules/rapid-dom/index.js'
$('body').create('div') // <div> is created inside body tag
$('div').addClass('container') // Added a class named 'container' in newly created <div>
$('.container').content('Hello World!'); // Added content "Hello World!" inside the <div> by selecting it with it's class
$('.container').style('color: red') // Styled content within "container" class with text color red
If you have suggestions for improvements or find any issues, please feel free to open an issue or submit a pull request here : https://github.com/Naved-Uddin9950/rapid-dom
This project is licensed under the MIT License.
FAQs
This JavaScript library let's you manipulate DOM the easiest way. It's syntax is a little like JQuery and it is easy to learn for beginner programmers. You can manipulate DOM in one line using this library
We found that rapid-dom demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.