❤Noisy Pterodactyl Melodies

npm

Sign UpSign In
Get unlimited public & private packages + team-based management with npm Teams.Learn more »

htmldom

4.0.11 • Public • Published

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

Install

npm i htmldom

DownloadsWeekly Downloads

324

Version

4.0.11

License

MIT

Unpacked Size

126 kB

Total Files

49

Homepage

github.com/douzi8/htmldom

Repository

Gitgithub.com/douzi8/htmldom

Last publish

Collaborators

  • avatar
Try on RunKit
Report a vulnerability