
Security News
pnpm 10.12 Introduces Global Virtual Store and Expanded Version Catalogs
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.
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()
npm install htmldom --save
npm run test
Open test.html with browser
npm run umd
selector
w3c selector, support list
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;
$('')[0] // first element
$('')[1] // second
$('').hasClass('cls');
$('').addClass('cls');
$('').addClass('cls1 cls2');
$('').removeClass() // remove all class
$('').removeClass('one') // remove one
$('').removeClass('one two') // remove multiple
$('').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()
$('').parent('.cls')
$('').html() // get html
$('').html('12') // set html
$('div').outerHTML()
$('#id').clone()
$('div').replaceWith('<view></view>')
$('').append('<h3>title');
$('').before('<h3>title');
$('').remove();
$('').css('height'); // get
$('').css('height', '200px'); // set
$('').css('height', null); // remove
$('').css({
});
$('div').find('.item > a')
$('').filter('[data-id=1]')
$('').filter(function(index) {
return $(this[index]).attr('data-id') == 1;
});
$('').eq(0) // first element
$('').eq(-1) // last element
$('').each(function(index, item) {
var $item = $(item);
});
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 '
}
let $ = createHtmlDom('<div></div>')
$.root().prepend('<head></head>')
// true
$.root().find('div')[0] === $('div')[0]
// '<head></head><div></div>'
$.html()
If you want get html string fast, choose this api, it's only output origin html code
$.html()
It will return compressed html code
options
[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
})
It will return beauty html code
options
[options.indent=' ']
code indent$.beautify({
indent: ' '
});
FAQs
Simplified html handle in nodejs
The npm package htmldom receives a total of 326 weekly downloads. As such, htmldom popularity was classified as not popular.
We found that htmldom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.
Security News
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.