Home - katsu-oh/html.js Wiki

<Programmer's Reference>


import

details...
<script type="module">
  import {HTML, E} from "https://cdn.jsdelivr.net/gh/katsu-oh/[email protected]/html.min.js";
  HTML(document.body). $P. T`Welcome to html.js!`. $. publish();
</script>

The import must be called before HTML() or E() is called.



HTML([target])

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.

Parameters

target
The target element or the ID of the target element to publish. If omitted, HTML.prototype.publish() must not be called.

Return value

A created instance of HTML object.


HTML.prototype.$<TAG-NAME>

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, $SLOT, $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.

Parameters

<TAG-NAME>
The name that the element is created with. See Function list.

Return value

This HTML.

HTML.prototype.$

details...
HTML`target-element-id`.$SPAN.$;
HTML(spanElement1).$BR.$;

The parent of the current element of this HTML is set as the current element of this HTML. It is also necessary for tags that have no end tags.

Return value

This HTML.

HTML.prototype.<attribute-name>[(value)]

details...

Function list:
abbr, accept, acceptCharset, accesskey, action, align, alink, allow, allowfullscreen, alt, archive, ariaActivedescendant, ariaAtomic, ariaAutocomplete, ariaBusy, ariaChecked, ariaColcount, ariaColindex, ariaColspan, ariaControls, ariaCurrent, ariaDescribedby, ariaDetails, ariaDisabled, ariaDropeffect, ariaErrormessage, ariaExpanded, ariaFlowto, ariaGrabbed, ariaHaspopup, ariaHidden, ariaInvalid, ariaKeyshortcuts, ariaLabel, ariaLabelledby, ariaLevel, ariaLive, ariaModal, ariaMultiline, ariaMultiselectable, ariaOrientation, ariaOwns, ariaPlaceholder, ariaPosinset, ariaPressed, ariaReadonly, ariaRelevant, ariaRequired, ariaRoledescription, ariaRowcount, ariaRowindex, ariaRowspan, ariaSelected, ariaSetsize, ariaSort, ariaValuemax, ariaValuemin, ariaValuenow, ariaValuetext, as, async, autocapitalize, autocomplete, autofocus, autoplay, axis, Background, bgcolor, Border, capture, 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, role, 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 formatted in upper camel case, because styles with the same names exist. It is recommended to use the styles instead of the attributes.
*2. Attributes with hyphen separated names are implemented in functions with the names converted to lower camel case.
*3. Custom data attributes ('data-*') are available by HTML.prototype.data_().

HTML(divElement).$A.href(url).autofocus(true).$;
HTML(divElement).$A.href`http://www.example.com/`.autofocus.$;

The value is assigned to the attribute with the <attribute-name> of the current element of this HTML. If the value is omitted or true, "" is assigned. If the value is false, no value is assigned. If the value is not a boolean, a string that the value is converted to is assigned.

Parameters

<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 this HTML. If omitted or true, "". If false, no value. If not a boolean, converted to a string.

Return value

This HTML.

HTML.prototype.data_(name, value)

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.

Parameters

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 this HTML.

Return value

This HTML.

HTML.prototype.<style-name>(value)

details...

Function list:
alignContent, alignItems, alignSelf, all, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, azimuth, backfaceVisibility, background, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageRepeat, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRadius, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxDecorationBreak, boxShadow, boxSizing, breakAfter, breakBefore, breakInside, captionSide, clear, clip, color, columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columns, columnSpan, columnWidth, Content, counterIncrement, counterReset, crop, cue, cueAfter, cueBefore, cursor, direction, display, elevation, emptyCells, fit, fitPosition, flex, flexBasis, flexDirection, flexFlow, flexGrow, flexShrink, flexWrap, float, font, fontFamily, fontFeatureSettings, fontKerning, fontLanguageOverride, fontSize, fontSizeAdjust, fontStretch, fontStyle, fontSynthesis, fontVariant, fontVariantAlternates, fontVariantCaps, fontVariantEastAsian, fontVariantLigatures, fontVariantNumeric, fontVariantPosition, fontWeight, gridCell, gridColumn, gridColumnAlign, gridColumns, gridColumnSizing, gridColumnSpan, gridFlow, gridRow, gridRowAlign, gridRows, gridRowSizing, gridRowSpan, gridTemplate, hangingPunctuation, height, hyphens, icon, imageOrientation, imageResolution, imeMode, justifyContent, left, letterSpacing, lineBreak, lineHeight, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, marks, marqueeDirection, marqueePlayCount, marqueeSpeed, marqueeStyle, maxHeight, maxWidth, minHeight, minWidth, moveTo, navDown, navIndex, navLeft, navRight, navUp, objectFit, objectPosition, opacity, order, orphans, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, overflow, overflowStyle, overflowWrap, overflowX, overflowY, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, page, pageBreakAfter, pageBreakBefore, pageBreakInside, pagePolicy, pause, pauseAfter, pauseBefore, perspective, perspectiveOrigin, pitch, pitchRange, playDuring, position, quotes, resize, rest, restAfter, restBefore, richness, right, Size, speak, speakAs, speakHeader, speakNumeral, speakPunctuation, speechRate, stress, tableLayout, tabSize, textAlign, textAlignLast, textCombineHorizontal, textCombineMode, textDecoration, textDecorationColor, textDecorationLine, textDecorationSkip, textDecorationStyle, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIndent, textJustify, textOrientation, textOverflow, textShadow, textTransform, textUnderlinePosition, top, transform, transformOrigin, transformStyle, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, unicodeBidi, verticalAlign, visibility, voiceBalance, voiceDuration, voiceFamily, voicePitch, voiceRange, voiceRate, voiceStress, voiceVolume, volume, whiteSpace, widows, width, wordBreak, wordSpacing, writingMode, zIndex
*1. 'Content' and 'Size' styles are formatted in upper camel case, because attributes with the same names exist. The styles are never used as inline styles.
*2. Styles with hyphen separated names are implemented in functions with the names converted to lower camel case.

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.

Parameters

<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 this HTML.

Return value

This HTML.

HTML.prototype.on.<event-type>(listener[, options])

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.

Parameters

<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 this HTML.
options
Same as options or useCapture of EventTarget.addEventListener().

Return value

This HTML.

HTML.prototype.on.publish(listener[, options])

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().

Parameters

listener
The function or the EventListener object that is added to the event listeners for the event type 'publish' on the current element of this HTML.
options
Same as options or useCapture of EventTarget.addEventListener().

Return value

This HTML.

HTML.prototype.T(text)

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 appear as escapes in HTML codes.

Parameters

text
The text content that is added to the end of the content of the current element of this HTML.

Return value

This HTML.

HTML.prototype.HTML(html)

details...
HTML(container).$DIV.HTML`&nbsp;`.$;
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.

Parameters

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 this HTML.

Return value

This HTML.


HTML.prototype.publish([removeTarget])

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.

Parameters

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 the target element, the previous contents of the target element are removed.

HTML.prototype.toString()

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.

Return value

A string that contains the HTML code of the contents of the root element of this HTML.

HTML.prototype.toLocaleString()

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.

Return value

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.


HTML.prototype.defineTag(name)

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.

Parameters

name
The name of the tag that the function is defined for.

HTML.prototype.defineAttribute(name)

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.

Parameters

name
The name of the attribute that the function is defined for.

HTML.prototype.defineStyle(name)

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.

Parameters

name
The name of the style that the function is defined for.

HTML.prototype.defineEvent(type)

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.

Parameters

type
The type of the event that the function is defined for.



E(id)

details...
E`div-target`.style.visibility = "hidden";

The element that the id is assigned to is searched for in the document.

Parameters

id
The ID that the element that is searched for has.

Return value

The element that has the id, or null if no element has the id.

⚠️ **GitHub.com Fallback** ⚠️