Htmldom NPM | npm.io

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