Framework

WebKit JS

Access and modify DOM elements within a webpage, including touch events and visual effects.

Overview

This covers miscellaneous DOM extensions used by Safari in macOS and iOS. These extensions include DOM touch events for processing gestures for devices that have a touch screen and visual effects that support 2D and 3D transforms, animation, and transitions. Most of the classes described in this reference are Apple extensions that may also be proposed W3C standards.

If you want to read the WebKit W3C proposals then go to: http://www.webkit.org/specs.

Symbols

Classes

ANGLEInstancedArraysAbstractViewAbstractWorkerAnalyserNodeAnimationEventApplePayShippingContactSelectedEventApplePayShippingMethodSelectedEventApplePayValidateMerchantEventAttrAudioBufferAudioBufferCallbackAudioBufferSourceNodeAudioContextAudioDestinationNodeAudioListenerAudioNodeAudioParamAudioProcessingEventAudioTrackAudioTrackListBarPropBeforeLoadEventBeforeUnloadEventBiquadFilterNodeBlobByteLengthQueuingStrategyCDATASectionCSSCharsetRuleCSSFontFaceRuleCSSImportRuleCSSKeyframeRuleCSSKeyframesRuleCSSMediaRuleCSSPageRuleCSSPrimitiveValueCSSRuleCSSRuleListCSSStyleDeclarationCSSStyleRuleCSSStyleSheetCSSSupportsRuleCSSUnknownRuleCSSValueCSSValueList
CanvasGradient

CanvasGradient instances define visual gradients that can be displayed on the HTML canvas element. The CanvasRenderingContext2D properties fillStyle and strokeStyle can be set to a CanvasGradient object. You obtain a CanvasGradient instance by calling one of the gradient creation methods of the CanvasRenderingContext2D class—createLinearGradient() or createRadialGradient().

CanvasPatternCanvasRenderingContext
CanvasRenderingContext2D

The CanvasRenderingContext2D class provides a 2D drawing context for a canvas element. Use the methods of this class to draw on the canvas. To obtain an instance of the CanvasRenderingContext2D, call the getContext('2d') method on a canvas object. See Safari HTML5 Canvas Guide for usage examples.

ChannelMergerNodeChannelSplitterNodeCharacterDataChildNodeClientRectClientRectListCloseEventCommandLineAPIHostCommentCompositionEventConvolverNodeCoordinatesCountQueuingStrategyCounterCryptoCryptoKeyCryptoKeyPairCustomEvent
DOMApplicationCache

A DOMApplicationCache object is used to store resources—such as, HTML, JavaScript, CSS, and images—locally. This allows your web application to continue running offline when there is no network connection. The cache persists after Safari exits, so it can be used by multiple browser sessions. There is one application cache per browsing context.

DOMCSSNamespaceDOMErrorDOMFormDataDOMImplementationDOMMimeTypeDOMMimeTypeArrayDOMNamedFlowCollectionDOMParserDOMPathDOMPluginDOMPluginArrayDOMSelectionDOMStringListDOMStringMapDOMTokenListDOMURLDOMWindowDataCueDataTransferDatabaseDatabaseCallbackDedicatedWorkerGlobalScopeDelayNode
DeviceMotionEvent

An instance of DeviceMotionEvent is created when significant change in motion occurs. The event object encapsulates the measurements of the interval, rotation rate, and acceleration of a device.

DeviceOrientationEvent

Instances of the DeviceOrientationEvent class are fired only when the device has a gyroscope and while the user is changing the orientation. The DeviceOrientationEvent class encapsulates the angles of rotation in degrees and heading.

Document

These additions to the Document class are used to create touch event objects on iOS and control full-screen mode on the desktop.

DocumentFragmentDocumentTypeDynamicsCompressorNodeEXTBlendMinMaxEXTFragDepthEXTShaderTextureLODEXTTextureFilterAnisotropicEXTsRGB
Element

These Safari additions to the Element class are mainly used to support full-screen mode. There’s also a method for comparing selectors.

ErrorEventEventEventListenerEventSourceEventTargetFileFileErrorFileListFileReaderFileReaderSyncFocusEventFontFaceFontFaceSetGCObservationGainNodeGeolocationGeoposition
GestureEvent

The GestureEvent class encapsulates information about a multi-touch gesture.

GlobalEventHandlersHTMLAllCollectionHTMLAnchorElementHTMLAppletElementHTMLAreaElementHTMLAttachmentElement
HTMLAudioElement

A class representing the HTML audio element that plays a sound or audio stream in a webpage. All of the methods and properties in this class are inherited from HTMLMediaElement.

HTMLBRElementHTMLBaseElementHTMLBodyElementHTMLButtonElement
HTMLCanvasElement

A canvas is an HTML element that defines a runtime drawing region within your web content. You can access the canvas as a JavaScript object and obtain a drawing context from it, in the form of a CanvasRenderingContext2D object. You draw on the canvas by using the JavaScript methods of the CanvasRenderingContext2D class.

HTMLCollectionHTMLDListElementHTMLDataElementHTMLDetailsElementHTMLDirectoryElementHTMLDivElementHTMLDocumentHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFontElementHTMLFormControlsCollectionHTMLFormElementHTMLFrameElementHTMLFrameSetElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLHyperlinkElementUtilsHTMLIFrameElementHTMLImageElementHTMLInputElementHTMLKeygenElementHTMLLIElementHTMLLabelElementHTMLLegendElementHTMLLinkElementHTMLMapElementHTMLMarqueeElement
HTMLMediaElement

An abstract superclass for media classes that display audio or video in webpages. This class defines common properties and methods inherited by the HTMLAudioElement and HTMLVideoElement classes representing the HTML audio and video elements.

HTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLOListElementHTMLObjectElementHTMLOptGroupElementHTMLOptionElementHTMLOptionsCollectionHTMLOutputElementHTMLParagraphElementHTMLParamElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSlotElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElement
HTMLVideoElement

A class representing the HTML video element that plays a video in a webpage. Use the HTMLAudioElement class for the HTML audio element.

HashChangeEventHistoryIDBCursorIDBCursorWithValueIDBDatabaseIDBFactoryIDBIndexIDBKeyRangeIDBObjectStoreIDBOpenDBRequestIDBRequestIDBTransactionIDBVersionChangeEventImageDataInspectorFrontendHostInterfaceNameInternalSettingsKeyboardEventLocationMallocStatisticsMediaControllerMediaControlsHostMediaDeviceInfoMediaDevicesMediaElementAudioSourceNodeMediaErrorMediaKeyErrorMediaKeyEventMediaKeyMessageEventMediaKeyNeededEventMediaKeySessionMediaKeysMediaListMediaQueryListMediaQueryListListenerMediaSourceMediaStreamMediaStreamAudioDestinationNodeMediaStreamAudioSourceNodeMediaStreamTrackMediaStreamTrackEventMediaStreamTrackSourcesCallbackMediaTrackConstraintMediaTrackConstraintSetMediaTrackConstraintsMediaTrackSupportedConstraintsMemoryInfoMessageChannelMessageEventMessagePortMockContentFilterSettingsMockPageOverlayMouseEventMutationEventMutationObserverMutationRecordNamedNodeMapNavigatorNavigatorConcurrentHardwareNavigatorIDNavigatorLanguageNavigatorOnLineNodeNodeFilterNodeIteratorNodeListNonDocumentTypeChildNodeNonElementParentNodeNotificationNotificationCenterNotificationPermissionCallbackOESElementIndexUintOESStandardDerivativesOESTextureFloatOESTextureFloatLinearOESTextureHalfFloatOESTextureHalfFloatLinearOESVertexArrayObjectOfflineAudioCompletionEventOfflineAudioContextOscillatorNodeOverflowEventPageTransitionEventPannerNodeParentNodePerformancePerformanceEntryPerformanceEntryListPerformanceNavigationPerformanceResourceTimingPerformanceTimingPeriodicWavePopStateEventPositionCallbackPositionErrorPositionErrorCallbackProcessingInstructionProgressEventQuickTimePluginReplacementRGBColorRadioNodeListRangeReadableStreamReadableStreamControllerReadableStreamReaderReadableStreamSourceRectRequestAnimationFrameCallbackSQLErrorSQLResultSetSQLResultSetRowListSQLStatementCallbackSQLStatementErrorCallbackSQLTransactionSQLTransactionCallbackSQLTransactionErrorCallbackSVGAElementSVGAltGlyphDefElementSVGAltGlyphElementSVGAltGlyphItemElementSVGAngleSVGAnimateColorElementSVGAnimateElementSVGAnimateMotionElementSVGAnimateTransformElementSVGAnimatedAngleSVGAnimatedBooleanSVGAnimatedEnumerationSVGAnimatedIntegerSVGAnimatedLengthSVGAnimatedLengthListSVGAnimatedNumberSVGAnimatedNumberListSVGAnimatedPreserveAspectRatioSVGAnimatedRectSVGAnimatedStringSVGAnimatedTransformListSVGAnimationElementSVGCircleElementSVGClipPathElementSVGColorSVGComponentTransferFunctionElementSVGCursorElementSVGDefsElementSVGDescElementSVGDocumentSVGElementSVGEllipseElementSVGExternalResourcesRequiredSVGFEBlendElementSVGFEColorMatrixElementSVGFEComponentTransferElementSVGFECompositeElementSVGFEConvolveMatrixElementSVGFEDiffuseLightingElementSVGFEDisplacementMapElementSVGFEDistantLightElementSVGFEDropShadowElementSVGFEFloodElementSVGFEFuncAElementSVGFEFuncBElementSVGFEFuncGElementSVGFEFuncRElementSVGFEGaussianBlurElementSVGFEImageElementSVGFEMergeElementSVGFEMergeNodeElementSVGFEMorphologyElementSVGFEOffsetElementSVGFEPointLightElementSVGFESpecularLightingElementSVGFESpotLightElementSVGFETileElementSVGFETurbulenceElementSVGFilterElementSVGFilterPrimitiveStandardAttributesSVGFitToViewBoxSVGFontElementSVGFontFaceElementSVGFontFaceFormatElementSVGFontFaceNameElementSVGFontFaceSrcElementSVGFontFaceUriElementSVGForeignObjectElementSVGGElementSVGGlyphElementSVGGlyphRefElementSVGGradientElementSVGGraphicsElementSVGHKernElementSVGImageElementSVGLengthSVGLengthListSVGLineElementSVGLinearGradientElementSVGMPathElementSVGMarkerElementSVGMaskElementSVGMatrixSVGMetadataElementSVGMissingGlyphElementSVGNumberSVGNumberListSVGPaintSVGPathElementSVGPathSegSVGPathSegArcAbsSVGPathSegArcRelSVGPathSegClosePathSVGPathSegCurvetoCubicAbsSVGPathSegCurvetoCubicRelSVGPathSegCurvetoCubicSmoothAbsSVGPathSegCurvetoCubicSmoothRelSVGPathSegCurvetoQuadraticAbsSVGPathSegCurvetoQuadraticRelSVGPathSegCurvetoQuadraticSmoothAbsSVGPathSegCurvetoQuadraticSmoothRelSVGPathSegLinetoAbsSVGPathSegLinetoHorizontalAbsSVGPathSegLinetoHorizontalRelSVGPathSegLinetoRelSVGPathSegLinetoVerticalAbsSVGPathSegLinetoVerticalRelSVGPathSegListSVGPathSegMovetoAbsSVGPathSegMovetoRelSVGPatternElementSVGPointSVGPointListSVGPolygonElementSVGPolylineElementSVGPreserveAspectRatioSVGRadialGradientElementSVGRectSVGRectElementSVGRenderingIntentSVGSVGElementSVGScriptElementSVGSetElementSVGStopElementSVGStringListSVGStyleElementSVGSwitchElementSVGSymbolElementSVGTRefElementSVGTSpanElementSVGTestsSVGTextContentElementSVGTextElementSVGTextPathElementSVGTextPositioningElementSVGTitleElementSVGTransformSVGTransformListSVGURIReferenceSVGUnitTypesSVGUseElementSVGVKernElementSVGViewElementSVGViewSpecSVGZoomAndPanSVGZoomEventScreenScriptProcessorNodeSecurityPolicyViolationEventShadowRootSlotableSourceBufferSourceBufferListSourceInfoSpeechSynthesisSpeechSynthesisEventSpeechSynthesisUtteranceSpeechSynthesisVoice
Storage

The Storage class provides functions that you use to store key-value pair information.

StorageEventStringCallback
StyleMedia

The StyleMedia class provides a way to evaluate CSS media queries from JavaScript. You do not need to, nor should you, create instances of this class. You access the shared StyleMedia object using the window’s styleMedia property.

StyleSheetStyleSheetListSubtleCryptoTestActiveDOMObjectTestCallbackTestCallbackFunctionTestClassWithJSBuiltinConstructorTestCustomConstructorWithNoInterfaceObjectTestCustomNamedGetterTestEventTargetTestGenerateIsReachableTestGlobalObjectTestIterableTestJSBuiltinConstructorTestMediaQueryListListenerTestNamedConstructorTestNodeTestNondeterministicTestObjTestOverloadedConstructorsTestOverrideBuiltinsTestTypedefsTextTextEventTextMetricsTextTrackTextTrackCueTextTrackCueListTextTrackListTimeRanges
Touch

A Touch object represents a single user touch on the screen of the device. A touch is the presence or movement of a finger and is part of a unique multi-touch sequence. Use the changedTouches method to get all the touch objects that changed in a TouchEvent object.

TouchEvent

The TouchEvent class encapsulates information about a touch event.

TouchList

The TouchList class is used to represent a collection of Touch objects. For example, the changedTouches method in TouchEvent returns a TouchList object.

TrackEventTransitionEventTreeWalkerTypeConversionsUIEventURLUtilsUserMessageHandlerUserMessageHandlersNamespaceVTTCueVTTRegionVTTRegionListValidityStateVideoPlaybackQualityVideoTrackVideoTrackListVoidCallbackWaveShaperNodeWebGL2RenderingContextWebGLActiveInfoWebGLBufferWebGLCompressedTextureATCWebGLCompressedTexturePVRTCWebGLCompressedTextureS3TCWebGLContextAttributesWebGLContextEventWebGLDebugRendererInfoWebGLDebugShadersWebGLDepthTextureWebGLDrawBuffersWebGLFramebufferWebGLLoseContextWebGLProgramWebGLQueryWebGLRenderbufferWebGLRenderingContextWebGLRenderingContextBaseWebGLSamplerWebGLShaderWebGLShaderPrecisionFormatWebGLSyncWebGLTextureWebGLTransformFeedbackWebGLUniformLocationWebGLVertexArrayObjectWebGLVertexArrayObjectOES
WebKitAnimationEvent

WebKitAnimationEvent objects encapsulate information about running animations.

WebKitCSSFilterValue
WebKitCSSMatrix

WebKitCSSMatrix objects represent a 4x4 homogeneous matrix for 3D transforms or a vector for 2D transforms. You can use these objects to manipulate matrices in JavaScript. For example, you can multiply, translate, and scale matrices.

WebKitCSSRegionRule
WebKitCSSTransformValue

WebKitCSSTransformValue objects represent one transform function in a CSS transform specified using the -webkit-transform property. The operationType property in this class specifies which function is used. The objects also contain a list of values which are the parameters to the function. The parameters appear in the same order as they appear in the function.

WebKitNamedFlowWebKitNamespaceWebKitPlaybackTargetAvailabilityEvent
WebKitPoint

WebKitPoint objects represent a point in two-dimensional space used by CSS transitions specified using the -webkit-transition property.

WebKitTransitionEvent

WebKitTransitionEvent objects provide information about CSS transitions specified using the transition property. An event is sent at the end of a transition for each CSS property in the transition. Each event contains the name of the CSS property and duration of the transition. You can use these events to perform some action that starts at the end of a transition.

WebSocketWheelEventWindowEventHandlersWindowOrWorkerGlobalScopeWorkerWorkerGlobalScopeWorkerLocationWorkerNavigatorWritableStreamXMLDocument
XMLHttpRequest

An XMLHttpRequest instance enables you to retrieve data from a URL without having to do a page refresh.

XMLHttpRequestEventTargetXMLHttpRequestProgressEventXMLHttpRequestUploadXMLSerializerXPathEvaluatorXPathExpressionXPathNSResolverXPathResultXSLTProcessor

Reference

CSSRule Additions Reference

These extensions to the CSSRule class are used to access animation keyframe and keyframes rules.

DOMWindow Additions

DOMWindow additions allow conversion of points between page- and node-coordinate systems for transitions, support for CSS media queries, and device orientation and motion events.

WebKitCSSKeyframeRule

WebKitCSSKeyframeRule objects represent the style rule for a single keyframe in the @-webkit-keyframes CSS rule used in animations. The WebKitAnimationEvent class encapsulate information about running animations.

WebKitCSSKeyframesRule

WebKitCSSKeyframesRule objects represent the keyframes for a single animation, that is, the contents of an @-webkit-keyframes CSS rule used in animations. The WebKitAnimationEvent class encapsulate information about running animations.

WebKit JS EnumerationsWebKit JS FunctionsWebKit JS Data Types