Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

htmldom

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

htmldom

Simplified html handle in nodejs

0.1.16
Source
npm

Version published: 10 years ago

Weekly downloads: 710; increased by117.13%

Maintainers: 1

Weekly downloads

Created: 10 years ago

Source

htmldom — Simplified html handle in nodejs

var HtmlDom = require('htmldom');

install

npm install htmldom --save

test

npm test

online demo

http://douzi8.github.io/htmldom/

browserify

Exports HtmlDom to front, then uglify it

browserify htmldom.js -s HtmlDom > htmldom.front.js 
uglifyjs htmldom.front.js -o htmldom.front.js

API

Constructor(code, escape)

{string} code html string
{array} [escape] escape server code

// html code
var html = new HtmlDom('<div>1</div>');

// underscore template
var html = new HtmlDom('<div <%= a %>></div>', [/<%([\s\S]+?)%>/g]);

// AngularJs template
var html = new HtmlDom('<div {{name}}></div>', [/\{\{([\s\S]+?)\}\}/g]);

dom

The structure of html dom, it's an array with object item, list item type

html.dom

documentType

{
  type: 'documentType',
  value: '<!doctype html>'
}

tag

{
  type: 'tag',
  name: 'div',
  attributes: {
    id: 'test'
  },
  children: [],
  // Parent is null or a tag
  parent: {

  }
}

text

{
  type: 'text',
  value: 'welcome'
}

comment

{
  type: 'comment',
  value: 'header comment',
  isIEHack: false
}

$(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]

var $ = html.$;
$('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({});              // multiple assign
$('').attr('key', null)      // remove attr

data(name, value)

<div data-true="true" data-false="false" data-null="null" 
     data-obj='{"key": "value"}' data-array="[1, 2]" 
     data-string="word"></div>

$('div').data('true') === true
$('div').data('null') === null
$('div').data('obj')            // {key: "value" }
$('div').data('id', 5)          // set data

parent(selector)

$('').parent()
$('').parent('.cls')

html(content)

$('').html()                 // get html
$('').html('12')             // set html

append(content)
prepend(content)
before(content)
after(content)

$('').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);
});

html()

If you want get html string fast, choose this api, it's only output origin html code

html.html()

stringify()

{object} options

{boolean} [options.booleanAttributes=false] remove boolean attribute

<input disabled="disabled"> => <input disbaled>

{boolean} [options.removeAttributeQuotes=false]

<div id="test"></div> => <div id=test></div>

{boolean} [options.removeJsType=true]

<script type="text/javascript"></script> => <script></script>

{boolean} [options.removeCssType=true]

<style type="text/css"></style> => <style></style>

{array} [options.jsCodeType] js code type

<script type="text/config">
  // This also js code
  // Set options.jsCodeType = ['text/config'] for uglify js code
  var a = 4;
</script>

{array} [options.templateType] html code type

<script type="text/template">
  <!-- This is html code
   Set options.templateType = ['text/template'] for uglify html code -->
  <div>
  </div>
</script>

{function} [options.onServerCode] uglify server code callback
{object} [options.cssdom]
Use cssdom uglify css code with style tag and style attribute

<style>a { color:red; } </style> => <style>a{color:#f00}</style>
<div style="margin: 10px 15px 10px 15px;"></div> => <div style="margin:10 15px"></div>

{object} [options.uglifyJs]
Use uglify-js uglify js code with script tag and inline events

<script> var a = 5; </script>         => ...
<div onclick="return false"></div>    => <div onclick="return !1"></div>

html.stringify({
  booleanAttributes: true,
  templateType: ['text/template'],
  // handle server code by callback
  onServerCode: function(code) {
    return code;
  },
  uglifyJs: {}
});

beautify()

{object} options
- {string} [options.indent=' '] code indent
- {object} [options.cssdom]
  Use cssdom beautify css code
- {object} [options.jsBeautify]
  Use js-beautify beautify js code

html.beautify({
  indent: '  ',
  jsBeautify: {}
});

Keywords

FAQs

What is htmldom?

Is htmldom popular?

Is htmldom well maintained?

Package last updated on 06 May 2015

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