Praleisti ir pereiti prie pagrindinio turinio

Kaip naršyklė mato DOM elementą?

Turimas dokumentas:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

 <body>
<div id="testas">TESTAS TESTAS</div>
</body>
<script>
function print_object_inf(obj){
var res = '<ul>';

for (i in obj)
res += '<li><b>' + i + '</b>: ' + obj[i] + '</li>';

res += '</ul>';
document.write(res);
}

var test = document.querySelector('#testas');
print_object_inf(test);
</script>
</html>



Rezultate matome informacija, kurią naršyklė turi apie musu elementą (objektą) div:

TESTAS TESTAS
  • align:
  • title:
  • lang:
  • translate: true
  • dir:
  • dataset: [object DOMStringMap]
  • hidden: false
  • tabIndex: -1
  • accessKey:
  • draggable: false
  • spellcheck: true
  • contentEditable: inherit
  • isContentEditable: false
  • offsetParent: [object HTMLBodyElement]
  • offsetTop: 8
  • offsetLeft: 8
  • offsetWidth: 1904
  • offsetHeight: 18
  • style: [object CSSStyleDeclaration]
  • innerText: TESTAS TESTAS
  • outerText: TESTAS TESTAS
  • onabort: null
  • onblur: null
  • oncancel: null
  • oncanplay: null
  • oncanplaythrough: null
  • onchange: null
  • onclick: null
  • onclose: null
  • oncontextmenu: null
  • oncuechange: null
  • ondblclick: null
  • ondrag: null
  • ondragend: null
  • ondragenter: null
  • ondragleave: null
  • ondragover: null
  • ondragstart: null
  • ondrop: null
  • ondurationchange: null
  • onemptied: null
  • onended: null
  • onerror: null
  • onfocus: null
  • oninput: null
  • oninvalid: null
  • onkeydown: null
  • onkeypress: null
  • onkeyup: null
  • onload: null
  • onloadeddata: null
  • onloadedmetadata: null
  • onloadstart: null
  • onmousedown: null
  • onmouseenter: null
  • onmouseleave: null
  • onmousemove: null
  • onmouseout: null
  • onmouseover: null
  • onmouseup: null
  • onmousewheel: null
  • onpause: null
  • onplay: null
  • onplaying: null
  • onprogress: null
  • onratechange: null
  • onreset: null
  • onresize: null
  • onscroll: null
  • onseeked: null
  • onseeking: null
  • onselect: null
  • onstalled: null
  • onsubmit: null
  • onsuspend: null
  • ontimeupdate: null
  • ontoggle: null
  • onvolumechange: null
  • onwaiting: null
  • onwheel: null
  • onauxclick: null
  • ongotpointercapture: null
  • onlostpointercapture: null
  • onpointerdown: null
  • onpointermove: null
  • onpointerup: null
  • onpointercancel: null
  • onpointerover: null
  • onpointerout: null
  • onpointerenter: null
  • onpointerleave: null
  • nonce:
  • click: function click() { [native code] }
  • focus: function focus() { [native code] }
  • blur: function blur() { [native code] }
  • namespaceURI: http://www.w3.org/1999/xhtml
  • prefix: null
  • localName: div
  • tagName: DIV
  • id: testas
  • className:
  • classList:
  • slot:
  • attributes: [object NamedNodeMap]
  • shadowRoot: null
  • assignedSlot: null
  • innerHTML: TESTAS TESTAS
  • outerHTML:
    TESTAS TESTAS
  • scrollTop: 0
  • scrollLeft: 0
  • scrollWidth: 1904
  • scrollHeight: 18
  • clientTop: 0
  • clientLeft: 0
  • clientWidth: 1904
  • clientHeight: 18
  • onbeforecopy: null
  • onbeforecut: null
  • onbeforepaste: null
  • oncopy: null
  • oncut: null
  • onpaste: null
  • onsearch: null
  • onselectstart: null
  • previousElementSibling: null
  • nextElementSibling: [object HTMLScriptElement]
  • children: [object HTMLCollection]
  • firstElementChild: null
  • lastElementChild: null
  • childElementCount: 0
  • onwebkitfullscreenchange: null
  • onwebkitfullscreenerror: null
  • setPointerCapture: function setPointerCapture() { [native code] }
  • releasePointerCapture: function releasePointerCapture() { [native code] }
  • hasPointerCapture: function hasPointerCapture() { [native code] }
  • hasAttributes: function hasAttributes() { [native code] }
  • getAttributeNames: function getAttributeNames() { [native code] }
  • getAttribute: function getAttribute() { [native code] }
  • getAttributeNS: function getAttributeNS() { [native code] }
  • setAttribute: function setAttribute() { [native code] }
  • setAttributeNS: function setAttributeNS() { [native code] }
  • removeAttribute: function removeAttribute() { [native code] }
  • removeAttributeNS: function removeAttributeNS() { [native code] }
  • hasAttribute: function hasAttribute() { [native code] }
  • hasAttributeNS: function hasAttributeNS() { [native code] }
  • getAttributeNode: function getAttributeNode() { [native code] }
  • getAttributeNodeNS: function getAttributeNodeNS() { [native code] }
  • setAttributeNode: function setAttributeNode() { [native code] }
  • setAttributeNodeNS: function setAttributeNodeNS() { [native code] }
  • removeAttributeNode: function removeAttributeNode() { [native code] }
  • closest: function closest() { [native code] }
  • matches: function matches() { [native code] }
  • webkitMatchesSelector: function webkitMatchesSelector() { [native code] }
  • attachShadow: function attachShadow() { [native code] }
  • getElementsByTagName: function getElementsByTagName() { [native code] }
  • getElementsByTagNameNS: function getElementsByTagNameNS() { [native code] }
  • getElementsByClassName: function getElementsByClassName() { [native code] }
  • insertAdjacentElement: function insertAdjacentElement() { [native code] }
  • insertAdjacentText: function insertAdjacentText() { [native code] }
  • insertAdjacentHTML: function insertAdjacentHTML() { [native code] }
  • requestPointerLock: function requestPointerLock() { [native code] }
  • getClientRects: function getClientRects() { [native code] }
  • getBoundingClientRect: function getBoundingClientRect() { [native code] }
  • scrollIntoView: function scrollIntoView() { [native code] }
  • scrollIntoViewIfNeeded: function scrollIntoViewIfNeeded() { [native code] }
  • animate: function animate() { [native code] }
  • before: function before() { [native code] }
  • after: function after() { [native code] }
  • replaceWith: function replaceWith() { [native code] }
  • remove: function remove() { [native code] }
  • prepend: function prepend() { [native code] }
  • append: function append() { [native code] }
  • querySelector: function querySelector() { [native code] }
  • querySelectorAll: function querySelectorAll() { [native code] }
  • webkitRequestFullScreen: function webkitRequestFullScreen() { [native code] }
  • webkitRequestFullscreen: function webkitRequestFullscreen() { [native code] }
  • scroll: function scroll() { [native code] }
  • scrollTo: function scrollTo() { [native code] }
  • scrollBy: function scrollBy() { [native code] }
  • createShadowRoot: function createShadowRoot() { [native code] }
  • getDestinationInsertionPoints: function getDestinationInsertionPoints() { [native code] }
  • ELEMENT_NODE: 1
  • ATTRIBUTE_NODE: 2
  • TEXT_NODE: 3
  • CDATA_SECTION_NODE: 4
  • ENTITY_REFERENCE_NODE: 5
  • ENTITY_NODE: 6
  • PROCESSING_INSTRUCTION_NODE: 7
  • COMMENT_NODE: 8
  • DOCUMENT_NODE: 9
  • DOCUMENT_TYPE_NODE: 10
  • DOCUMENT_FRAGMENT_NODE: 11
  • NOTATION_NODE: 12
  • DOCUMENT_POSITION_DISCONNECTED: 1
  • DOCUMENT_POSITION_PRECEDING: 2
  • DOCUMENT_POSITION_FOLLOWING: 4
  • DOCUMENT_POSITION_CONTAINS: 8
  • DOCUMENT_POSITION_CONTAINED_BY: 16
  • DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32
  • nodeType: 1
  • nodeName: DIV
  • baseURI: file:///C:/Users/vytau/Desktop/temp/www/001.html
  • isConnected: true
  • ownerDocument: [object HTMLDocument]
  • parentNode: [object HTMLBodyElement]
  • parentElement: [object HTMLBodyElement]
  • childNodes: [object NodeList]
  • firstChild: [object Text]
  • lastChild: [object Text]
  • previousSibling: [object Text]
  • nextSibling: [object Text]
  • nodeValue: null
  • textContent: TESTAS TESTAS
  • hasChildNodes: function hasChildNodes() { [native code] }
  • getRootNode: function getRootNode() { [native code] }
  • normalize: function normalize() { [native code] }
  • cloneNode: function cloneNode() { [native code] }
  • isEqualNode: function isEqualNode() { [native code] }
  • isSameNode: function isSameNode() { [native code] }
  • compareDocumentPosition: function compareDocumentPosition() { [native code] }
  • contains: function contains() { [native code] }
  • lookupPrefix: function lookupPrefix() { [native code] }
  • lookupNamespaceURI: function lookupNamespaceURI() { [native code] }
  • isDefaultNamespace: function isDefaultNamespace() { [native code] }
  • insertBefore: function insertBefore() { [native code] }
  • appendChild: function appendChild() { [native code] }
  • replaceChild: function replaceChild() { [native code] }
  • removeChild: function removeChild() { [native code] }
  • addEventListener: function addEventListener() { [native code] }
  • removeEventListener: function removeEventListener() { [native code] }
  • dispatchEvent: function dispatchEvent() { [native code] }
Norint pamatyti visus stiliaus parametrus:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

 <body>
<div id="testas">TESTAS TESTAS</div>
</body>
<script>
function print_object_inf(obj){
var res = '<ul>';

for (i in obj)
res += '<li><b>' + i + '</b>: ' + obj[i] + '</li>';

res += '</ul>';
document.write(res);
}

var test = document.querySelector('#testas');
print_object_inf(test.style);
</script>
</html>

Rezultate visi galimi naršyklės stiliaus parametrai:


  • alignContent:
  • alignItems:
  • alignSelf:
  • alignmentBaseline:
  • all:
  • animation:
  • animationDelay:
  • animationDirection:
  • animationDuration:
  • animationFillMode:
  • animationIterationCount:
  • animationName:
  • animationPlayState:
  • animationTimingFunction:
  • backfaceVisibility:
  • background:
  • backgroundAttachment:
  • backgroundBlendMode:
  • backgroundClip:
  • backgroundColor:
  • backgroundImage:
  • backgroundOrigin:
  • backgroundPosition:
  • backgroundPositionX:
  • backgroundPositionY:
  • backgroundRepeat:
  • backgroundRepeatX:
  • backgroundRepeatY:
  • backgroundSize:
  • baselineShift:
  • blockSize:
  • 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:
  • boxShadow:
  • boxSizing:
  • breakAfter:
  • breakBefore:
  • breakInside:
  • bufferedRendering:
  • captionSide:
  • caretColor:
  • clear:
  • clip:
  • clipPath:
  • clipRule:
  • color:
  • colorInterpolation:
  • colorInterpolationFilters:
  • colorRendering:
  • columnCount:
  • columnFill:
  • columnGap:
  • columnRule:
  • columnRuleColor:
  • columnRuleStyle:
  • columnRuleWidth:
  • columnSpan:
  • columnWidth:
  • columns:
  • contain:
  • content:
  • counterIncrement:
  • counterReset:
  • cursor:
  • cx:
  • cy:
  • d:
  • direction:
  • display:
  • dominantBaseline:
  • emptyCells:
  • fill:
  • fillOpacity:
  • fillRule:
  • filter:
  • flex:
  • flexBasis:
  • flexDirection:
  • flexFlow:
  • flexGrow:
  • flexShrink:
  • flexWrap:
  • float:
  • floodColor:
  • floodOpacity:
  • font:
  • fontDisplay:
  • fontFamily:
  • fontFeatureSettings:
  • fontKerning:
  • fontSize:
  • fontStretch:
  • fontStyle:
  • fontVariant:
  • fontVariantCaps:
  • fontVariantEastAsian:
  • fontVariantLigatures:
  • fontVariantNumeric:
  • fontVariationSettings:
  • fontWeight:
  • grid:
  • gridArea:
  • gridAutoColumns:
  • gridAutoFlow:
  • gridAutoRows:
  • gridColumn:
  • gridColumnEnd:
  • gridColumnGap:
  • gridColumnStart:
  • gridGap:
  • gridRow:
  • gridRowEnd:
  • gridRowGap:
  • gridRowStart:
  • gridTemplate:
  • gridTemplateAreas:
  • gridTemplateColumns:
  • gridTemplateRows:
  • height:
  • hyphens:
  • imageRendering:
  • inlineSize:
  • isolation:
  • justifyContent:
  • justifyItems:
  • justifySelf:
  • left:
  • letterSpacing:
  • lightingColor:
  • lineBreak:
  • lineHeight:
  • listStyle:
  • listStyleImage:
  • listStylePosition:
  • listStyleType:
  • margin:
  • marginBottom:
  • marginLeft:
  • marginRight:
  • marginTop:
  • marker:
  • markerEnd:
  • markerMid:
  • markerStart:
  • mask:
  • maskType:
  • maxBlockSize:
  • maxHeight:
  • maxInlineSize:
  • maxWidth:
  • maxZoom:
  • minBlockSize:
  • minHeight:
  • minInlineSize:
  • minWidth:
  • minZoom:
  • mixBlendMode:
  • objectFit:
  • objectPosition:
  • offset:
  • offsetDistance:
  • offsetPath:
  • offsetRotate:
  • opacity:
  • order:
  • orientation:
  • orphans:
  • outline:
  • outlineColor:
  • outlineOffset:
  • outlineStyle:
  • outlineWidth:
  • overflow:
  • overflowAnchor:
  • overflowWrap:
  • overflowX:
  • overflowY:
  • overscrollBehavior:
  • overscrollBehaviorX:
  • overscrollBehaviorY:
  • padding:
  • paddingBottom:
  • paddingLeft:
  • paddingRight:
  • paddingTop:
  • page:
  • pageBreakAfter:
  • pageBreakBefore:
  • pageBreakInside:
  • paintOrder:
  • perspective:
  • perspectiveOrigin:
  • placeContent:
  • placeItems:
  • placeSelf:
  • pointerEvents:
  • position:
  • quotes:
  • r:
  • resize:
  • right:
  • rx:
  • ry:
  • scrollBehavior:
  • shapeImageThreshold:
  • shapeMargin:
  • shapeOutside:
  • shapeRendering:
  • size:
  • speak:
  • src:
  • stopColor:
  • stopOpacity:
  • stroke:
  • strokeDasharray:
  • strokeDashoffset:
  • strokeLinecap:
  • strokeLinejoin:
  • strokeMiterlimit:
  • strokeOpacity:
  • strokeWidth:
  • tabSize:
  • tableLayout:
  • textAlign:
  • textAlignLast:
  • textAnchor:
  • textCombineUpright:
  • textDecoration:
  • textDecorationColor:
  • textDecorationLine:
  • textDecorationSkipInk:
  • textDecorationStyle:
  • textIndent:
  • textOrientation:
  • textOverflow:
  • textRendering:
  • textShadow:
  • textSizeAdjust:
  • textTransform:
  • textUnderlinePosition:
  • top:
  • touchAction:
  • transform:
  • transformBox:
  • transformOrigin:
  • transformStyle:
  • transition:
  • transitionDelay:
  • transitionDuration:
  • transitionProperty:
  • transitionTimingFunction:
  • unicodeBidi:
  • unicodeRange:
  • userSelect:
  • userZoom:
  • vectorEffect:
  • verticalAlign:
  • visibility:
  • webkitAppRegion:
  • webkitAppearance:
  • webkitBorderAfter:
  • webkitBorderAfterColor:
  • webkitBorderAfterStyle:
  • webkitBorderAfterWidth:
  • webkitBorderBefore:
  • webkitBorderBeforeColor:
  • webkitBorderBeforeStyle:
  • webkitBorderBeforeWidth:
  • webkitBorderEnd:
  • webkitBorderEndColor:
  • webkitBorderEndStyle:
  • webkitBorderEndWidth:
  • webkitBorderHorizontalSpacing:
  • webkitBorderImage:
  • webkitBorderStart:
  • webkitBorderStartColor:
  • webkitBorderStartStyle:
  • webkitBorderStartWidth:
  • webkitBorderVerticalSpacing:
  • webkitBoxAlign:
  • webkitBoxDecorationBreak:
  • webkitBoxDirection:
  • webkitBoxFlex:
  • webkitBoxFlexGroup:
  • webkitBoxLines:
  • webkitBoxOrdinalGroup:
  • webkitBoxOrient:
  • webkitBoxPack:
  • webkitBoxReflect:
  • webkitColumnBreakAfter:
  • webkitColumnBreakBefore:
  • webkitColumnBreakInside:
  • webkitFontSizeDelta:
  • webkitFontSmoothing:
  • webkitHighlight:
  • webkitHyphenateCharacter:
  • webkitLineBreak:
  • webkitLineClamp:
  • webkitLocale:
  • webkitLogicalHeight:
  • webkitLogicalWidth:
  • webkitMarginAfter:
  • webkitMarginAfterCollapse:
  • webkitMarginBefore:
  • webkitMarginBeforeCollapse:
  • webkitMarginBottomCollapse:
  • webkitMarginCollapse:
  • webkitMarginEnd:
  • webkitMarginStart:
  • webkitMarginTopCollapse:
  • webkitMask:
  • webkitMaskBoxImage:
  • webkitMaskBoxImageOutset:
  • webkitMaskBoxImageRepeat:
  • webkitMaskBoxImageSlice:
  • webkitMaskBoxImageSource:
  • webkitMaskBoxImageWidth:
  • webkitMaskClip:
  • webkitMaskComposite:
  • webkitMaskImage:
  • webkitMaskOrigin:
  • webkitMaskPosition:
  • webkitMaskPositionX:
  • webkitMaskPositionY:
  • webkitMaskRepeat:
  • webkitMaskRepeatX:
  • webkitMaskRepeatY:
  • webkitMaskSize:
  • webkitMaxLogicalHeight:
  • webkitMaxLogicalWidth:
  • webkitMinLogicalHeight:
  • webkitMinLogicalWidth:
  • webkitPaddingAfter:
  • webkitPaddingBefore:
  • webkitPaddingEnd:
  • webkitPaddingStart:
  • webkitPerspectiveOriginX:
  • webkitPerspectiveOriginY:
  • webkitPrintColorAdjust:
  • webkitRtlOrdering:
  • webkitRubyPosition:
  • webkitTapHighlightColor:
  • webkitTextCombine:
  • webkitTextDecorationsInEffect:
  • webkitTextEmphasis:
  • webkitTextEmphasisColor:
  • webkitTextEmphasisPosition:
  • webkitTextEmphasisStyle:
  • webkitTextFillColor:
  • webkitTextOrientation:
  • webkitTextSecurity:
  • webkitTextStroke:
  • webkitTextStrokeColor:
  • webkitTextStrokeWidth:
  • webkitTransformOriginX:
  • webkitTransformOriginY:
  • webkitTransformOriginZ:
  • webkitUserDrag:
  • webkitUserModify:
  • webkitWritingMode:
  • whiteSpace:
  • widows:
  • width:
  • willChange:
  • wordBreak:
  • wordSpacing:
  • wordWrap:
  • writingMode:
  • x:
  • y:
  • zIndex:
  • zoom:
  • cssText:
  • length: 0
  • parentRule: null
  • cssFloat:
  • item: function item() { [native code] }
  • getPropertyValue: function getPropertyValue() { [native code] }
  • getPropertyPriority: function getPropertyPriority() { [native code] }
  • setProperty: function setProperty() { [native code] }
  • removeProperty: function removeProperty() { [native code] }
žymės:

Komentarai

Rašyti komentarą

Populiarūs šio tinklaraščio įrašai

VS Code: Simple react snippets

Simple React Snippets Snippets Snippet Renders imr Import React imrc Import React / Component impt Import PropTypes impc Import React / PureComponent cc Class Component ccc Class Component With Constructor sfc Stateless Function Component cdm componentDidMount cwm componentWillMount cwrp componentWillReceiveProps gds getDerivedStateFromProps scu shouldComponentUpdate cwu componentWillUpdate cdu componentDidUpdate cwu componentWillUpdate cdc componentDidCatch gsbu getSnapshotBeforeUpdate ss setState ssf Functional setState ren render rprop Render Prop hoc Higher Order Component Full Expansions imr - Import React import React from 'react'; imrc - Import React, Component import React, { Component } from 'react'; impt - Import PropTypes import PropTypes from 'prop-types'; impc - Import PureComponent import React, { PureComponent } from 'react'; cc - Class Component class | extends Component { state = { | }, ...
Rašyti komentarą
Skaityti daugiau

Į dešimtainį

toFixed(2) - verčia skaičių į dešimtainį, skliaustuose nurodyta kiek bus skaičių po kablelio. var bePvm= 10.251 + 13.991 + 57.151; var Pvm= bePvm* 0.21; var viso= bePvm + Pvm; console.log(viso.toFixed(2));
Rašyti komentarą
Skaityti daugiau