htmldom — Simplified html or xml handle in nodejs
const createHtmlDom = let $ = // Get last html code$
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 $ = ;
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)
// assign;; // multiple assign // remove attr
- parent(selector)
$('').parent()
$('').parent('.cls')
- html(content)
// get html // set html
- outerHTML
- clone
- replaceWith(content)
- append(content)
- prepend(content)
- before(content)
- after(content)
;;
- remove()
;
- css(property, value)
; // get; // set; // remove;
- 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: '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 $ = $ // true$0 === 0 // '<head></head><div></div>'$
$.html()
If you want get html string fast, choose this api, it's only output origin html code
$
$.uglify()
It will return compressed html code
- {object}
options
- {string}
[options.removeAttributeQuotes=false]
=> - {string}
// Uglify inline script like this // Uglify inline style like this $ $
$.beautify()
It will return beauty html code
- {object}
options
- {string}
[options.indent=' ']
code indent
- {string}
$;