femdom

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.

JOI | JAVASCRIPT OBJECT INTERCONVERSION

Easily convert EcmaScript HTML Nodes to JSON and back.

Acquire

Simple as that.

npm i femdom 

/* Node */
const femdom = require('femdom')

/* Browser */
<script src="femdom.js"></script>

Methods

FEMDOM has three methods.

• objectify(htmlNode)
• domify(object)
• stringify(object or htmlNode, indentation)

OBJECTIFY

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
)

DOMIFY

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)
)

STRINGIFY

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')
)