htmldom

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

License

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

Maintainers: 1

Created: 9 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 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