Stay organized with collections
Save and categorize content based on your preferences.
blockly > utils > dom
utils.dom namespace
Enumerations
| Enumeration |
Description |
| NodeType |
Node type constants. https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType |
Functions
| Function |
Description |
| addClass(element, className) |
Add a CSS class to a element. Handles multiple space-separated classes for legacy reasons. |
| createSvgElement(name, attrs, opt_parent) |
Helper method for creating SVG elements. |
| getFastTextWidth(textElement, fontSize, fontWeight, fontFamily) |
Gets the width of a text element using a faster method than getTextWidth. This method requires that we know the text element's font family and size in advance. Similar to getTextWidth, we cache the width we compute. |
| getFastTextWidthWithSizeString(textElement, fontSize, fontWeight, fontFamily) |
Gets the width of a text element using a faster method than getTextWidth. This method requires that we know the text element's font family and size in advance. Similar to getTextWidth, we cache the width we compute. This method is similar to getFastTextWidth but expects the font size parameter to be a string. |
| getTextWidth(textElement) |
Gets the width of a text element, caching it in the process. |
| hasClass(element, className) |
Checks if an element has the specified CSS class. |
| insertAfter(newNode, refNode) |
Insert a node after a reference node. Contrast with node.insertBefore function. |
| measureFontMetrics(text, fontSize, fontWeight, fontFamily) |
Measure a font's metrics. The height and baseline values. |
| removeClass(element, className) |
Remove a CSS class from a element. Handles multiple space-separated classes for legacy reasons. |
| removeClasses(element, classNames) |
Removes multiple classes from an element. |
| removeNode(node) |
Removes a node from its parent. No-op if not attached to a parent. |
| setCssTransform(element, transform) |
Sets the CSS transform property on an element. This function sets the non-vendor-prefixed and vendor-prefixed versions for backwards compatibility with older browsers. See https://caniuse.com/#feat=transforms2d |
| startTextWidthCache() |
Start caching text widths. Every call to this function MUST also call stopTextWidthCache. Caches must not survive between execution threads. |
| stopTextWidthCache() |
Stop caching field widths. Unless caching was already on when the corresponding call to startTextWidthCache was made. |
Variables
| Variable |
Description |
| HTML_NS |
Required name space for HTML elements. |
| SVG_NS |
Required name space for SVG elements. |
| XLINK_NS |
Required name space for XLINK elements. |
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-09-18 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-09-18 UTC."],[[["\u003cp\u003eThe \u003ccode\u003eutils.dom\u003c/code\u003e namespace provides helper functions for manipulating the Document Object Model (DOM), including elements and nodes.\u003c/p\u003e\n"],["\u003cp\u003eIt offers functionalities for managing CSS classes, creating SVG elements, measuring text dimensions, and inserting/removing nodes.\u003c/p\u003e\n"],["\u003cp\u003eThe namespace also includes utilities for working with CSS transforms and caching text width calculations for performance optimization.\u003c/p\u003e\n"],["\u003cp\u003eConstants and enumerations like \u003ccode\u003eNodeType\u003c/code\u003e, \u003ccode\u003eHTML_NS\u003c/code\u003e, \u003ccode\u003eSVG_NS\u003c/code\u003e, and \u003ccode\u003eXLINK_NS\u003c/code\u003e are provided for common DOM-related values.\u003c/p\u003e\n"]]],["The `utils.dom` namespace provides tools for manipulating DOM elements. Key actions include adding and removing CSS classes (e.g., `addClass`, `removeClass`), creating SVG elements (`createSvgElement`), and inserting or removing nodes (`insertAfter`, `removeNode`). It also features functions for measuring text widths (`getTextWidth`, `getFastTextWidth`) and caching these measurements (`startTextWidthCache`, `stopTextWidthCache`). Additionally, it provides functions for setting CSS transforms and measuring font metrics, and defines namespaces for HTML, SVG, and XLINK elements.\n"],null,["[blockly](./blockly.md) \\\u003e [utils](./blockly.utils_namespace.md) \\\u003e [dom](./blockly.utils_namespace.dom_namespace.md)\n\nutils.dom namespace\n-------------------\n\nEnumerations\n------------\n\n| Enumeration | Description |\n|----------------------------------------------------------------------|-------------------------------------------------------------------------------------|\n| [NodeType](./blockly.utils_namespace.dom_namespace.nodetype_enum.md) | Node type constants. https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType |\n\nFunctions\n---------\n\n| Function | Description |\n|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [addClass(element, className)](./blockly.utils_namespace.dom_namespace.addclass_1_function.md) | Add a CSS class to a element. Handles multiple space-separated classes for legacy reasons. |\n| [createSvgElement(name, attrs, opt_parent)](./blockly.utils_namespace.dom_namespace.createsvgelement_1_function.md) | Helper method for creating SVG elements. |\n| [getFastTextWidth(textElement, fontSize, fontWeight, fontFamily)](./blockly.utils_namespace.dom_namespace.getfasttextwidth_1_function.md) | Gets the width of a text element using a faster method than `getTextWidth`. This method requires that we know the text element's font family and size in advance. Similar to `getTextWidth`, we cache the width we compute. |\n| [getFastTextWidthWithSizeString(textElement, fontSize, fontWeight, fontFamily)](./blockly.utils_namespace.dom_namespace.getfasttextwidthwithsizestring_1_function.md) | Gets the width of a text element using a faster method than `getTextWidth`. This method requires that we know the text element's font family and size in advance. Similar to `getTextWidth`, we cache the width we compute. This method is similar to `getFastTextWidth` but expects the font size parameter to be a string. |\n| [getTextWidth(textElement)](./blockly.utils_namespace.dom_namespace.gettextwidth_1_function.md) | Gets the width of a text element, caching it in the process. |\n| [hasClass(element, className)](./blockly.utils_namespace.dom_namespace.hasclass_1_function.md) | Checks if an element has the specified CSS class. |\n| [insertAfter(newNode, refNode)](./blockly.utils_namespace.dom_namespace.insertafter_1_function.md) | Insert a node after a reference node. Contrast with node.insertBefore function. |\n| [measureFontMetrics(text, fontSize, fontWeight, fontFamily)](./blockly.utils_namespace.dom_namespace.measurefontmetrics_1_function.md) | Measure a font's metrics. The height and baseline values. |\n| [removeClass(element, className)](./blockly.utils_namespace.dom_namespace.removeclass_1_function.md) | Remove a CSS class from a element. Handles multiple space-separated classes for legacy reasons. |\n| [removeClasses(element, classNames)](./blockly.utils_namespace.dom_namespace.removeclasses_1_function.md) | Removes multiple classes from an element. |\n| [removeNode(node)](./blockly.utils_namespace.dom_namespace.removenode_1_function.md) | Removes a node from its parent. No-op if not attached to a parent. |\n| [setCssTransform(element, transform)](./blockly.utils_namespace.dom_namespace.setcsstransform_1_function.md) | Sets the CSS transform property on an element. This function sets the non-vendor-prefixed and vendor-prefixed versions for backwards compatibility with older browsers. See https://caniuse.com/#feat=transforms2d |\n| [startTextWidthCache()](./blockly.utils_namespace.dom_namespace.starttextwidthcache_1_function.md) | Start caching text widths. Every call to this function MUST also call stopTextWidthCache. Caches must not survive between execution threads. |\n| [stopTextWidthCache()](./blockly.utils_namespace.dom_namespace.stoptextwidthcache_1_function.md) | Stop caching field widths. Unless caching was already on when the corresponding call to startTextWidthCache was made. |\n\nVariables\n---------\n\n| Variable | Description |\n|--------------------------------------------------------------------------|-----------------------------------------|\n| [HTML_NS](./blockly.utils_namespace.dom_namespace.html_ns_variable.md) | Required name space for HTML elements. |\n| [SVG_NS](./blockly.utils_namespace.dom_namespace.svg_ns_variable.md) | Required name space for SVG elements. |\n| [XLINK_NS](./blockly.utils_namespace.dom_namespace.xlink_ns_variable.md) | Required name space for XLINK elements. |"]]
