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

Demo Install Sign in

htmldom

Package Overview

Advanced tools

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: 6 years ago

Weekly downloads: 373

Maintainers: 1

Weekly downloads

Created: 10 years ago

Source

htmldom — Simplified html or xml handle in nodejs

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

FAQs

What is htmldom?

Is htmldom popular?

Is htmldom well maintained?

Package last updated on 16 Oct 2019

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.

Install

htmldom

htmldom — Simplified html or xml handle in nodejs

install

test

umd

API

$(selector)

$.nodes

$.root()

$.html()

$.uglify()

$.beautify()

Keywords

Related posts

Node.js Moves Toward Stable TypeScript Support with Amaro 1.0

PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials