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');

prev(selector)
Get the immediately preceding sibling element
next(selector)
Get the immediately following sibling element

$('#title').prev()
$('#title').prev('.selected')
$('#title').next().next('.selected')

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-latest?

Is htmldom-latest popular?

Is htmldom-latest well maintained?

Last updated on 21 Jun 2023

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