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
- {string}
selectorw3c 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);
});
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
- {object}
options- {string}
[options.removeAttributeQuotes=false]
<div id="test"></div> => <div id=test></div>
- {string}
// 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
- {object}
options- {string}
[options.indent=' ']code indent
- {string}
$.beautify({
indent: ' '
});