🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

htmldom

Package Overview
Dependencies
Maintainers
1
Versions
66
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

htmldom

Simplified html handle in nodejs

4.0.11
latest
Source
npm
Version published
Weekly downloads
315
-17.75%
Maintainers
1
Weekly downloads
 
Created
Source

htmldom — Simplified html or xml handle in nodejs

NPM

const createHtmlDom = require('htmldom')

let $ = createHtmlDom('<div><button>1</button><a href="https">2</a></div>')

$('*').each((index, item) => {
  let $item = $(item)  
})

$('div button').addClass('title').attr('k', 'v')
$('a').attr('href')
$('div').find('a').attr('data-id', '5')

// Get last html code
$.html()

install

npm install htmldom --save

test

npm run test

umd

Open test.html with browser

npm run umd

API

$(selector)

  • {string} selector w3c selector, support list
    • element
    • *
    • element > element
    • element + element
    • element ~ element
    • #id
    • .class
    • [attribute]
    • [attribute=value]
    • [attribute^=value]
    • [attribute$=value]
    • [attribute~=value]
    • [attribtue*=value]
let $ = createHtmlDom('html code')

$('*').each((index, item) => {
  // Origin dom data 
  console.log(item)

  // Like jQuery object
  let $el = $(item)
})

$('div .class a')
$('.item > *')
$('div + p')
$('.item ~ p')
$('.item > a')
$('.wrap .item')
$('#id li')
$('[title]').attr('key', 'value').addClass('cls').removeClass('cls2');

support jQuery method list

  • length
$('').length;
$('')[0]        // first element
$('')[1]        // second
  • hasClass(class)
$('').hasClass('cls');
  • addClass(class)
$('').addClass('cls');
$('').addClass('cls1 cls2');
  • removeClass(class)
$('').removeClass()           // remove all class
$('').removeClass('one')      // remove one
$('').removeClass('one two')  // remove multiple
  • attr(key, value)
$('').attr('key', 'value')   // assign
$('').attr('key', function(index,oldValue) {});
$('').attr({
  k: 'v',
  'data-id': 'v2',
  k3: null
});                          // multiple assign
$('').attr('key', null)      // remove attr
  • parent(selector)
$('').parent()
$('').parent('.cls')
  • html(content)
$('').html()                 // get html
$('').html('12')             // set html
  • outerHTML
$('div').outerHTML()
  • clone
$('#id').clone()
  • replaceWith(content)
  • append(content)
  • prepend(content)
  • before(content)
  • after(content)
$('div').replaceWith('<view></view>')
$('').append('<h3>title');
$('').before('<h3>title');
  • remove()
$('').remove();
  • css(property, value)
$('').css('height');               // get
$('').css('height', '200px');      // set
$('').css('height', null);         // remove
$('').css({
  
});
  • find(selector)
$('div').find('.item > a')
  • filter(selector)
$('').filter('[data-id=1]')
$('').filter(function(index) {
  return $(this[index]).attr('data-id') == 1;
});
  • eq(index)
$('').eq(0)     // first element
$('').eq(-1)    // last element
  • each(function(index, item) {})
$('').each(function(index, item) {
  var $item = $(item);
});

$.nodes

Get a dom tree

/**
 * <div id="test" class="title header" style="color:red;width:200px;"></div>
 */
 {
   type: 'tag',
   name: 'div',
   attributes: {
     class: 'title header',
     id: 'test',
     style: 'color:red;width:200px;'
   },
   parent: null,
   children: [],
   classList: new Set(['title', 'header']),
   style: {
     color: 'red',
     width: '200px'
   }
 }

/**
 * raw tag (script, style, textarea)
 * <script>alert(1)</script>
 */
{
  type: 'tag',
  name: 'script',
  tagType: 'rawTag',
  textContent: 'alert(1)'
}

/**
 * selfClosingTag
 * <image src="" />
 */
{ 
  type: 'tag',
  name: 'image',
  attributes: { src: '' },
  tagType: 'selfClosingTag'
}

/**
 * voidTag
 * <input>
 */
{ 
  type: 'tag',
  name: 'input',
  tagType: 'voidTag',
}

/**
 *  text tag
 */
 {
  type: 'text',
  data: 'text tag'
 }


/**
 *  <!-- comemnt data -->
 */
 {
  type: 'comment',
  data: ' comemnt data '
 }

$.root()

let $ = createHtmlDom('<div></div>')

$.root().prepend('<head></head>')

// true
$.root().find('div')[0] === $('div')[0]

// '<head></head><div></div>'
$.html()

$.html()

If you want get html string fast, choose this api, it's only output origin html code

$.html()

$.uglify()

It will return compressed html code

  • {object} options
    • {string} [options.removeAttributeQuotes=false]
      <div id="test"></div> => <div id=test></div>

// Uglify inline script like this
$('script').each((index, item) => {
  let $item = $(item)
  let type = $item.attr('type')
  let src = $item.attr('src')
 
  if ((type && type !== 'text/javascript') || src) return 

  // Find a uglify plugin by yourself
  item.textContent = uglifyJs(item.textContent)
})

// Uglify inline style like this
$('style').each((index, item) => {
  let type = $(item).attr('type')

  if (type && type !== 'text/css') return 

  // Find a uglify plugin by yourself
  item.textContent = uglifyCss(item.textContent)
})


$.uglify()

$.uglify({
  removeAttributeQuotes: true
})

$.beautify()

It will return beauty html code

  • {object} options
    • {string} [options.indent=' '] code indent
$.beautify({
  indent: '  '
});

Keywords

html
dom
minifier
beautify
online
jQuery

FAQs

Package last updated on 16 Oct 2019

Did you know?

Socket

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.

Install

Related posts

The Growing Risk of Malicious Browser Extensions

Research

Security News

The Growing Risk of Malicious Browser Extensions

Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.

By Kush Pandya  -  Jun 13, 2025