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.
Security News
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.