home 1.2.0 - katsu-oh/html.js GitHub Wiki
details...
import {HTML, E} from "https://cdn.jsdelivr.net/gh/katsu-oh/[email protected]/html.js"
The import
must be calld before HTML()
or E()
is called.
details...
new HTML(targetElement)
new HTML`target-element-id`
new HTML()
HTML(targetElement)
HTML`target-element-id`
HTML()
An instance of HTML
object with a template element as the root element is created. The template element is set as the current element of the instance of HTML
object at first.
- target
- The target element or the ID of the target element to publish. If omitted,
HTML.prototype.publish()
must not be called.
A created instance of HTML
object.
details...
Function list:
$A, $ABBR, $ACRONYM, $ADDRESS, $APPLET, $AREA, $ARTICLE, $ASIDE, $AUDIO, $B, $BASE, $BASEFONT, $BDI, $BDO, $BIG, $BLOCKQUOTE, $BODY, $BR, $BUTTON, $CANVAS, $CAPTION, $CENTER, $CITE, $CODE, $COL, $COLGROUP, $COMMAND, $DATA, $DATALIST, $DD, $DEL, $DETAILS, $DFN, $DIR, $DIV, $DL, $DT, $EM, $EMBED, $FIELDSET, $FIGCAPTION, $FIGURE, $FONT, $FOOTER, $FORM, $FRAME, $FRAMESET, $H1, $H2, $H3, $H4, $H5, $H6, $HEAD, $HEADER, $HGROUP, $HR, $HTML, $I, $IFRAME, $IMG, $INPUT, $INS, $ISINDEX, $KBD, $KEYGEN, $LABEL, $LEGEND, $LI, $LINK, $MAIN, $MAP, $MARK, $MENU, $MENUITEM, $META, $METER, $NAV, $NOFRAMES, $NOSCRIPT, $OBJECT, $OL, $OPTGROUP, $OPTION, $OUTPUT, $P, $PARAM, $PICTURE, $PRE, $PROGRESS, $Q, $RP, $RT, $RUBY, $S, $SAMP, $SCRIPT, $SECTION, $SELECT, $SMALL, $SOURCE, $SPAN, $STRIKE, $STRONG, $STYLE, $SUB, $SUMMARY, $SUP, $TABLE, $TBODY, $TD, $TEMPLATE, $TEXTAREA, $TFOOT, $TH, $THEAD, $TIME, $TITLE, $TR, $TRACK, $TT, $U, $UL, $VAR, $VIDEO, $WBR
HTML`target-element-id`.$DIV.$;
An element with the <TAG-NAME>
is created and added to the end of the children of the current element of this HTML
. The created element is set as the current element of this HTML
.
- <TAG-NAME>
- The name that the element is created with. See Function list.
This HTML
.
details...
HTML`target-element-id`.$SPAN.$;
HTML(spanElement1).$BR.$;
The parent of current element of this HTML
is set as the the current element of this HTML
. It is also necessary for tags that have no end tags.
This HTML
.
details...
Function list:
abbr, accept, acceptCharset, accesskey, action, align, alink, allow, allowfullscreen, alt, archive, as, async, autocapitalize, autocomplete, autofocus, autoplay, axis, Background, bgcolor, Border, cellpadding, cellspacing, char, charoff, charset, checked, cite, class, classid, Clear, code, codebase, codetype, Color, cols, colspan, compact, content, contenteditable, controls, coords, crossorigin, data, datetime, declare, decoding, default, defer, dir, dirname, disabled, download, draggable, enctype, enterkeyhint, face, for, form, formaction, formenctype, formmethod, formnovalidate, formtarget, frame, frameborder, headers, Height, hidden, high, href, hreflang, hspace, httpEquiv, id, imagesizes, imagesrcset, inputmode, integrity, is, ismap, itemid, itemprop, itemref, itemscope, itemtype, kind, label, lang, language, link, list, loading, longdesc, loop, low, marginheight, marginwidth, max, maxlength, media, method, min, minlength, multiple, muted, name, nohref, nomodule, nonce, noresize, noshade, novalidate, nowrap, object, open, optimum, pattern, ping, placeholder, playsinline, poster, preload, profile, prompt, readonly, referrerpolicy, rel, required, rev, reversed, rows, rowspan, rules, sandbox, scheme, scope, scrolling, selected, shape, size, sizes, slot, span, spellcheck, src, srcdoc, srclang, srcset, standby, start, step, style, summary, tabindex, target, text, title, translate, type, usemap, valign, value, valuetype, version, vlink, vspace, Width, wrap
*1. 'Background', 'Border', 'Clear', 'Color', 'Height', and 'Width' attributes are upper camel case, because styles with the same names exist.
*2. Attributes with hyphen separated names are implemented in functions with lower camel case names.
*3. Custom data attributes ('data-*') are available bydata_()
.
HTML(divElement).$A.href(url).$;
HTML(divElement).$A.href`http://www.example.com/`.$;
The value
is assigned to the attribute with the <attribute-name>
of the current element of this HTML
. If the attribute is a boolean attribute, the value
must be ""
or the attribute name.
- <attribute-name>
- The name of the attribute that the
value
is assigned to. See Function list. - value
- The value assigned to the attribute with the
<attribute-name>
of the current element of thisHTML
. If the attribute is a boolean attribute,""
or the attribute name.
This HTML
.
details...
HTML(document.body).$DIV.data_(name, value).$;
HTML(document.body).$DIV.data_(name)(value).$;
HTML(document.body).$DIV.data_(name)`value1`.$;
HTML(document.body).$DIV.data_`name1`(value).$;
HTML(document.body).$DIV.data_`name1``value1`.$;
The value
is assigned to the custom data attribute with the name
of the current element of this HTML
.
- name
- The name of the custom data attribute that the
value
is assigned to. The name cannot contain uppercase letters. If consisting of multiple words, the name can be separated by hyphens. - value
- The value assigned to the custom data attribute with the
name
of the current element of thisHTML
.
This HTML
.
details...
Function list:
azimuth, background, backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, backgroundRepeat, border, borderBottom, borderBottomColor, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopStyle, borderTopWidth, borderWidth, bottom, captionSide, clear, clip, color, Content, counterIncrement, counterReset, cue, cueAfter, cueBefore, cursor, direction, display, elevation, emptyCells, float, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, height, left, letterSpacing, lineHeight, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, orphans, outline, outlineColor, outlineStyle, outlineWidth, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, pageBreakAfter, pageBreakBefore, pageBreakInside, pause, pauseAfter, pauseBefore, pitch, pitchRange, playDuring, position, quotes, richness, right, speak, speakHeader, speakNumeral, speakPunctuation, speechRate, stress, tableLayout, textAlign, textDecoration, textIndent, textTransform, top, unicodeBidi, verticalAlign, visibility, voiceFamily, volume, whiteSpace, widows, width, wordSpacing, zIndex
*1. 'Content' style is upper camel case, because an attribute with the same name exists.
*2. Styles with hyphen separated names are implemented in functions with lower camel case names.
HTML'div-1'.$SPAN.color('red').$;
HTML'div-1'.$SPAN.color`red`.$;
The value
is assigned to the style with the <style-name>
of the current element of this HTML
.
- <style-name>
- The name of the style that the
value
is assigned to. See Function list. - value
- The value assigned to the style with the
<style-name>
of the current element of thisHTML
.
This HTML
.
details...
Function list:
on.abort, on.afterprint, on.afterscriptexecute, on.animationcancel, on.animationend, on.animationiteration, on.animationstart, on.appinstalled, on.auxclick, on.beforeinput, on.beforeprint, on.beforescriptexecute, on.beforeunload, on.blur, on.cancel, on.canplay, on.canplaythrough, on.change, on.click, on.close, on.compositionend, on.compositionstart, on.compositionupdate, on.contextmenu, on.copy, on.cuechange, on.cut, on.dblclick, on.devicemotion, on.deviceorientation, on.DOMActivate, on.DOMContentLoaded, on.DOMMouseScroll, on.drag, on.dragend, on.dragenter, on.dragleave, on.dragover, on.dragstart, on.drop, on.durationchange, on.emptied, on.ended, on.enterpictureinpicture, on.error, on.focus, on.focusin, on.focusout, on.formdata, on.fullscreenchange, on.fullscreenerror, on.gamepadconnected, on.gamepaddisconnected, on.gotpointercapture, on.hashchange, on.input, on.invalid, on.keydown, on.keypress, on.keyup, on.languagechange, on.leavepictureinpicture, on.load, on.loadeddata, on.loadedmetadata, on.loadstart, on.lostpointercapture, on.message, on.messageerror, on.mousedown, on.mouseenter, on.mouseleave, on.mousemove, on.mouseout, on.mouseover, on.mouseup, on.mousewheel, on.offline, on.online, on.orientationchange, on.overflow, on.pagehide, on.pageshow, on.paste, on.pause, on.play, on.playing, on.pointercancel, on.pointerdown, on.pointerenter, on.pointerleave, on.pointerlockchange, on.pointerlockerror, on.pointermove, on.pointerout, on.pointerover, on.pointerup, on.popstate, on.progress, on.ratechange, on.readystatechange, on.rejectionhandled, on.reset, on.resize, on.scroll, on.search, on.seeked, on.seeking, on.select, on.selectionchange, on.selectstart, on.show, on.slotchange, on.stalled, on.storage, on.submit, on.suspend, on.timeupdate, on.toggle, on.touchcancel, on.touchend, on.touchmove, on.touchstart, on.transitioncancel, on.transitionend, on.transitionrun, on.transitionstart, on.underflow, on.unhandledrejection, on.unload, on.visibilitychange, on.volumechange, on.waiting, on.webglcontextcreationerror, on.webglcontextlost, on.webglcontextrestored, on.wheel
HTML'sectionA'.$DIV.on.click(handler).$;
HTML'sectionA'.$DIV.on.click(handler, false).$;
The listener
is added to the event listeners for the <event-type>
on the current element of this HTML
.
- <event-type>
- The event type that the
listener
is added to the event listeners for. See Function list. - listener
- The function or the
EventListener
object that is added to the event listeners for the<event-type>
on the current element of thisHTML
. - options
- Same as
options
oruseCapture
ofEventTarget.addEventListener()
.
This HTML
.
details...
HTML'sectionA'.$DIV.on.publish(handler).$;
HTML'sectionA'.$DIV.on.publish(handler, false).$;
The listener
is added to the event listeners for the event type 'publish'
on the current element of this HTML
. Event listeners for the event type 'publish'
are triggered by calling HTML.prototype.publish()
.
- listener
- The function or the
EventListener
object that is added to the event listeners for the event type'publish'
on the current element of thisHTML
. - options
- Same as
options
oruseCapture
ofEventTarget.addEventListener()
.
This HTML
.
details...
HTML(container).$SPAN.color`red`.T(message).$;
HTML(container).$SPAN.color`red`.T`This is a red message.`.$;
The text
is added to the end of the contents of the current element of this HTML
. The text
can contain HTML special characters, they are escaped in this method.
- text
- The text content that is added to the end of the content of the current element of this
HTML
.
This HTML
.
details...
HTML(container).$DIV.HTML` `.$;
HTML(container).$DIV.HTML(HTML().$SPAN.T`text`.$).$;
The html
is added to the end of the contents of the current element of this HTML
. The html
is the other instance of HTML
object or a string that contains the HTML code. If the html
is an instance of HTML
object, the contents of the root element of the html
are moved, and the html
will no longer be available.
- html
- The other instance of
HTML
object or a string that contains the HTML code that is added to the end of the contents of the current element of thisHTML
.
This HTML
.
details...
HTML'target-id'.$SPAN.T`text`.$.publish();
HTML'target-id'.$SPAN.T`text`.$.publish(true);
The target element that is specified in HTML()
or the contents of the target element are replaced with the contents of the root element of this HTML
. The event listeners for the event type 'public'
on the elements that the root element of this HTML
contains are called after being replaced. The contents of the root element of this HTML
are moved, and this HTML
will no longer be available.
- removeTarget
- If
true
, the contents of the root element are added where the target element is, the target element is removed, else the contents of the root element are added as the contents of target element, the contents of the target element are removed.
details...
const html = HTML().$SPAN.T`text`.$.toString();
alert(HTML().$SPAN.T`text`.$);
The HTML code of the contents of the root element of this HTML
is retrieved as a string.
A string that contains the HTML code of the contents of the root element of this HTML
.
details...
const js = HTML().HTML
`<div>
<p class="p1" style="background-color: white;">
Converting from HTML to JavaScript...
</p>
</div>`
.toLocaleString();
The JavaScript code that manipulates an instance of HTML
object to have the same contents as the root element of this HTML
is retrieved as a string.
A string that contains the JavaScript code that manipulates an instance of HTML
object to have the same contents as the root element of this HTML
.
*1. Line breaks and whitespace characters following line breaks in text contents are ignored.
*2. Names of functions are computed, therefore functions may not be defined. For example, event attributes are not defined.
details...
HTML.prototype.defineTag("NEWTAG");
delete HTML.prototype.$NEWTAG;
const h = HTML();
h.defineTag("NEWTAG");
delete h.$NEWTAG;
A function is defined for the tag with the name
in future HTML, SVG, and so on.
- name
- The name of the tag that the function is defined for.
details...
HTML.prototype.defineAttribute("new-attribute");
delete HTML.prototype.newAttribute;
const h = HTML();
h.defineAttribute("new-attribute");
delete h.newAttribute;
A function is defined for the attribute with the name
in future HTML, SVG, and so on.
- name
- The name of the attribute that the function is defined for.
details...
HTML.prototype.defineStyle("new-style");
delete HTML.prototype.newStyle;
const h = HTML();
h.defineStyle("new-style");
delete h.newStyle;
A function is defined for the style with the name
in future HTML, SVG, and so on.
- name
- The name of the style that the function is defined for.
details...
HTML.prototype.defineEvent("newevent");
delete HTML.prototype.on.newevent;
const h = HTML();
h.defineEvent("newevent");
delete h.on.newevent;
A function is defined for the event with the type
in future HTML, SVG, and so on.
- type
- The type of the event that the function is defined for.