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
The npm package rapid-dom receives a total of 1 weekly downloads. As such, rapid-dom popularity was classified as not popular.
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.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.