Note: this package was intended as a joke a long time ago but it should actually work perfectly fine.
FEMDOM is a simple FORMATTER / ENCODER / MARKUPIFIER for DOCUMENT OBJECT MODEL nodes. Easy interconversion between DOM nodes, EcmaScript object and JSON strings.
Easily convert EcmaScript HTML Nodes to JSON and back.
Simple as that.
npm i femdom
/* Node */
const femdom = require('femdom')
/* Browser */
<script src="femdom.js"></script>
FEMDOM has three methods.
Isolates only the nodeName, nodeValue, childNodes and attributes of a DOM node. Returns 'abstraction' of the HTML element as regular EcmaScript object.
<div id="women" class="fancy">
... some user info here ...
</div>
/* Find element with id = 'women' */
let women = document.getElementById('women')
let result = FEMDOM.objectify(women)
Your result is an abstract representation of whatever is inside your HTML element. It could look something like this:
var result = {
"nodeType": 1,
"tagName": "div",
"attributes": [
[
"id",
"women"
]
],
"childNodes": [
{
"nodeType": 1,
"tagName": "table",
"attributes": [
[
"class",
"table"
]
],
"childNodes": [
{
"nodeType": 1,
"tagName": "caption",
"attributes": [],
"childNodes": [
{
"nodeType": 3,
"nodeName": "#text",
"nodeValue": "Women",
"childNodes": []
}
]
},
{
"nodeType": 1,
"tagName": "thead",
"attributes": [],
"childNodes": [
{
"nodeType": 1,
"tagName": "tr",
"attributes": [],
"childNodes": [
{
"nodeType": 1,
"tagName": "th",
"attributes": [],
"childNodes": [
{
"nodeType": 3,
"nodeName": "#text",
"nodeValue": "Name",
"childNodes": []
}
]
},
{
"nodeType": 1,
"tagName": "th",
"attributes": [],
"childNodes": [
{
"nodeType": 3,
"nodeName": "#text",
"nodeValue": "Age",
"childNodes": []
}
]
}
]
}
]
},
{
"nodeType": 1,
"tagName": "tbody",
"attributes": [],
"childNodes": [
{
"nodeType": 1,
"tagName": "tr",
"attributes": [],
"childNodes": [
{
"nodeType": 1,
"tagName": "td",
"attributes": [],
"childNodes": [
{
"nodeType": 3,
"nodeName": "#text",
"nodeValue": "Kylie Star",
"childNodes": []
}
]
},
{
"nodeType": 1,
"tagName": "td",
"attributes": [],
"childNodes": [
{
"nodeType": 3,
"nodeName": "#text",
"nodeValue": "@kyliestar",
"childNodes": []
}
]
}
]
},
{
"nodeType": 1,
"tagName": "tr",
"attributes": [],
"childNodes": [
{
"nodeType": 1,
"tagName": "td",
"attributes": [],
"childNodes": [
{
"nodeType": 3,
"nodeName": "#text",
"nodeValue": "Princess Rene",
"childNodes": []
}
]
},
{
"nodeType": 1,
"tagName": "td",
"attributes": [],
"childNodes": [
{
"nodeType": 3,
"nodeName": "#text",
"nodeValue": "@worshiprenee",
"childNodes": []
}
]
}
]
},
{
"nodeType": 1,
"tagName": "tr",
"attributes": [],
"childNodes": [
{
"nodeType": 1,
"tagName": "td",
"attributes": [],
"childNodes": [
{
"nodeType": 3,
"nodeName": "#text",
"nodeValue": "Amai Liu",
"childNodes": []
}
]
},
{
"nodeType": 1,
"tagName": "td",
"attributes": [],
"childNodes": [
{
"nodeType": 3,
"nodeName": "#text",
"nodeValue": "@amailiu",
"childNodes": []
}
]
}
]
}
]
}
]
}
]
}
/* Observe that when using jQuery, you simply do this */
FEMDOM.objectify(
$('#women')[0] // the zero means first result of this query
)
As the name suggests, domify() will successfully render your exported string or object back to the DOM.
/* Basically dupliates our user table */
document.body.appendChild(
FEMDOM.domify(result)
)
Simply wraps JSON.stringify() and returns a JSON string representation. The second argument for indentation is optional and is the same as the third argument of JSON.stringify. You can stringify both objectified nodes and HTML nodes directly, it can tell the difference.
/* This will internally simply call JSON stringify on your result object */
let jsonString = FEMDOM.stringify(result)
/* Stringify HTML element directly */
FEMDOM.stringify(
document.querySelector('#stuff')
)
FAQs
Stringify HTML elements to JSON and domify them back to your page.
We found that femdom demonstrated a not healthy version release cadence and project activity because the last version was released 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
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.