From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/nl/web/api/canvas_api/index.html | 163 +++++ files/nl/web/api/canvas_api/tutorial/index.html | 53 ++ .../globalcompositeoperation/index.html | 219 ++++++ .../nl/web/api/canvasrenderingcontext2d/index.html | 450 +++++++++++++ files/nl/web/api/comment/index.html | 137 ++++ files/nl/web/api/css/index.html | 134 ++++ files/nl/web/api/cssstylesheet/index.html | 183 +++++ .../nl/web/api/document/createtextnode/index.html | 120 ++++ files/nl/web/api/document/currentscript/index.html | 117 ++++ .../nl/web/api/document/getelementbyid/index.html | 202 ++++++ files/nl/web/api/document/index.html | 447 +++++++++++++ files/nl/web/api/document/queryselector/index.html | 162 +++++ files/nl/web/api/document_object_model/index.html | 412 ++++++++++++ files/nl/web/api/element/index.html | 484 ++++++++++++++ files/nl/web/api/eventsource/index.html | 121 ++++ files/nl/web/api/index.html | 14 + files/nl/web/api/indexeddb_api/index.html | 143 ++++ files/nl/web/api/midiaccess/index.html | 63 ++ files/nl/web/api/mutationobserver/index.html | 248 +++++++ files/nl/web/api/webgl_api/index.html | 268 ++++++++ files/nl/web/api/webgl_api/tutorial/index.html | 42 ++ .../api/window.crypto.getrandomvalues/index.html | 97 +++ files/nl/web/api/window/alert/index.html | 66 ++ files/nl/web/api/window/console/index.html | 57 ++ files/nl/web/api/window/index.html | 440 ++++++++++++ files/nl/web/api/window/prompt/index.html | 83 +++ .../api/window/requestanimationframe/index.html | 188 ++++++ files/nl/web/api/window/sessionstorage/index.html | 148 ++++ files/nl/web/api/windoweventhandlers/index.html | 191 ++++++ .../windoweventhandlers/onbeforeunload/index.html | 159 +++++ files/nl/web/api/xmlhttprequest/index.html | 741 +++++++++++++++++++++ 31 files changed, 6352 insertions(+) create mode 100644 files/nl/web/api/canvas_api/index.html create mode 100644 files/nl/web/api/canvas_api/tutorial/index.html create mode 100644 files/nl/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html create mode 100644 files/nl/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/nl/web/api/comment/index.html create mode 100644 files/nl/web/api/css/index.html create mode 100644 files/nl/web/api/cssstylesheet/index.html create mode 100644 files/nl/web/api/document/createtextnode/index.html create mode 100644 files/nl/web/api/document/currentscript/index.html create mode 100644 files/nl/web/api/document/getelementbyid/index.html create mode 100644 files/nl/web/api/document/index.html create mode 100644 files/nl/web/api/document/queryselector/index.html create mode 100644 files/nl/web/api/document_object_model/index.html create mode 100644 files/nl/web/api/element/index.html create mode 100644 files/nl/web/api/eventsource/index.html create mode 100644 files/nl/web/api/index.html create mode 100644 files/nl/web/api/indexeddb_api/index.html create mode 100644 files/nl/web/api/midiaccess/index.html create mode 100644 files/nl/web/api/mutationobserver/index.html create mode 100644 files/nl/web/api/webgl_api/index.html create mode 100644 files/nl/web/api/webgl_api/tutorial/index.html create mode 100644 files/nl/web/api/window.crypto.getrandomvalues/index.html create mode 100644 files/nl/web/api/window/alert/index.html create mode 100644 files/nl/web/api/window/console/index.html create mode 100644 files/nl/web/api/window/index.html create mode 100644 files/nl/web/api/window/prompt/index.html create mode 100644 files/nl/web/api/window/requestanimationframe/index.html create mode 100644 files/nl/web/api/window/sessionstorage/index.html create mode 100644 files/nl/web/api/windoweventhandlers/index.html create mode 100644 files/nl/web/api/windoweventhandlers/onbeforeunload/index.html create mode 100644 files/nl/web/api/xmlhttprequest/index.html (limited to 'files/nl/web/api') diff --git a/files/nl/web/api/canvas_api/index.html b/files/nl/web/api/canvas_api/index.html new file mode 100644 index 0000000000..3d4bbddd27 --- /dev/null +++ b/files/nl/web/api/canvas_api/index.html @@ -0,0 +1,163 @@ +--- +title: Canvas API +slug: Web/API/Canvas_API +tags: + - API + - Canvas + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Added in HTML5, the HTML {{HTMLElement("canvas")}} element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.

+ +

Mozilla applications gained support for <canvas> starting with Gecko 1.8 (i.e. Firefox 1.5). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <canvas> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <canvas> by including a script from Google's Explorer Canvas project. Google Chrome and Opera 9 also support <canvas>.

+ +

The <canvas> element is also used by WebGL to do hardware-accelerated 3D graphics on web pages.

+ +

Example

+ +

This is just a simple code snippet which uses the {{domxref("CanvasRenderingContext2D.fillRect()")}} method.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Edit the code below and see your changes update live in the canvas:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Reference

+ +
+ +
+ +

The interfaces related to the WebGLRenderingContext are referenced under WebGL.

+ +

Guides and tutorials

+ +
+
Canvas tutorial
+
A comprehensive tutorial covering both the basic usage of <canvas> and its advanced features.
+
Code snippets: Canvas
+
Some extension developer-oriented code snippets involving <canvas>.
+
Demo: A basic ray-caster
+
A demo of ray-tracing animation using canvas.
+
Drawing DOM objects into a canvas
+
How to draw DOM content, such as HTML elements, into a canvas.
+
Manipulating video using canvas
+
Combining {{HTMLElement("video")}} and {{HTMLElement("canvas")}} to manipulate video data in real time.
+
+ +

Resources

+ +

Generic

+ + + +

Libraries

+ + + +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

See also

+ + diff --git a/files/nl/web/api/canvas_api/tutorial/index.html b/files/nl/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..8e020ae096 --- /dev/null +++ b/files/nl/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,53 @@ +--- +title: Canvas-handleiding +slug: Web/API/Canvas_API/Tutorial +translation_of: Web/API/Canvas_API/Tutorial +--- +
{{CanvasSidebar}}
+ +

+ +
+

<canvas> is een HTML element wat gebruikt kan worden om graphics te tekenen met behulp van een script (meestal JavaScript). Op deze manier is het mogelijk om bijvoorbeeld grafieken te tekenen, foto composities te maken, of simpele (en niet simpele) animaties te maken.  De afbeeldingen op deze pagina zijn voorbeelden can <canvas> implementaties die in deze tutorial zullen worden gemaakt.

+
+ +

Deze tutorial beschrijft  hoe je met basis <canvas> elementen 2D graphics kunt maken. De voorbeelden op deze pagina zouden je een goed idee moeten geven van wat er mogelijk is met canvas. Ook kan je de stukjes code gebruiken om zelf te beginnen met het bouwen van je eigen content.

+ +

<canvas> werd voor het eerst geintroduceerd in Webkit van Apple voor OS X Dashboard. Sindsdien is het geimplementeerd in alle grote browsers.

+ +

Om te beginnen

+ +

Het <canvas> element gebruiken is niet heel ingewikkeld, maar het is wel nodig om de basis van HTML en JavaScript te kennen. Er zijn enkele oudere browsers die het <canvas> element nog niet ondersteunen, maar het wordt wel ondersteund in alle recente versies van de grote browsers. Het standaard formaat van een canvas is 300 px x 150 px (breedte x hoogte). Het formaat kan worden aangepast met behulp van de HTML 'height' en 'width' eigenschappen. Om graphics te kunnen tekenen op het canvas gebruiken we een JavaScript context object.

+ +

In deze tutorial

+ + + +

Bekijk ook

+ + + +

Een boodschap aan onze bijdragers

+ +

Vanwege een ongelukkige technische fout in de week van 17 juni, 2013, zijn we de geschiedenis van deze tutorial verloren. Inclusief alle bijdrages uit het verleden. Wij verontschuldigen ons hiervoor en hopen dat jullie deze vervelende ongeval kunnen vergeven.

+ +
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
diff --git a/files/nl/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/nl/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html new file mode 100644 index 0000000000..40813af9a2 --- /dev/null +++ b/files/nl/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html @@ -0,0 +1,219 @@ +--- +title: CanvasRenderingContext2D.globalCompositeOperation +slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation +tags: + - API + - Blending + - Canvas + - CanvasRenderingContext2D + - Compositie + - Onderdeel + - Referentie +translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation +--- +
{{APIRef}}
+ +

De CanvasRenderingContext2D.globalCompositeOperationonderdeel van de Canvas 2D API verandert het type van renderen van nieuwe figuren. Hierbij is type een string die de nieuwe rendermodus geeft.

+ +

Bekijk ook het hoofdstuk Compositing in de Canvas Tutorial.

+ +

Syntax

+ +
ctx.globalCompositeOperation = type;
+ +

Types

+ +

{{EmbedLiveSample("Compositing_example", 750, 7300, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

+ +

Examples

+ +

globalCompositeOperation gebruiken

+ +

Dit is maar een klein stukje code die de globalCompositeOperation property gebruikt om twee rechthoeken te tekenen die elkaar erbuiten houden waar ze overlappen.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.globalCompositeOperation = 'xor';
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = 'red';
+ctx.fillRect(50, 50, 100, 100);
+
+ +

Bewerk de code hieronder en zie de veranderingen:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+ +

Specificaties

+ + + + + + + + + + + + + + + + + + + +
SpecificatieStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('Compositing')}}{{Spec2('Compositing')}} 
+ +

Browserondersteuning

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Standaard{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Blendmodus{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("20") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Standaard{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Blendmodus{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("20") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ + + + + +

Gecko-specifieke opmerkingen

+ + + +

Bekijk ook

+ + diff --git a/files/nl/web/api/canvasrenderingcontext2d/index.html b/files/nl/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..08ac6e9fb8 --- /dev/null +++ b/files/nl/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,450 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Games + - Graphics + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CanvasRenderingContext2D +--- +
{{APIRef}}
+ +
De CanvasRenderingContext2D-interface wordt gebruikt om rechthoeken, tekst, afbeeldingen en andere objecten op het canvasobject te tekenen. Het verstrekt een 2D rendercontext voor het tekenoppervlak van een {{ HTMLElement("canvas") }}-element.
+ +
 
+ +

Roep, om een object van deze interface te verkrijgen, {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} aan op een <canvas>-element, met "2d" als argument:

+ +
var canvas = document.getElementById('myCanvas'); // in your HTML this element appears as <canvas id="myCanvas"></canvas>
+var ctx = canvas.getContext('2d');
+
+ +

Zodra u een 2D-rendercontext hebt, kunt u hiermee tekenen. Bijvoorbeeld:

+ +
ctx.fillStyle = 'rgb(200,0,0)'; // sets the color to fill in the rectangle with
+ctx.fillRect(10, 10, 55, 50);   // draws the rectangle at position 10, 10 with a width of 55 and a height of 50
+
+ +

Zie de properties en methods in de zijbalk en hieronder. Hiernaast heeft de canvas-tutorial ook meer informatie, voorbeelden en hulpbronnen.

+ +

Drawing rectangles

+ +

There are three methods that immediately draw rectangles to the bitmap.

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
Draws a filled rectangle at (x, y) position whose size is determined by width and height.
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.
+
+ +

Drawing text

+ +

The following methods are provided for drawing text. See also the {{domxref("TextMetrics")}} object for text properties.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
Draws (fills) a given text at the given (x,y) position.
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
Draws (strokes) a given text at the given (x, y) position.
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
Returns a {{domxref("TextMetrics")}} object.
+
+ +

Line styles

+ +

The following methods and properties control how lines are drawn.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
Width of lines. Default 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
Type of endings on the end of lines. Possible values: butt (default), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default).
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Miter limit ratio. Default 10.
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
Returns the current line dash pattern array containing an even number of non-negative numbers.
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
Sets the current line dash pattern.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
Specifies where to start a dash array on a line.
+
+ +

Text styles

+ +

The following properties control how text is laid out.

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
Font setting. Default value 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
Text alignment setting. Possible values: start (default), end, left, right or center.
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic (default), ideographic, bottom.
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
Directionality. Possible values: ltr, rtl, inherit (default).
+
+ +

Fill and stroke styles

+ +

Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
Color or style to use inside shapes. Default #000 (black).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
Color or style to use for the lines around shapes. Default #000 (black).
+
+ +

Gradients and patterns

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
Creates a linear gradient along the line given by the coordinates represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
Creates a radial gradient given by the coordinates of the two circles represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.
+
+ +

Shadows

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
Specifies the blurring effect. Default 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
Color of the shadow. Default fully-transparent black.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
Horizontal distance the shadow will be offset. Default 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
Vertical distance the shadow will be offset. Default 0.
+
+ +

Paths

+ +

The following methods can be used to manipulate paths of objects.

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
Moves the starting point of a new sub-path to the (x, y) coordinates.
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
Connects the last point in the subpath to the x, y coordinates with a straight line.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the Bézier curve.
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
Adds a quadratic Bézier curve to the current path.
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
Adds an ellipse to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
+
+ +

Drawing paths

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
Fills the subpaths with the current fill style.
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
Strokes the subpaths with the current stroke style.
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
If a given element is focused, this method draws a focus ring around the current path.
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
Scrolls the current path or a given path into the view.
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
Reports whether or not the specified point is contained in the current path.
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
Reports whether or not the specified point is inside the area contained by the stroking of a path.
+
+ +

Transformations

+ +

Objects in the CanvasRenderingContext2D rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}} {{experimental_inline}}
+
Current transformation matrix ({{domxref("SVGMatrix")}} object).
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
Multiplies the current transformation matrix with the matrix described by its arguments.
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
Resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments.
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
Resets the current transform by the identity matrix.
+
+ +

Compositing

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap.
+
+ +

Drawing images

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
+
+ +

Pixel manipulation

+ +

See also the {{domxref("ImageData")}} object.

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
+
+ +

Image smoothing

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
Image smoothing mode; if disabled, images will not be smoothed if scaled.
+
+ +

The canvas state

+ +

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
Restores the drawing style state to the last element on the 'state stack' saved by save().
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
+ +

Hit regions

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Adds a hit region to the canvas.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Removes the hit region with the specified id from the canvas.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Removes all hit regions from the canvas.
+
+ +

Non-standard APIs

+ + + +

Most of these APIs are deprecated and will be removed in the future.

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.clearShadow()
+
Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
This is redundant with an equivalent overload of drawImage.
+
{{non-standard_inline}} CanvasRenderingContext2D.setAlpha()
+
Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineWidth()
+
Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineJoin()
+
Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineCap()
+
Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setMiterLimit()
+
Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setStrokeColor()
+
Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setFillColor()
+
Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setShadow()
+
Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDash
+
Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.
+
+ + + +
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.
+
+ +

WebKit only

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
The backing store size in relation to the canvas element. See High DPI Canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
+ +
+
+ +

Gecko only

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
+
+ +

Prefixed APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+ +

Internal APIs (chrome-context only)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+ +

Internet Explorer

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("1")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatOpera("9")}}{{CompatSafari("2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Gecko notes

+ + + +

Quantum CSS notes

+ + + +

See also

+ + diff --git a/files/nl/web/api/comment/index.html b/files/nl/web/api/comment/index.html new file mode 100644 index 0000000000..432fbd60d0 --- /dev/null +++ b/files/nl/web/api/comment/index.html @@ -0,0 +1,137 @@ +--- +title: Comment +slug: Web/API/Comment +translation_of: Web/API/Comment +--- +

{{ ApiRef("DOM") }}

+ +

De Comment interface is een text notitie binnen de markup; hoewel ze niet zichtbaar op de pagina zijn, zijn ze wel te lezen in de sourceview. Comments zijn er in HTML en XML door het tussen '<!--' en '-->' te zetten. In XML, kan je '--' niet in een comment gebruiken.

+ +

{{InheritanceDiagram}}

+ +

Eigenschappen

+ +

Deze interface heeft geen specifieke eigenschap, maar neemt die van zijn parent over, {{domxref("CharacterData")}}, en indirect die van {{domxref("Node")}}. 

+ +

Constructor

+ +
+
{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}
+
Retourneert een Comment object met de parameter als tekstinhoud.
+
+ +

Methoden

+ +

Deze interface heeft geen specifieke methode, maar neemt die van zijn parent over, {{domxref("CharacterData")}}, en indirect die van {{domxref("Node")}}.

+ +

Specificaties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#comment', 'Comment')}}{{Spec2('DOM WHATWG')}}Constructor toegevoegd.
{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM3 Core')}}Geen veranderingen aan {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM2 Core')}}Geen veranderingen aan{{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM1')}}Eerste verschijning
+ +

Browser compabiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KenmerkChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Normale support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Comment() constructor {{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("24.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KenmerkAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Normale support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Comment() constructor {{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("24.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Zie ook

+ + + +

 

diff --git a/files/nl/web/api/css/index.html b/files/nl/web/api/css/index.html new file mode 100644 index 0000000000..f7197a5afa --- /dev/null +++ b/files/nl/web/api/css/index.html @@ -0,0 +1,134 @@ +--- +title: CSS +slug: Web/API/CSS +translation_of: Web/API/CSS +--- +
{{APIRef("CSSOM")}}
+ +

The CSS interface holds useful CSS-related methods. No object with this interface are implemented: it contains only static methods and therefore is a utilitarian interface.

+ +

Eigenschappen

+ +

The CSS interface is a utility interface and no object of this type can be created: only static methods are defined on it.

+ +

Methoden

+ +

The CSS interface is a utility interface and no object of this type can be created: only static methods are defined on it.

+ +

Statische methoden

+ +

No inherited static methods.

+ +
+
{{domxref("CSS.supports()")}}
+
Returns a {{domxref("Boolean")}} indicating if the pair property-value, or the condition, given in parameter is supported.
+
+ +
+
{{domxref("CSS.escape()")}} {{experimental_inline}}
+
Can be used to escape a string mostly for use as part of a CSS selector.
+
+ +

Specificaties

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}}{{Spec2('CSSOM')}}Adds the escape() static method.
{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}{{Spec2('CSS3 Conditional')}}Initial definition
+ +

Browser compabiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support28.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("22.0")}} [1]6.012.1{{CompatNo}}
escape(){{experimental_inline}}46.0{{CompatUnknown}}{{CompatGeckoDesktop("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("22.0")}}[1]{{CompatNo}}12.1{{CompatNo}}
escape(){{experimental_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Was available behind the layout.css.supports-rule.enabled preference since Gecko 20.

+ +

Zie ook

+ + diff --git a/files/nl/web/api/cssstylesheet/index.html b/files/nl/web/api/cssstylesheet/index.html new file mode 100644 index 0000000000..1c034ed417 --- /dev/null +++ b/files/nl/web/api/cssstylesheet/index.html @@ -0,0 +1,183 @@ +--- +title: CSSStyleSheet +slug: Web/API/CSSStyleSheet +tags: + - API + - CSSOM + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CSSStyleSheet +--- +
{{APIRef("CSSOM")}}
+ +

The CSSStyleSheet interface represents a single CSS style sheet. It inherits properties and methods from its parent, {{domxref("StyleSheet")}}.

+ +

A style sheet consists of {{domxref("CSSRule", "rules", "", 1)}}, such as {{domxref("CSSStyleRule", "style rules", "", 1)}} ("h1,h2 { font-size: 16pt }"), various at-rules (@import, @media, ...), etc. This interface lets you inspect and modify the list of rules in the stylesheet.

+ +

See the {{anch("Notes")}} section for the various ways a CSSStyleSheet object can be obtained.

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("Stylesheet")}}.

+ +
+
{{domxref("CSSStyleSheet.cssRules")}}
+
Returns a live {{domxref("CSSRuleList")}}, listing the {{domxref("CSSRule")}} objects in the style sheet.
+ This is normally used to access individual rules like this:
+    styleSheet.cssRules[i] // where i = 0..cssRules.length
+ To add or remove items in cssRules, use the CSSStyleSheet's deleteRule() and insertRule() methods, described below.
+
{{domxref("CSSStyleSheet.ownerRule")}}
+
If this style sheet is imported into the document using an {{cssxref("@import")}} rule, the ownerRule property will return that {{domxref("CSSImportRule")}}, otherwise it returns null.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("Stylesheet")}}.

+ +
+
{{domxref("CSSStyleSheet.deleteRule")}}
+
Deletes a rule at the specified position from the style sheet.
+
{{domxref("CSSStyleSheet.insertRule")}}
+
Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.
+
+ +

Notes

+ +

In some browsers, if a stylesheet is loaded from a different domain, calling cssRules results in SecurityError.

+ +

A stylesheet is associated with at most one {{domxref("Document")}}, which it applies to (unless {{domxref("StyleSheet.disabled", "disabled", "", 1)}}). A list of CSSStyleSheet objects for a given document can be obtained using the {{domxref("document.styleSheets")}} property. A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.

+ +

A CSSStyleSheet object is created and inserted into the document's styleSheets list automatically by the browser, when a style sheet is loaded for a document. As the {{domxref("document.styleSheets")}} list cannot be modified directly, there's no useful way to create a new CSSStyleSheet object manually (although Constructable Stylesheet Objects might get added to the Web APIs at some point). To create a new stylesheet, insert a {{HTMLElement("style")}} or {{HTMLElement("link")}} element into the document.

+ +

A (possibly incomplete) list of ways a style sheet can be associated with a document follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Reason for the style sheet to be associated with the documentAppears in document.
+ styleSheets list		Getting the owner element/rule given the style sheet objectThe interface for the owner objectGetting the CSSStyleSheet object from the owner
{{HTMLElement("style")}} and {{HTMLElement("link")}} elements in the documentYes{{domxref("StyleSheet.ownerNode", ".ownerNode")}}{{domxref("HTMLLinkElement")}},
+ {{domxref("HTMLStyleElement")}},
+ or {{domxref("SVGStyleElement")}}		{{domxref("LinkStyle.sheet", ".sheet")}}
CSS {{cssxref("@import")}} rule in other style sheets applied to the documentYes{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}{{domxref("CSSImportRule")}}{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}
<?xml-stylesheet ?> processing instruction in the (non-HTML) documentYes{{domxref("StyleSheet.ownerNode", ".ownerNode")}}{{domxref("ProcessingInstruction")}}{{domxref("LinkStyle.sheet", ".sheet")}}
HTTP Link HeaderYesN/AN/AN/A
User agent (default) style sheetsNoN/AN/AN/A
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}{{Spec2("CSSOM")}} 
{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}{{Spec2("DOM2 Style")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/nl/web/api/document/createtextnode/index.html b/files/nl/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..f786a5bb70 --- /dev/null +++ b/files/nl/web/api/document/createtextnode/index.html @@ -0,0 +1,120 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +translation_of: Web/API/Document/createTextNode +--- +
{{APIRef("DOM")}}
+ +

Maakt een nieuwe Text node aan.

+ +

Syntax

+ +
var text = document.createTextNode(data);
+
+ + + +

Voorbeeld

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>createTextNode voorbeeld</title>
+<script>
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+</script>
+</head>
+
+<body>
+  <button onclick="addTextNode('WIJ KUNNEN HET! ');">WIJ KUNNEN HET!</button>
+  <button onclick="addTextNode('WERKELIJK! ');">WERKELIJK!</button>
+  <button onclick="addTextNode('GEENSZINS! ');">GEENSZINS!</button>
+
+  <hr />
+
+  <p id="p1">Eerste regel van de paragraaf.</p>
+</body>
+</html>
+
+ +

Specificaties

+ + + + + + + + + + + + + + + + + + + + + +
SpecificatieStatusOpmerking
{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM3 Core")}}No change
{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM2 Core")}}Initial definition
+ +

Browser compatibiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
EigenschapChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
EigenschapAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/nl/web/api/document/currentscript/index.html b/files/nl/web/api/document/currentscript/index.html new file mode 100644 index 0000000000..fd86f2f38e --- /dev/null +++ b/files/nl/web/api/document/currentscript/index.html @@ -0,0 +1,117 @@ +--- +title: Document.currentScript +slug: Web/API/Document/currentScript +tags: + - API + - DOM + - Property + - Reference +translation_of: Web/API/Document/currentScript +--- +
{{ApiRef("DOM")}}
+ +

Geeft het {{HTMLElement("script")}} element wiens script op dit moment wordt uitgevoerd.

+ +

Syntax

+ +
var curScriptElement = document.currentScript;
+
+ +

Voorbeeld

+ +

Dit voorbeeld controleert of het script asynchroon wordt uitgevoerd:

+ +
if (document.currentScript.async) {
+  console.log("Wordt asynchroon uitgevoerd");
+} else {
+  console.log("Wordt synchroon uitgevoerd");
+}
+ +

View Live Examples

+ +

Opmerkingen

+ +

Het is belangrijk om te weten dat dit geen referentie naar het script-element geeft als de code in het script wordt aangeroepen als een callback of event handler; het refereert alleen naar het element wanneer dit initieel wordt verwerkt.

+ +

Specificaties

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}{{Spec2("HTML WHATWG")}}Initiële definitie
+ +

Browser compatibiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basisondersteuning{{CompatChrome(29.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}{{CompatNo}}168
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basisondersteuning4.4{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}8
+
+ +

Zie ook

+ + diff --git a/files/nl/web/api/document/getelementbyid/index.html b/files/nl/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..e399258187 --- /dev/null +++ b/files/nl/web/api/document/getelementbyid/index.html @@ -0,0 +1,202 @@ +--- +title: document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Document + - Elementen + - Method + - Reference + - Web + - getElementById + - id +translation_of: Web/API/Document/getElementById +--- +
{{ ApiRef("DOM") }}
+ +
+ +

Returnt een DOM-referentie naar een element aan de hand van de ID; de ID is een string die gebruikt kan worden om een element de identificeren, door middel van het HTML-attribuut id.

+ +

Als je toegang wil krijgen tot een element, dat geen ID heeft, kan je gebruik maken van {{domxref("Document.querySelector", "querySelector()")}} om eender welk element te vinden gebruik makend van {{Glossary("CSS selector", "selector")}}.

+ +

Syntax

+ +
var element = document.getElementById(id);
+
+ +

Parameters

+ +
+
id
+
is een hoofdlettergevoelige string die overeenkomt met de unieke ID van het element dat gezocht wordt.
+
+ +

Return Value

+ +
+
element
+
is een DOM-referentie naar een {{domxref("Element")}}-object, of null als het element met het gespecificeerde ID niet in het document voorkomt.
+
+ +

Voorbeeld

+ +

HTML Content

+ +
<html>
+<head>
+  <title>getElementById example</title>
+</head>
+<body>
+  <p id="para">Some text here</p>
+  <button onclick="changeColor('blue');">blue</button>
+  <button onclick="changeColor('red');">red</button>
+</body>
+</html>
+ +

JavaScript Content

+ +
function changeColor(newColor) {
+  var elem = document.getElementById('para');
+  elem.style.color = newColor;
+}
+ +

Result

+ +

{{ EmbedLiveSample('Example1', 250, 100) }}

+ +

Notities

+ +

Let op dat "Id" in "getElementById" hoofdlettergevoelig is, en correct geschreven moet zijn om te werken. "getElementByID" zal niet werken, hoewel deze manier van schrijven natuurlijk lijkt.

+ +

In tegenstelling tot andere methods die erop lijken, is getElementById alleen beschikbaar als method op het globale document-object, en niet beschikbaar als method op alle elementen in de DOM. Omdat ID-waarden uniek moeten zijn in HTML documenten is er geen behoefte aan "lokale" versies van deze functie.

+ +

Voorbeeld

+ +
<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p id="test1">hello word2</p>
+        <p>hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById('parent-id');
+        var test1=parentDOM.getElementById('test1');
+        //throw error
+        //Uncaught TypeError: parentDOM.getElementById is not a function
+    </script>
+</body>
+</html>
+ +

Als er geen element bestaat met de gespecificiëerde id, geeft deze functie null. Let op: de id-parameter is hoofdlettergevoelig, dus document.getElementById("Main") zal null geven, in plaats van het element <div id="main">, omdat "M" en "m" verschillend zijn in deze method.

+ +

Elementen die niet in het document staan, zullen niet gezocht worden door getElementById(). Wanneer je een element creëert en het een id toewijst, moet je het element van te voren aan de document tree toevoegen door middel van {{domxref("Node.insertBefore()")}} — of een andere erop lijkende method — vóórdat getElementById() er toegang toe heeft.

+ +
var element = document.createElement('div');
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el will be null!
+
+ +

Niet-HTML documenten. De DOM-implementatie moet informatie bevatten over welke attributes het type ID dragen. Attributen met de naam "id" zijn niet per se van het type ID, tenzij dat expliciet gedefiniëerd staat in de DTD van het document. Het attribuut id is gedefiniëerd als type ID in de gevallen van onder andere XHTML en XUL. Implementaties die niet als type ID gedefiniëerd zijn, returnen null.

+ +

Specificatie

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}{{Spec2('DOM1')}}Initial definition for the interface
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basisondersteuning1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.0) }}5.57.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basisondersteuning1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile(1.0) }}6.06.01.0
+
+ +

Zie ook

+ + diff --git a/files/nl/web/api/document/index.html b/files/nl/web/api/document/index.html new file mode 100644 index 0000000000..a64e97a986 --- /dev/null +++ b/files/nl/web/api/document/index.html @@ -0,0 +1,447 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Document +--- +
{{APIRef}}
+ +
 
+ +

The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree. The DOM tree includes elements such as {{HTMLElement("body")}} and {{HTMLElement("table")}}, among many others. It provides functionality global to the document, like how to obtain the page's URL and create new elements in the document.

+ +

{{inheritanceDiagram}}

+ +

The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …), a larger API is available: HTML documents, served with the text/html content type, also implement the {{domxref("HTMLDocument")}} interface, wherease SVG documents implement the {{domxref("SVGDocument")}} interface.

+ +

Properties

+ +

This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.

+ +
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
Provides access to all elements with an id. This is a legacy, non-standard interface and you should use the {{domxref("document.getElementById()")}} method instead.
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
Used with {{domxref("Document.load")}} to indicate an asynchronous request.
+
{{domxref("Document.characterSet")}} {{readonlyinline}}
+
Returns the character set being used by the document.
+
{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}
+
Alias of {{domxref("Document.characterSet")}}. Use this property instead.
+
{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}
+
Indicates whether the document is rendered in quirks or strict mode.
+
{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}
+
Returns the Content-Type from the MIME Header of the current document.
+
{{domxref("Document.doctype")}} {{readonlyinline}}
+
Returns the Document Type Definition (DTD) of the current document.
+
{{domxref("Document.documentElement")}} {{readonlyinline}}
+
Returns the {{domxref("Element")}} that is a direct child of the document. For HTML documents, this is normally the HTML element.
+
{{domxref("Document.documentURI")}} {{readonlyinline}}
+
Returns the document location as a string.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
Should return a {{domxref("DOMConfiguration")}} object.
+
{{domxref("Document.fullscreen")}} {{obsolete_inline}}
+
true when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.
+
{{domxref("Document.hidden")}} {{readonlyinline}}
+
…
+
{{domxref("Document.implementation")}} {{readonlyinline}}
+
Returns the DOM implementation associated with the current document.
+
{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}
+
Alias of {{domxref("Document.characterSet")}}. Use this property instead.
+
{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}
+
Returns the name of the style sheet set that was last enabled. Has the value null until the style sheet is changed by setting the value of {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+
Returns a {{jsxref("Boolean")}} that is true only if this document is synthetic, such as a standalone image, video, audio file, or the like.
+
{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
The element that's currently in full screen mode for this document.
+
{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true if calling {{domxref("Element.mozRequestFullscreen()")}} would succeed in the curent document.
+
{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}
+
Returns the element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another document.
+
{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}
+
Returns the preferred style sheet set as specified by the page author.
+
{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}
+
Returns a reference to the {{domxref("Element")}} that scrolls the document.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
Returns which style sheet set is currently in use.
+
{{domxref("Document.styleSheets")}} {{readonlyinline}}
+
Returns a list of the style sheet objects on the current document.
+
{{domxref("Document.styleSheetSets")}} {{readonlyinline}}
+
Returns a list of the style sheet sets available on the document.
+
{{domxref("Document.timeline")}} {{readonlyinline}}
+
…
+
{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}
+
…
+
{{domxref("Document.URL")}} {{readonlyinline}}
+
Returns ...
+
{{domxref("Document.visibilityState")}} {{readonlyinline}}
+
+

Returns a string denoting the visibility state of the document. Possible values are visible,  hidden,  prerender, and unloaded.

+
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
Returns the encoding as determined by the XML declaration.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
Returns true if the XML declaration specifies the document to be standalone (e.g., An external part of the DTD affects the document's content), else false.
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
Returns the version number as specified in the XML declaration or "1.0" if the declaration is absent.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +

{{page("/en-US/docs/Web/API/ParentNode","Properties")}}

+ +

Extension for HTML document

+ +

The Document interface for HTML documents inherits from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents.

+ +
+
{{domxref("Document.activeElement")}} {{readonlyinline}}
+
Returns the currently focused element.
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
Returns or sets the color of active links in the document body.
+
{{domxref("Document.anchors")}}
+
Returns a list of all of the anchors in the document.
+
{{domxref("Document.applets")}} {{Deprecated_inline}}
+
Returns an ordered list of the applets within a document.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
Gets/sets the background color of the current document.
+
{{domxref("Document.body")}}
+
Returns the {{HTMLElement("body")}} element of the current document.
+
{{domxref("Document.cookie")}}
+
Returns a semicolon-separated list of the cookies for that document or sets a single cookie.
+
{{domxref("Document.defaultView")}} {{readonlyinline}}
+
Returns a reference to the window object.
+
{{domxref("Document.designMode")}}
+
Gets/sets the ability to edit the whole document.
+
{{domxref("Document.dir")}} {{readonlyinline}}
+
Gets/sets directionality (rtl/ltr) of the document.
+
{{domxref("Document.domain")}} {{readonlyinline}}
+
Returns the domain of the current document.
+
{{domxref("Document.embeds")}} {{readonlyinline}}
+
Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.
+
{{domxref("document.fgColor")}} {{Deprecated_inline}}
+
Gets/sets the foreground color, or text color, of the current document.
+
{{domxref("Document.forms")}} {{readonlyinline}}
+
Returns a list of the {{HTMLElement("form")}} elements within the current document.
+
{{domxref("Document.head")}} {{readonlyinline}}
+
Returns the {{HTMLElement("head")}} element of the current document.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
Gets/sets the height of the current document.
+
{{domxref("Document.images")}} {{readonlyinline}}
+
Returns a list of the images in the current document.
+
{{domxref("Document.lastModified")}} {{readonlyinline}}
+
Returns the date on which the document was last modified.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of hyperlinks in the document.
+
{{domxref("Document.links")}} {{readonlyinline}}
+
Returns a list of all the hyperlinks in the document.
+
{{domxref("Document.location")}} {{readonlyinline}}
+
Returns the URI of the current document.
+
{{domxref("Document.plugins")}} {{readonlyinline}}
+
Returns a list of the available plugins.
+
{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}
+
Returns loading status of the document.
+
{{domxref("Document.referrer")}} {{readonlyinline}}
+
Returns the URI of the page that linked to this page.
+
{{domxref("Document.scripts")}} {{readonlyinline}}
+
Returns all the {{HTMLElement("script")}} elements on the document.
+
{{domxref("Document.title")}}
+
Sets or gets title of the current document.
+
{{domxref("Document.URL")}} {{readonlyInline}}
+
Returns the document location as a string.
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of visited hyperlinks.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
Returns the width of the current document.
+
+ +

Event handlers

+ +
+
{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("afterscriptexecute")}} event.
+
{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("beforescriptexecute")}} event.
+
{{domxref("Document.oncopy")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("copy")}} event.
+
{{domxref("Document.oncut")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("cut")}} event.
+
{{domxref("Document.onfullscreenchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.
+
{{domxref("Document.onfullscreenerror")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.
+
{{domxref("Document.onpaste")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("paste")}} event.
+
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+
Represents the event handling code for the {{event("pointerlockchange")}} event.
+
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+
Represetnts the event handling code for the {{event("pointerlockerror")}} event.
+
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+
Represents the event handling code for the {{event("readystatechange")}} event.
+
{{domxref("Document.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("Document.onwheel")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("wheel")}} event.
+
+ +

The Document interface is extended with the {{domxref("GlobalEventHandlers")}} interface:

+ +

{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}

+ +

Methods

+ +

This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.

+ +
+
{{domxref("Document.adoptNode()")}}
+
Adopt node from an external document.
+
{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}
+
See {{domxref("Window.captureEvents")}}.
+
{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}
+
Gets the {{domxref("CaretPosition")}} at or near the specified coordinates.
+
{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}
+
Gets a {{Domxref("Range")}} object for the document fragment under the specified coordinates.
+
{{domxref("Document.createAttribute()")}}
+
Creates a new {{domxref("Attr")}} object and returns it.
+
{{domxref("Document.createAttributeNS()")}}
+
Creates a new attribute node in a given namespace and returns it.
+
{{domxref("Document.createCDATASection()")}}
+
Creates a new CDATA node and returns it.
+
{{domxref("Document.createComment()")}}
+
Creates a new comment node and returns it.
+
{{domxref("Document.createDocumentFragment()")}}
+
Creates a new document fragment.
+
{{domxref("Document.createElement()")}}
+
Creates a new element with the given tag name.
+
{{domxref("Document.createElementNS()")}}
+
Creates a new element with the given tag name and namespace URI.
+
{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}
+
Creates a new entity reference object and returns it.
+
{{domxref("Document.createEvent()")}}
+
Creates an event object.
+
{{domxref("Document.createNodeIterator()")}}
+
Creates a {{domxref("NodeIterator")}} object.
+
{{domxref("Document.createProcessingInstruction()")}}
+
Creates a new {{domxref("ProcessingInstruction")}} object.
+
{{domxref("Document.createRange()")}}
+
Creates a {{domxref("Range")}} object.
+
{{domxref("Document.createTextNode()")}}
+
Creates a text node.
+
{{domxref("Document.createTouch()")}}
+
Creates a {{domxref("Touch")}} object.
+
{{domxref("Document.createTouchList()")}}
+
Creates a {{domxref("TouchList")}} object.
+
{{domxref("Document.createTreeWalker()")}}
+
Creates a {{domxref("TreeWalker")}} object.
+
{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}
+
Returns the topmost element at the specified coordinates. 
+
{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}
+
Returns an array of all elements at the specified coordinates.
+
{{domxref("Document.enableStyleSheetsForSet()")}}
+
Enables the style sheets for the specified style sheet set.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
Release the pointer lock.
+
{{domxref("Document.getAnimations()")}} {{experimental_inline}}
+
Returns an array of all {{domxref("Animation")}} objects currently in effect whose target elements are descendants of the document.
+
{{domxref("Document.getElementsByClassName()")}}
+
Returns a list of elements with the given class name.
+
{{domxref("Document.getElementsByTagName()")}}
+
Returns a list of elements with the given tag name.
+
{{domxref("Document.getElementsByTagNameNS()")}}
+
Returns a list of elements with the given tag name and namespace.
+
{{domxref("Document.importNode()")}}
+
Returns a clone of a node from an external document.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
Replaces entities, normalizes text nodes, etc.
+
{{domxref("Document.registerElement()")}} {{experimental_inline}}
+
Registers a web component.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Releases the current mouse capture if it's on an element in this document.
+
{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
See {{domxref("Window.releaseEvents()")}}.
+
{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
See {{domxref("Window.routeEvent()")}}.
+
{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Allows you to change the element being used as the background image for a specified element ID.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +
+
{{domxref("document.getElementById","document.getElementById(String id)")}}
+
Returns an object reference to the identified element.
+
{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns the first Element node within the document, in document order, that matches the specified selectors.
+
{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns a list of all the Element nodes within the document that match the specified selectors.
+
+ +

The Document interface is extended with the {{domxref("XPathEvaluator")}} interface:

+ +
+
{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}
+
Compiles an XPathExpression which can then be used for (repeated) evaluations.
+
{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}
+
Creates an {{domxref("XPathNSResolver")}} object.
+
{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+
Evaluates an XPath expression.
+
+ +

Extension for HTML documents

+ +

The Document interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents:

+ +
+
{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.
+
{{domxref("document.close()")}}
+
Closes a document stream for writing.
+
{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}
+
On an editable document, executes a formating command.
+
{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}
+
Returns a list of elements with the given name.
+
{{domxref("document.getSelection()")}}
+
Returns a {{domxref("Selection")}} object related to text selected in the document.
+
{{domxref("document.hasFocus()")}}
+
Returns true if the focus is currently located anywhere inside the specified document.
+
{{domxref("document.open()")}}
+
Opens a document stream for writing.
+
{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}
+
Returns true if the formating command can be executed on the current range.
+
{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}
+
Returns true if the formating command is in an indeterminate state on the current range.
+
{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}
+
Returns true if the formating command has been executed on the current range.
+
{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}
+
Returns true if the formating command is supported on the current range.
+
{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}
+
Returns the current value of the current range for a formating command.
+
{{domxref("document.write","document.write(String text)")}}
+
Writes text in a document.
+
{{domxref("document.writeln","document.writeln(String text)")}}
+
Writes a line of text in a document.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectstart and onselectionchange.
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Initial definition for the interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Turn the {{domxref("HTMLDocument")}} interface into a Document extension.
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Define the {{domxref("XPathEvaluator")}} interface which extend document.
{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}{{Spec2('Page Visibility API')}}Extend the Document interface with the visibilityState and hidden attributes
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Extend the Document interface
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Extend the Document interface
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Extend the Document interface
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extend the Document interface
+ +

Browser compatibility notes

+ +

Firefox notes

+ +

Mozilla defines a set of non-standard properties made only for XUL content:

+ +
+
{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Returns the {{HTMLElement("script")}} element that is currently executing.
+
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
+
(Mozilla add-ons only!) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).
+
{{domxref("document.popupNode")}}
+
Returns the node upon which a popup was invoked.
+
{{domxref("document.tooltipNode")}}
+
Returns the node which is the target of the current tooltip.
+
+ +

Mozilla also define some non-standard methods:

+ +
+
{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+
This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}
+
Use the {{domxref("Element.getBoundingClientRect()")}} method instead.
+
{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}
+
Loads a XUL overlay dynamically. This only works in XUL documents.
+
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+
This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
+ +

Internet Explorer notes

+ +

Microsoft defines some non-standard properties:

+ +
+
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
+
Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See MSDN.
+
Internet Explorer does not support all methods from the Node interface in the Document interface:
+
+ +
+
{{domxref("document.contains")}}
+
As a work-around, document.body.contains() can be used.
+
+ +

 

diff --git a/files/nl/web/api/document/queryselector/index.html b/files/nl/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..66a6a87148 --- /dev/null +++ b/files/nl/web/api/document/queryselector/index.html @@ -0,0 +1,162 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - DOM + - Elementen + - Méthode + - Referentie + - selectoren +translation_of: Web/API/Document/querySelector +--- +
{{ ApiRef("DOM") }}
+ +

Geeft het eerste element in het document dat overeenkomt met de opgegeven selector, of groep van selectors, of null als er geen overeenkomsten zijn gevonden.

+ +
+

Opmerking: Bij het doorzoeken van het document wordt er gebruik gemaakt van een depth-first pre-order zoekmethode, waarbij wordt begonnen bij de eerste knoop/het eerste element in het document, en waarna er vervolgens geïtereerd wordt door verdere knopen/elementen geordend op basis van het aantal kindknopen/-elementen.

+
+ +

Syntaxis

+ +
element = document.querySelector(selectors);
+
+ +

waarbij

+ + + +

Voorbeeld

+ +

In dit voorbeeld wordt het eerste element in het document met de klasse "mijnklasse" teruggestuurd:

+ +
var el = document.querySelector(".mijnklasse");
+
+ +

Voorbeeld: Complexe selectoren

+ +

Selectoren kunnen ook erg complex zijn, zoals gedemonstreerd in het volgende voorbeeld. Hier wordt het eerste element <input name="login"/> binnen <div class="gebruikerspaneel hoofd"> in het document teruggestuurd:

+ +
var el = document.querySelector("div.gebruikerspaneel.hoofd input[name='login']");
+
+ +

Opmerkingen

+ +

Stuurt null terug wanneer er geen overeenkomstig element wordt gevonden; anders wordt het eerste element dat overeenkomt teruggestuurd.

+ +

Als de selector overeenkomt met een ID, en dit ID is foutief meerdere malen gebruikt in het document, wordt het eerste element dat overeenkomt teruggestuurd.

+ +

Geeft een SYNTAX_ERR-uitzondering als de opgegeven groep van selectoren ongeldig is.

+ +

querySelector() werd geïntroduceerd in de Selectors-API.

+ +

Het string-argument dat aan querySelector wordt gegeven volgt de syntaxix van CSS.

+ +

CSS Pseudo-elementen zullen nooit een element als resultaat geven, zoals gespecificeerd in de Selectors-API.

+ +

Om een ID of selectoren te vinden die niet de CSS-syntaxis volgen (bijvoorbeeld met een dubble punt of spatie erin), moet voor het verboden karakter een schuine streep naar achteren (escaping) worden geplaatst. Omdat de schuine streep naar achteren een escapekarakter is in JavaScript, is het noodzakelijk, wanneer de ID of selectoren een schuine streep naar achteren bevatten, om twee extra schuine strepen naar achteren hieraan toe te voegen (één keer voor de JavaScript-string, en één keer voor querySelector):

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar" (\b is het karakter voor een backspace)
+  document.querySelector('#foo\bar');    // Komt nergens mee overeen
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar'); // Komt overeen met de eerste div
+
+  document.querySelector('#foo:bar');    // Komt nergens mee overeen
+  document.querySelector('#foo\\:bar');  // Komt overeen met de tweede div
+</script>
+
+ +

Specificatie

+ + + + + + + + + + + + + + + + + + + +
SpecificatieStatusOpmerking
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}} 
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Oorspronkelijke definitie
+ +

Browsercompatibiliteit

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunctionaliteitChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basis ondersteuning1{{CompatVersionUnknown}}3.58103.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunctionaliteitAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basis ondersteuning2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}910.03.2
+
+ +

Zie ook:

+ + diff --git a/files/nl/web/api/document_object_model/index.html b/files/nl/web/api/document_object_model/index.html new file mode 100644 index 0000000000..6b39acb065 --- /dev/null +++ b/files/nl/web/api/document_object_model/index.html @@ -0,0 +1,412 @@ +--- +title: Document Object Model (DOM) +slug: Web/API/Document_Object_Model +tags: + - API + - DOM + - DOM Referentie + - Intermediate + - WebAPI +translation_of: Web/API/Document_Object_Model +--- +

Het Document Object Model (DOM) is een programmeerinterface voor HTML, XML en SVG documenten.  Het zorgt voor een structurele representatie van het document, wat het mogelijk maakt de inhoud en visuele presentatie te veranderen.Het DOM geeft een weergave van een document als een gestructureerde groep van knooppunten en objecten die methoden en eigenschappen bevatten. Knooppunten kunnen eventueel gekoppeld worden met event handlers. Zodra dit event geactiveerd is, worden de event handlers uitgevoerd. Het verbindt eigenlijk scripts en webpagina's met programmeertalen.

+ +

Hoewel vaak benaderd met behulp van JavaScript, is de DOM zelf geen onderdeel van de taal JavaScript, en het kan worden gebruikt in andere talen, hoewel dit niet gewoonlijk is.

+ +

Een introductie van DOM is beschikbaar.

+ +

DOM interfaces

+ +
+ +
+ +

Verouderde DOM interfaces

+ +

Het Document Object Model is vereenvoudigd. Om dit te bereiken zijn de volgende interfaces, die in de verschillende DOM level 3 of minder kwaliteit te bereiken zijn, verwijderd. Het is nog onduidelijk of sommige kunnen worden ingesteld, maar voor dit moment dat ze moeten worden beschouwd als achterhaald en worden vermeden:

+ +
+ +
+ +

HTML interfaces

+ +

Een document met HTML wordt beschreven met behulp van {{domxref("HTMLDocument")}} interface. Merk op dat de HTML-specificatie ook het {{domxref("Document")}} interface verlengt.
+
+ Een HTMLDocument object geeft ook toegang tot de browser functies: het tabblad of venster, waarin een pagina wordt getoond met behulp van de {{domxref("Window")}} interface, de {{domxref("window.style", "Style")}} verbonden met (meestal CSS), de geschiedenis van de browser ten opzichte van de context, {{domxref("window.history", "History")}} , uiteindelijk een {{domxref("Selection")}} gedaan op het document.

+ +

HTML element interfaces

+ +
+ +
+ +

Andere interfaces

+ +
+ +
+ +

Verouderde HTML interfaces

+ +
+ +
+ +

SVG interfaces

+ +

SVG element interfaces

+ +
+ +
+ +

SVG datatype interfaces

+ +

Hier is de DOM API voor datatypes gebruikt in de definities van SVG eigenschappen en attributen.

+ +
+

Opmerking: Vanaf {{Gecko("5.0")}} vertegenwoordigen de volgende SVG-gerelateerde DOM objectlijsten die te indexeren zijn en kunnen worden geraadpleegd. Zoals arrays, deze hebben als toevoeging een lengte-eigenschap met vermelding van het aantal items in de lijsten: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} en {{domxref("SVGPointList")}}.

+
+ +

Static type

+ +
+ +
+ +

Animated type

+ +
+ +
+ +

SVG Path segment interfaces

+ +
+ +
+ +

SMIL gerelateerde interfaces

+ +
+ +
+ +

Andere SVG interfaces

+ +
+ +
+ +

Zie ook

+ + diff --git a/files/nl/web/api/element/index.html b/files/nl/web/api/element/index.html new file mode 100644 index 0000000000..a8a8ff5b40 --- /dev/null +++ b/files/nl/web/api/element/index.html @@ -0,0 +1,484 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - DOM Reference + - Element + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web API +translation_of: Web/API/Element +--- +
{{APIRef("DOM")}}
+ +

Element is the most general base class from which all objects in a {{DOMxRef("Document")}} inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. For example, the {{DOMxRef("HTMLElement")}} interface is the base interface for HTML elements, while the {{DOMxRef("SVGElement")}} interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.

+ +

Languages outside the realm of the Web platform, like XUL through the XULElement interface, also implement Element.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("Element.attributes")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("NamedNodeMap")}} object containing the assigned attributes of the corresponding HTML element.
+
{{DOMxRef("Element.classList")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMTokenList")}} containing the list of class attributes.
+
{{DOMxRef("Element.className")}}
+
Is a {{DOMxRef("DOMString")}} representing the class of the element.
+
{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner height of the element.
+
{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the left border of the element.
+
{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the top border of the element.
+
{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner width of the element.
+
{{DOMxRef("Element.computedName")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.
+
{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. 
+
{{DOMxRef("Element.id")}}
+
Is a {{DOMxRef("DOMString")}} representing the id of the element.
+
{{DOMxRef("Element.innerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.
+
{{DOMxRef("Element.localName")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.
+
{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}
+
The namespace URI of the element, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}

+
+
+
{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}
+
Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or null if there's no sibling node.
+
{{DOMxRef("Element.outerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.
+
{{DOMxRef("Element.prefix")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or null if no prefix is specified.
+
{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}
+
Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or null if there is no sibling element.
+
{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view height of an element.
+
{{DOMxRef("Element.scrollLeft")}}
+
Is a {{jsxref("Number")}} representing the left scroll offset of the element.
+
{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.
+
{{DOMxRef("Element.scrollTop")}}
+
A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.
+
{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.
+
{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view width of the element.
+
{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}
+
Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.
+
{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
+
Returns the shadow root that is hosted by the element, regardless if its open or closed. Available only to WebExtensions.
+
{{DOMxRef("Element.slot")}} {{Experimental_Inline}}
+
Returns the name of the shadow DOM slot the element is inserted in.
+
{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.
+
{{DOMxRef("Element.tagName")}} {{readOnlyInline}}
+
Returns a {{jsxref("String")}} with the name of the tag for the given element.
+
{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}
+
Returns the {{DOMxRef("UndoManager")}} associated with the element.
+
{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.
+
+ +
+

Note: DOM Level 3 defined namespaceURI, localName and prefix on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to Element.

+ +

This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.

+
+ +

Properties included from Slotable

+ +

The Element interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.

+ +
+
{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}
+
Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.
+
+ +

Event handlers

+ +
+
{{domxref("Element.onfullscreenchange")}}
+
An event handler for the {{event("fullscreenchange")}} event, which is sent when the element enters or exits full-screen mode. This can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is backgrounded.
+
{{domxref("Element.onfullscreenerror")}}
+
An event handler for the {{event("fullscreenerror")}} event, which is sent when an error occurs while attempting to change into full-screen mode.
+
+ +

Methods

+ +

Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("EventTarget.addEventListener()")}}
+
Registers an event handler to a specific event type on the element.
+
{{DOMxRef("Element.attachShadow()")}}
+
Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}
+
A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
+
{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}
+
Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.
+
{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+
Creates a shadow DOM on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
+
Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.
+
{{DOMxRef("EventTarget.dispatchEvent()")}}
+
Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.
+
{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}
+
Returns an array of Animation objects currently active on the element.
+
{{DOMxRef("Element.getAttribute()")}}
+
Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNames()")}}
+
Returns an array of attribute names from the current element.
+
{{DOMxRef("Element.getAttributeNS()")}}
+
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getBoundingClientRect()")}}
+
Returns the size of an element and its position relative to the viewport.
+
{{DOMxRef("Element.getClientRects()")}}
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{DOMxRef("Element.getElementsByClassName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.
+
{{DOMxRef("Element.getElementsByTagName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.
+
{{DOMxRef("Element.getElementsByTagNameNS()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.
+
{{DOMxRef("Element.hasAttribute()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.
+
{{DOMxRef("Element.hasAttributeNS()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.
+
{{DOMxRef("Element.hasAttributes()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.
+
{{DOMxRef("Element.hasPointerCapture()")}}
+
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
+
{{DOMxRef("Element.insertAdjacentElement()")}}
+
Inserts a given element node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.insertAdjacentHTML()")}}
+
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
+
{{DOMxRef("Element.insertAdjacentText()")}}
+
Inserts a given text node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.
+
{{DOMxRef("Element.querySelector()")}}
+
Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.
+
{{DOMxRef("Element.querySelectorAll()")}}
+
Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.
+
{{DOMxRef("Element.releasePointerCapture()")}}
+
Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.
+
{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}
+
Removes the element from the children list of its parent.
+
{{DOMxRef("Element.removeAttribute()")}}
+
Removes the named attribute from the current node.
+
{{DOMxRef("Element.removeAttributeNS()")}}
+
Removes the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}
+
Removes the node representation of the named attribute from the current node.
+
{{DOMxRef("EventTarget.removeEventListener()")}}
+
Removes an event listener from the element.
+
{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
+
Asynchronously asks the browser to make the element full-screen.
+
{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
+
Allows to asynchronously ask for the pointer to be locked on the given element.
+
+ +
+
{{domxref("Element.scroll()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{domxref("Element.scrollBy()")}}
+
Scrolls an element by the given amount.
+
{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}
+
Scrolls the page until the element gets into the view.
+
{{domxref("Element.scrollTo()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{DOMxRef("Element.setAttribute()")}}
+
Sets the value of a named attribute of the current node.
+
{{DOMxRef("Element.setAttributeNS()")}}
+
Sets the value of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}
+
Sets the node representation of the named attribute from the current node.
+
{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Sets the node representation of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}
+
Sets up mouse event capture, redirecting all mouse events to this element.
+
{{DOMxRef("Element.setPointerCapture()")}}
+
Designates a specific element as the capture target of future pointer events.
+
{{DOMxRef("Element.toggleAttribute()")}}
+
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
{{domxref("Element/cancel_event", "cancel")}}
+
Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the Esc key or clicks a "Close dialog" button which is part of the browser's UI.
+ Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.
+
error
+
Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.
+
{{domxref("Element/scroll_event", "scroll")}}
+
Fired when the document view or an element has been scrolled.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.
+
{{domxref("Element/select_event", "select")}}
+
Fired when some text has been selected.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.
+
{{domxref("Element/show_event", "show")}}
+
Fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute. {{deprecated_inline}}
+ Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.
+
{{domxref("Element/wheel_event","wheel")}}
+
Fired when the user rotates a wheel button on a pointing device (typically a mouse).
+ Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} property.
+
+ +

Clipboard events

+ +
+
{{domxref("Element/copy_event", "copy")}}
+
Fired when the user initiates a copy action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.
+
{{domxref("Element/cut_event", "cut")}}
+
Fired when the user initiates a cut action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.
+
{{domxref("Element/paste_event", "paste")}}
+
Fired when the user initiates a paste action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.
+
+ +

Composition events

+ +
+
{{domxref("Element/compositionend_event", "compositionend")}}
+
Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.
+
{{domxref("Element/compositionstart_event", "compositionstart")}}
+
Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.
+
{{domxref("Element/compositionupdate_event", "compositionupdate")}}
+
Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.
+
+ +

Focus events

+ +
+
{{domxref("Element/blur_event", "blur")}}
+
Fired when an element has lost focus.
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.
+
{{domxref("Element/focus_event", "focus")}}
+
Fired when an element has gained focus.
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property
+
{{domxref("Element/focusin_event", "focusin")}}
+
Fired when an element is about to gain focus.
+
{{domxref("Element/focusout_event", "focusout")}}
+
Fired when an element is about to lose focus.
+
+ +

Fullscreen events

+ +
+
{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
+
Sent to an {{domxref("Element")}} when it transitions into or out of full-screen mode.
+ Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}  property.
+
{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
+
Sent to an Element if an error occurs while attempting to switch it into or out of full-screen mode.
+ Also available via the {{domxref("Element.onfullscreenerror", "onfullscreenerror")}} property.
+
+ +

Keyboard events

+ +
+
{{domxref("Element/keydown_event", "keydown")}}
+
Fired when a key is pressed.
+ Also available via the {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} property.
+
{{domxref("Element/keypress_event", "keypress")}}
+
Fired when a key that produces a character value is pressed down. {{deprecated_inline}}
+ Also available via the {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} property.
+
{{domxref("Element/keyup_event", "keyup")}}
+
Fired when a key is released.
+ Also available via the {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} property.
+
+ +

Mouse events

+ +
+
{{domxref("Element/Activate_event", "Activate")}}
+
Occurs when an element is activated, for instance, through a mouse click or a keypress.
+ Also available via the {{domxref("ServiceWorkerGlobalScope/onactivate", "onactivate")}} property.
+
{{domxref("Element/auxclick_event", "auxclick")}}
+
Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.
+
{{domxref("Element/click_event", "click")}}
+
Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.
+ Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.
+
{{domxref("Element/contextmenu_event", "contextmenu")}}
+
Fired when the user attempts to open a context menu.
+ Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.
+
{{domxref("Element/dblclick_event", "dblclick")}}
+
Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.
+ Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.
+
{{domxref("Element/mousedown_event", "mousedown")}}
+
Fired when a pointing device button is pressed on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.
+
{{domxref("Element/mouseenter_event", "mouseenter")}}
+
Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.
+
{{domxref("Element/mouseleave_event", "mouseleave")}}
+
Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.
+
{{domxref("Element/mousemove_event", "mousemove")}}
+
Fired when a pointing device (usually a mouse) is moved while over an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.
+
{{domxref("Element/mouseout_event", "mouseout")}}
+
Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.
+
{{domxref("Element/mouseover_event", "mouseover")}}
+
Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.
+
{{domxref("Element/mouseup_event", "mouseup")}}
+
Fired when a pointing device button is released on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.
+
{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}
+
Fired each time the amount of pressure changes on the trackpadtouchscreen.
+
{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}
+
Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".
+
{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}
+
Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.
+
{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}
+
Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".
+
+ +

Touch events

+ +
+
{{domxref("Element/touchcancel_event", "touchcancel")}}
+
Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).
+ Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.
+
{{domxref("Element/touchend_event", "touchend")}}
+
Fired when one or more touch points are removed from the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property
+
{{domxref("Element/touchmove_event", "touchmove")}}
+
Fired when one or more touch points are moved along the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property
+
{{domxref("Element/touchstart_event", "touchstart")}}
+
Fired when one or more touch points are placed on the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property
+
+ +
+
 
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Added the getAnimations() method.
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Added the undoScope and undoManager properties.
{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events 2')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
+ Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
+ Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Added the following methods: querySelector() and querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Added the requestPointerLock() method.
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Added the requestFullscreen() method.
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Added the following properties: innerHTML, and outerHTML.
+ Added the following method: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Added the following properties: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
+ Added the following methods: getClientRects(), getBoundingClientRect(), scroll(), scrollBy(), scrollTo() and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Added the following methods: closest(), insertAdjacentElement() and insertAdjacentText().
+ Moved hasAttributes() from the Node interface to this one.
{{SpecName("DOM4", "#interface-element", "Element")}}{{Spec2("DOM4")}}Removed the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
+ Modified the return value of getElementsByTagName() and getElementsByTagNameNS().
+ Removed the schemaTypeInfo property.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Added the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). These methods were never implemented and have been removed in later specifications.
+ Added the schemaTypeInfo property. This property was never implemented and has been removed in later specifications.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}The normalize() method has been moved to {{DOMxRef("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element")}}

diff --git a/files/nl/web/api/eventsource/index.html b/files/nl/web/api/eventsource/index.html new file mode 100644 index 0000000000..0c5bf3828b --- /dev/null +++ b/files/nl/web/api/eventsource/index.html @@ -0,0 +1,121 @@ +--- +title: EventSource +slug: Web/API/EventSource +translation_of: Web/API/EventSource +--- +

{{APIRef("Websockets API")}}

+ +

De EventSource interface wordt gebruikt om door de server afgeschoten events te ontvangen. Het verbind met de server via HTTP, en ontvangt events in het text/event-stream format, zonder de verbinding te sluiten.

+ +
+
+ +

Eigenschappen

+ +

Deze interface ontvant ook de eigenschappen van zijn parent, {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.onerror")}}
+
Is een {{domxref("EventHandler")}} die afgevuurd wordt wanneer er een fout voorkomt, en een {{event("error")}} event wordt afgeschoten op dit object.
+
{{domxref("EventSource.onmessage")}}
+
Is een {{domxref("EventHandler")}} die afgevuurd wordt wanneer er een {{event("message")}} event wordt ontvangen, wanneer deze van de bron komt.
+
{{domxref("EventSource.onopen")}}
+
Is een {{domxref("EventHandler")}} die afgevuurd wordt wanneer een {{event("open")}} event wordt ontvangen. Enkel wanneer de connectie net wordt geopend.
+
{{domxref("EventSource.readyState")}} {{readonlyinline}}
+
Een unsigned short die de status van de verbinding aan geeft. Mogelijke waardes zijn VERBINDEN (0), OPEN (1), or GESLOTEN (2).
+
{{domxref("EventSource.url")}} {{readonlyinline}}
+
Een {{domxref("DOMString")}} die de URL van de bron weergeeft.
+
+ +

Methodes

+ +

Deze interface ontvant ook de methodes van zijn parent, {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.close()")}}
+
Sluit de verbinding, mits er een actieve verbinding is, en zet het readyState attribuut op GESLOTEN. Als de verbinding al gesloten is, doet deze methode niks.
+
+ +

Specificaties

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}{{Spec2('HTML WHATWG')}} 
+ + + +

Browser compabiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
 Basic support9{{ CompatGeckoDesktop("6.0") }}{{CompatUnknown}}115
CORS support26{{ CompatGeckoDesktop("11.0") }}{{CompatUnknown}}12{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basis ondersteuning{{ CompatAndroid("4.4") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Zie ook

+ + diff --git a/files/nl/web/api/index.html b/files/nl/web/api/index.html new file mode 100644 index 0000000000..2bd3df4f5a --- /dev/null +++ b/files/nl/web/api/index.html @@ -0,0 +1,14 @@ +--- +title: Web API Interfaces +slug: Web/API +tags: + - API + - JavaScript + - Referentie + - Web +translation_of: Web/API +--- +

Bij het schrijven van code voor het web met behulp van JavaScript, is er een groot aantal API's beschikbaar. Hieronder is een lijst van alle interfaces (dat wil zeggen soorten objecten) die u kunt gebruiken tijdens het ontwikkelen van uw webapp of website.
+  

+ +
{{APIListAlpha}}
diff --git a/files/nl/web/api/indexeddb_api/index.html b/files/nl/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..06840865f2 --- /dev/null +++ b/files/nl/web/api/indexeddb_api/index.html @@ -0,0 +1,143 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +translation_of: Web/API/IndexedDB_API +--- +
+ IndexedDB is een API voor het opslaan van significante hoeveelheden van gestructureerde
+
+ data op de cliënt en voor hoogperformante opzoekingen van deze data door het gebruik van indexen.
+
+ Terwijl DOM Storage handig is voor het opslaan van kleinere hoeveelheden van data is het minder bruikbaar voor de 
+
+ opslag van grotere hoeveelheden van gestructureerde data.
+
+ IndexedDB levert hiervoor de oplossing.
+
+  
+
+
+ Deze pagina is het startpunt voor de technische omschrijving van de API objecten.
+
+ Als je een basis nodig hebt kan je Basic Concepts About IndexedDB consulteren. Voor meer details kan je Using IndexedDB raadplegen.
+
+  
+
+ IndexedDB voorziet aparte APIs voor synchrone en asynchrone toegang.
+
+ De synchrone API is bedoeld voor het gebruik in Web Workers, maar is nog door geen enkele browser geimplementeerd.
+
+ De asynchrone API werkt zowel met als zonder Web Workers, maar Firefox heeft dit nog niet geïmplementeerd.
+
+


+ Asynchrone API

+

De asynchrone API methoden geven feedback zonder de oproepende thread te blokkeren.
+ Om asynchrone toegang tot een database te verkrijgen roep je open() op het indexedDB attribuut van een window object. Deze methode stuurt een IDBRequest object (IDBOpenDBRequest); asynchrone operaties communiceren met de oproepende applicatie door events uit te voeren op  IDBRequest objecten.

+
+

Notitie: Het indexedDB object heeft een prefix in oudere browserversies (eigendom mozIndexedDB in Gecko < 16, webkitIndexedDB in Chrome, en msIndexedDB in IE 10).

+
+ +

Een vroege versie van de specificatie definieert ook deze nu verwijderde interfaces. Ze zijn nog steeds gedocumenteerd in geval u oudere code moet aanpassen:

+ +

Er is ook een synchronone versie van de API.  De synchrone API is nog in geen enkele browser geïmplementeerd. Het is bedoeld om te werken met WebWorkers.

+

Opslaglimieten

+

Er is geen limiet op een enkel database item qua omvang.
+ Echter kan er wel een limiet zijn op elke indexedDB database omvang.
+ Deze limiet (en hoe de gebruikerinterface deze zal verklaren) kan variëren per browser.

+ +

Voorbeeld

+

Een krachtig voorbeeld waarvoor indexedDB gebruikt kan worden op het web is een voorbeeld door Marco Castelluccio, winnaar van de IndexedDB Mozilla DevDerby. De winnende demo was eLibri, een bibliotheek en eBook lezer applicatie.

+

Browsercompatibiliteit

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Asynchronous API +

24.0
+ 11.0 {{ property_prefix("webkit") }}

+ 		{{ CompatGeckoDesktop("16.0") }}
+ {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}		1015.0{{ CompatNo() }}
Synchronous API
+ (used with WebWorkers)		{{ CompatNo() }}{{ CompatNo() }}
+ See {{ bug(701634) }}		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Asynchronous API{{ CompatNo() }}{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+

Er is ook de mogelijkheid om IndexedDB te gebruiken op oudere browsers die WebSQL ondersteunen door gebruik te maken van IndexedDB Polyfill.

+

Zie ook

+ diff --git a/files/nl/web/api/midiaccess/index.html b/files/nl/web/api/midiaccess/index.html new file mode 100644 index 0000000000..2bc42f75fa --- /dev/null +++ b/files/nl/web/api/midiaccess/index.html @@ -0,0 +1,63 @@ +--- +title: MIDIAccess +slug: Web/API/MIDIAccess +translation_of: Web/API/MIDIAccess +--- +

{{SeeCompatTable}}{{APIRef("Web MIDI API")}} 

+ +

The MIDIAccess interface van de  Web MIDI API geeft u methodes om aangesloten MIDI in- en uitgangen weer te geven en te ondervragen.

+ +

Properties

+ +
+
{{domxref("MIDIAccess.inputs")}} {{readonlyinline}}
+
Geeft een instance van {{domxref("MIDIInputMap")}} voor toegang voor een aangesloten MIDI ingang.
+
{{domxref("MIDIAccess.outputs")}} {{readonlyinline}}
+
Geeft een instance van {{domxref("MIDIOutputMap")}} voor toegang voor een aangesloten MIDI uitgang.
+
{{domxref("MIDIAccess.sysexEnabled")}} {{readonlyinline}}
+
Een boolean attribuut waaruit men kan aflezen of er een MIDI toegang is met System Exclusive mogelijkheden.
+
+ +

Event Handlers

+ +
+
{{domxref("MIDIAccess.onstatechange")}}
+
Wordt aangeroepen als er een verandering is in de lijst van aangesloten MIDI apparaten (of er een nieuw MIDI apparaat is toegevoegd of verwijderd).
+
+ +

Voorbeelden

+ +
navigator.requestMIDIAccess()
+  .then(function(access) {
+
+     // Geef een lijst van aangesloten MIDI controllers
+     const inputs = access.inputs.values();
+     const outputs = access.outputs.values();
+
+     access.onstatechange = function(e) {
+
+       // Print information about the (dis)connected MIDI controller
+       console.log(e.port.name, e.port.manufacturer, e.port.state);
+     };
+  });
+ +

Specificaties

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebMIDI API','#midiaccess-interface')}}{{Spec2('WebMIDI API')}}Initial definition.
+ +

Browser compatibiliteit

+ +

{{Compat("api.MIDIAccess")}}

diff --git a/files/nl/web/api/mutationobserver/index.html b/files/nl/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..3b2fcf7a72 --- /dev/null +++ b/files/nl/web/api/mutationobserver/index.html @@ -0,0 +1,248 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - API + - DOM + - DOM Referentie + - Geavanceerd + - NeedsContent + - NeedsUpdate + - Referentie +translation_of: Web/API/MutationObserver +--- +

{{APIRef("DOM")}}

+ +

MutationObserver biedt ontwikkelaars een manier om te reageren op veranderingen in een DOM. Het is ontworpen als een vervanging voor Mutation Events, gedefinieerd in de  DOM3 Events specificatie.

+ +

Constructor

+ +

MutationObserver()

+ +

Constructor om nieuwe DOM mutation observer instances mee aan te maken.

+ +
new MutationObserver(
+  function callback
+);
+
+ +
Parameters
+ +
+
callback
+
De functie die aangeroepen wordt bij elke DOM mutatie. De observer roept deze functie aan met twee argumenten: een array van objecten - waarvan elk object van het type {{domxref("MutationRecord")}} is - en de MutationObserver instantie zelf.
+
+ +

Instantiemethodes

+ + + + + + + + + + + + + +
void observe( {{domxref("Node")}} target, MutationObserverInit options );
void disconnect();
Array takeRecords();
+ +
+

Nota bene: {{domxref("Node")}} target moet niet verward worden met NodeJS.

+
+ +

observe()

+ +

Registreert de MutationObserver instance om notifcaties te ontvangen wanneer er DOM mutaties op de gespecificeerde node worden uitgevoerd.

+ +
void observe(
+  {{domxref("Node")}} target,
+  MutationObserverInit options
+);
+
+ +
Parameters
+ +
+
target
+
De {{domxref("Node")}} die wordt geobserveerd voor DOM mutaties.
+
options
+
Een MutationObserverInit object specificeert welke DOM mutaties gerapporteerd zouden moeten worden.
+
+ +
Nota bene: een observer toevoegen aan een element is net zoals addEventListener: als je het element meerdere keren observeert maakt het geen verschil. Dit betekent dat als je het element twee keer observeert, de observe callback functie niet twee keer wordt aangeroepen en je ook niet twee keer disconnect() hoeft aan te roepen. In andere woorden: zodra een element wordt geobserveerd, doet het opnieuw observeren met dezelfde observer instantie niets. Als het callback object echter anders is, voegt het uiteraard wel een tweede observer toe.
+ +

disconnect()

+ +

Zorgt ervoor dat de  MutationObserver instantie geen notificaties van DOM mutaties ontvangt. Totdat observe() weer is aangeroepen, wordt de callback van de observer niet aangeroepen.

+ +
void disconnect();
+
+ +

takeRecords()

+ +

Leegt de record queue van de MutationObserver instantie en returnt wat daarin zat vóór het legen.

+ +
Array takeRecords();
+
+ +
Return value
+ +

Returnt een Array van {{domxref("MutationRecord")}}s.

+ +

MutationObserverInit

+ +

MutationObserverInit is een object waarin de volgende properties gespecificeerd kunnen worden:

+ +
Nota bene: als absoluut minimum moet of childList, of attributes, of characterData true zijn. Anders wordt er een error teruggegeven met de melding: "An invalid or illegal string was specified".
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
childListtrue als toevoegingen en verwijdering van kinderen van de target node (inclusief text nodes) geobserveerd moeten worden.
attributestrue als mutaties van de attributen van de target node geobserveerd moeten worden.
characterDatatrue als mutaties van de data van de target node geobserveerd moeten worden.
subtreetrue als mutaties van niet alleen de target node, maar ook de kinderen van de target node geobserveerd moeten worden.
attributeOldValuetrue als attributes op true is gezet en de attribuutwaarde van de target node voordat de mutatie plaatsvond opgeslagen moet worden.
characterDataOldValuetrue als characterData op true is gezet en de data van de target node voordat de mutatie plaatsvond opgeslagen moet worden.
attributeFilterIs een array van lokale attribuutnamen (zonder namespace) als niet alle attribuutmutaties geobserveerd hoeven te worden.
+ +

Voorbeeldgebruik

+ +

Het volgende voorbeeld is overgenomen van deze blogpost.

+ +
// selecteer de target node
+var target = document.querySelector('#some-id');
+
+// creëer een observer instantie
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// configuratie van de observer instantie
+var config = { attributes: true, childList: true, characterData: true };
+
+// roep observe() aan op de observer instantie, en stuur de target node en de observer configuratie mee
+observer.observe(target, config);
+
+// wanneer je wilt, kun je weer stoppen met observeren
+observer.disconnect();
+
+ +

Aanvullend leesmateriaal

+ + + +

Specificaties

+ + + + + + + + + + + + + + + + + + + + + +
SpecificatieStatusCommentaar
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM4') }}
+ +

Browser compatibiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basisondersteuning18 {{property_prefix("-webkit")}}
+ 26		{{CompatGeckoDesktop(14)}}11156.0 {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basisondersteuning{{CompatUnknown}}18 {{property_prefix("-webkit")}}
+ 26		{{CompatGeckoMobile(14)}}11 (8.1)156 {{property_prefix("-webkit")}}
+ 7
+
diff --git a/files/nl/web/api/webgl_api/index.html b/files/nl/web/api/webgl_api/index.html new file mode 100644 index 0000000000..ee3c5d779f --- /dev/null +++ b/files/nl/web/api/webgl_api/index.html @@ -0,0 +1,268 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - WebGL +translation_of: Web/API/WebGL_API +--- +
+

{{WebGLSidebar}}

+ +

WebGL (Web Graphics Library) is een JavaScript API voor het renderen van interactieve 3D en 2D graphics binnen elke compatibele webbrowser zonder het gebruik van plug-ins. WebGL daartoe worden een API die nauw overeenkomt met OpenGL ES 2.0 die kunnen worden gebruikt in HTML5 {{HTMLElement ("canvas")}} elementen.

+ +

Ondersteuning voor WebGL is aanwezig in Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ en Internet Explorer 11+; echter, moet het apparaat van de gebruiker ook hardware hebben die deze functies ondersteunt.

+
+ +

Het {{HTMLElement("canvas")}} element wordt ook gebruikt door Canvas 2D om 2D graphics te tonen op webpagina's.

+ +

Referenties

+ +
+ +
+ +

Handleidingen en Tutorials

+ + + +

Advanced tutorials

+ + + +

Resources

+ + + +

Libraries

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Initial definition.
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("2.0")}}91112[1]5.1[1]
OES_texture_float{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_standard_derivatives{{CompatGeckoDesktop("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_texture_filter_anisotropic{{CompatGeckoDesktop("13.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_s3tc{{CompatGeckoDesktop("15.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
drawingBufferWidth and drawingBufferHeight attributes{{CompatGeckoDesktop("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Chrome for AndroidIE MobileOpera MobileSafari Mobile
Basic support425[1]{{CompatNo}}12[1]8.1
drawingBufferWidth and drawingBufferHeight attributes{{CompatGeckoMobile("9.0")}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_texture_float{{CompatGeckoMobile("6.0")}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_standard_derivatives{{CompatGeckoMobile("10.0")}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_texture_filter_anisotropic{{CompatGeckoMobile("13.0")}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_element_index_uint{{CompatUnknown}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_vertex_array_object{{CompatUnknown}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_s3tc{{CompatGeckoMobile("15.0")}}25{{property_prefix("WEBKIT_")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBKIT_EXT_texture_filter_nisotropic{{CompatNo}}25{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] The implementation of this feature is experimental.

+ +

Compatibility notes

+ +

In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the webgl context name, but older ones need experimental-webgl as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name experimental-webgl2 in the future for testing.

+ +

Gecko notes

+ +

WebGL debugging and testing

+ +

Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:

+ +
+
webgl.min_capability_mode
+
A Boolean property that, when true, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is false by default.
+
webgl.disable_extensions
+
A Boolean property that, when true, disables all WebGL extensions. This is false by default.
+
+ +

See also

+ + diff --git a/files/nl/web/api/webgl_api/tutorial/index.html b/files/nl/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..e11eac7320 --- /dev/null +++ b/files/nl/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,42 @@ +--- +title: WebGL tutorial +slug: Web/API/WebGL_API/Tutorial +tags: + - NeedsTranslation + - TopicStub + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +
{{WebGLSidebar}}
+ +
+

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

+
+ +

This tutorial describes how to use the <canvas> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.

+ +

Before you start

+ +

Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The <canvas> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

+ +

In this tutorial

+ +
+
Getting started with WebGL
+
How to set up a WebGL context.
+
Adding 2D content to a WebGL context
+
How to render simple flat shapes using WebGL.
+
Using shaders to apply color in WebGL
+
Demonstrates how to add color to shapes using shaders.
+
Animating objects with WebGL
+
Shows how to rotate and translate objects to create simple animations.
+
Creating 3D objects using WebGL
+
Shows how to create and animate a 3D object (in this case, a cube).
+
Using textures in WebGL
+
Demonstrates how to map textures onto the faces of an object.
+
Lighting in WebGL
+
How to simulate lighting effects in your WebGL context.
+
Animating textures in WebGL
+
Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.
+
diff --git a/files/nl/web/api/window.crypto.getrandomvalues/index.html b/files/nl/web/api/window.crypto.getrandomvalues/index.html new file mode 100644 index 0000000000..c91a691be9 --- /dev/null +++ b/files/nl/web/api/window.crypto.getrandomvalues/index.html @@ -0,0 +1,97 @@ +--- +title: window.crypto.getRandomValues +slug: Web/API/window.crypto.getRandomValues +translation_of: Web/API/Crypto/getRandomValues +--- +

{{ ApiRef() }}

+

{{ SeeCompatTable() }}

+

Met deze functie kunt u cryptografisch willekeurige getallen verkrijgen.

+

Syntax

+
window.crypto.getRandomValues(typedArray);
+

Parameters

+ + + + + + + + + + + + + +
ParameterDescription
typedArrayInteger-gebaseerde TypedArray. Alle elementen in de array zullen worden overschreven door willekeurige getallen.
+

Beschrijving

+

Als u een integer-gebaseerde TypedArray (d.w.z. een Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, of Uint32Array) meegeeft, zal de functie de array vullen met cryptografisch willekeurige getallen. Het is de bedoeling dat de browser een sterke (pseudo)willekeurige getalsgenerator gebruikt. Omdat de browser waarschijnlijk slechts een beperkte hoeveelheid entropie heeft, mag de methode een QuotaExceededError geven, als teveel entropie wordt gebruikt.

+

Voorbeeld

+
/* ervanuit gaande dat that window.crypto.getRandomValues beschikbaar is */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Uw geluksnummers:");
+for (var i = 0; i < array.length; i++) {
+    console.log(array[i]);
+}
+
+

Browsercompatibiliteit

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
KenmerkChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basisondersteuning11.0 {{ webkitbug("22049") }}21.0{{ CompatNo() }}{{ CompatNo() }}3.1
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid BrowserChrome (as App)Firefox Mobile (Gecko)IE MobileOpera MobileSafari
Basic support{{ CompatNo() }}2321.0{{ CompatNo() }}{{ CompatNo() }}iOS 6
+
+

Specificatie

+ +

See also

+ diff --git a/files/nl/web/api/window/alert/index.html b/files/nl/web/api/window/alert/index.html new file mode 100644 index 0000000000..e14d121352 --- /dev/null +++ b/files/nl/web/api/window/alert/index.html @@ -0,0 +1,66 @@ +--- +title: Window.alert() +slug: Web/API/Window/alert +translation_of: Web/API/Window/alert +--- +

{{ APIRef }}

+ +

De methode Window.alert() geeft een waarschuwingsvenster weer met optionele gespecificeerde inhoud en een OK-knop.

+ +

Gebruik

+ +

+ 

window.alert(bericht);
+ Om inhoud in het waarschuwingsvenster te weergeven wordt de reeks bericht benoemd, het is niet verplicht om bericht te benoemen.

+ +

+

Voorbeeld

+

+ +
window.alert("Hello world!");
+
+ +

geeft weer:

+ +

Image:AlertHelloWorld.png

+ +

Meer JS:

+ +
alert()
+ +

Notes

+ +

Het waarschuwingsvenster mag niet worden gebruikt voor berichten die een antwoord van de gebruiker vereisen, behalve als dit de erkenning van het bericht betreft.

+ +

The following text is shared between this article, DOM:window.prompt and DOM:window.confirm Dialoogvensters zijn modale vensters - ze zorgen er dus voor dat de rest van het interface niet meer kan worden gebruikt todat het dialoogvenster wordt gesloten. Gebruik daarom niet te veel functies die een dialoogvenster creëren.

+ +

Mozilla Chrome gebruikers (bijv. Firefox extenties) zouden beter de methodes van {{interface("nsIPromptService")}} kunnen gebruiken.

+ +

Vanaf Chrome {{CompatChrome(46.0)}} is deze methode geblokeerd in een  {{htmlelement("iframe")}} behalve als zijn sandboxattribuut de allow-modal waarde heeft.

+ +

{{gecko_minversion_inline("23.0")}} Het argument is nu optioneel zoals is vereist door de specificatie.

+ +

Specificatie

+ + + + + + + + + + + + + + +
SpecificatiesStatusReactie
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-alert', 'alert()')}}{{Spec2('HTML WHATWG')}} 
+ +

Zie ook

+ + diff --git a/files/nl/web/api/window/console/index.html b/files/nl/web/api/window/console/index.html new file mode 100644 index 0000000000..1f5d3007c0 --- /dev/null +++ b/files/nl/web/api/window/console/index.html @@ -0,0 +1,57 @@ +--- +title: Window.console +slug: Web/API/Window/console +tags: + - API + - Naslagwerk + - Referentie + - Window + - alleen-lezen + - console + - eigenschap +translation_of: Web/API/Window/console +--- +

{{ APIRef }}

+ +

De Window.console alleen-lezen-eigenschap geeft een referentie terug aan het {{domxref("Console")}}-object, die methodes voorziet om informatie te loggen naar de console van de browser. Deze methodes zijn enkel voorzien voor debuggingdoeleinden en zouden niet mogen worden gebruikt om informatie aan eindgebruikers te presenteren.

+ +

Syntaxis

+ +
var consoleObj = window.console;
+
+ +

Voorbeelden

+ +

Naar de console loggen

+ +

Dit eerste voorbeeld logt tekst naar de console.

+ +
console.log("Er is een fout ontstaan tijdens het laden van de inhoud");
+
+ +

Dit volgend voorbeeld logt een object naar de console. De velden van het object zijn uitbreidbaar met behulp van disclosure-widgets.

+ +
console.dir(someObject);
+ +

Zie {{SectionOnPage("/nl/docs/Web/API/Console", "Usage")}} voor uitgebreide voorbeelden.

+ +

Specificaties

+ + + + + + + + + + + + + + +
SpecificatieStatusCommentaar
{{SpecName('Console API')}}{{Spec2('Console API')}}Aanvankelijke definitie.
+ +
+

Momenteel zijn er vele implentatieverschillen tussen browsers. Er wordt gewerkt aan het bijeenbrengen en consistent maken hiervan.

+
diff --git a/files/nl/web/api/window/index.html b/files/nl/web/api/window/index.html new file mode 100644 index 0000000000..985921b10f --- /dev/null +++ b/files/nl/web/api/window/index.html @@ -0,0 +1,440 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - DOM + - Interface + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - Window +translation_of: Web/API/Window +--- +

{{APIRef}}

+ +

The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.

+ +

This section provides a brief reference for all of the methods, properties, and events available through the DOM window object. The window object implements the Window interface, which in turn inherits from the AbstractView interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the JavaScript Reference and DOM Reference.

+ +

In a tabbed browser, such as Firefox, each tab contains its own window object (and if you're writing an extension, the browser window itself is a separate window too - see Working with windows in chrome code for more information). That is, the window object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the window object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.

+ +

Properties

+ +

This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

+ +

Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.

+ +
+
{{domxref("Window.applicationCache")}}  {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}
+
An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.
+
{{domxref("Window.caches")}} {{readOnlyInline}}
+
Returns the {{domxref("CacheStorage")}} object associated with the current origin. This object enables service worker functionality such as storing assets for offline use, and generating custom responses to requests.
+
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
+
This property indicates whether the current window is closed or not.
+
Window.Components {{Non-standard_inline}}
+
The entry point to many XPCOM features. Some properties, e.g. classes, are only available to sufficiently privileged code. Web code should not use this property.
+
{{domxref("Window.console")}} {{ReadOnlyInline}}
+
Returns a reference to the console object which provides access to the browser's debugging console.
+
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
+
Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.
+
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the XUL controller objects for the current chrome window.
+
{{domxref("Window.crypto")}} {{readOnlyInline}}
+
Returns the browser crypto object.
+
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
+
Gets/sets the status bar text for the given window.
+
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the ratio between physical pixels and device independent pixels in the current display.
+
{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}
+
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
+
{{domxref("Window.directories")}} {{obsolete_inline}}
+
Synonym of {{domxref("window.personalbar")}}
+
{{domxref("Window.document")}} {{ReadOnlyInline}}
+
Returns a reference to the document that the window contains.
+
{{domxref("Window.frameElement")}} {{readOnlyInline}}
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
{{domxref("Window.frames")}} {{readOnlyInline}}
+
Returns an array of the subframes in the current window.
+
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
+
This property indicates whether the window is displayed in full screen or not.
+
{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
+
Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.
+ Was: Multiple storage objects that are used for storing data across multiple pages.
+
{{domxref("Window.history")}} {{ReadOnlyInline}}
+
Returns a reference to the history object.
+
{{domxref("Window.innerHeight")}}
+
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
+
{{domxref("Window.innerWidth")}}
+
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
+
{{domxref("Window.isSecureContext")}} {{readOnlyInline}}
+
Indicates whether a context is capable of using features that require secure contexts.
+
{{domxref("Window.length")}} {{readOnlyInline}}
+
Returns the number of frames in the window. See also {{domxref("window.frames")}}.
+
{{domxref("Window.location")}} {{ReadOnlyInline}}
+
Gets/sets the location, or current URL, of the window object.
+
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+
Returns the locationbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
+
Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
+
Returns the menubar object, whose visibility can be toggled in the window.
+
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
+
Returns the message manager object for this window.
+
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}
+
The time in milliseconds since epoch at which the current animation cycle began.
+
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
+
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
+
{{domxref("Window.name")}}
+
Gets/sets the name of the window.
+
{{domxref("Window.navigator")}} {{readOnlyInline}}
+
Returns a reference to the navigator object.
+
{{domxref("Window.opener")}}
+
Returns a reference to the window that opened this current window.
+
{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}
+
Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.
+
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
+
Gets the height of the outside of the browser window.
+
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
+
Gets the width of the outside of the browser window.
+
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+
An alias for {{domxref("window.scrollX")}}.
+
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
+
An alias for {{domxref("window.scrollY")}}
+
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
+
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.parent")}} {{readOnlyInline}}
+
Returns a reference to the parent of the current window or subframe.
+
{{domxref("Window.performance")}} {{readOnlyInline}}
+
Provides a hosting area for performance related attributes.
+
{{domxref("Window.personalbar")}} {{readOnlyInline}}
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
+
Formerly provided access to install and remove PKCS11 modules.
+
{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}
+
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
+
{{domxref("Window.screen")}} {{readOnlyInline}}
+
Returns a reference to the screen object associated with the window.
+ +
{{domxref("Window.screenX")}} {{readOnlyInline}}
+
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
+
{{domxref("Window.screenY")}} {{readOnlyInline}}
+
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
+
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
+
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
+
{{domxref("Window.scrollX")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
{{domxref("Window.scrollY")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled vertically.
+
{{domxref("Window.self")}} {{ReadOnlyInline}}
+
Returns an object reference to the window object itself.
+
{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}
+
Returns a storage object for storing data within a single page session.
+
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns a reference to the window object of the sidebar.
+
{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
+
Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using Web Speech API speech synthesis functionality.
+
{{domxref("Window.status")}}
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
{{domxref("Window.statusbar")}} {{readOnlyInline}}
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.toolbar")}} {{readOnlyInline}}
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.top")}} {{readOnlyInline}}
+
Returns a reference to the topmost window in the window hierarchy. This property is read only.
+
{{domxref("Window.window")}} {{ReadOnlyInline}}
+
Returns a reference to the current window.
+
window[0], window[1], etc.
+
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
+
+ +

Methods

+ +

This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, {{domxref("WindowEventHandlers")}}, and {{domxref("GlobalFetch")}}.

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Register an event handler to a specific event type on the window.
+
{{domxref("Window.alert()")}}
+
Displays an alert dialog.
+ +
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves back one in the window history.
+
{{domxref("Window.blur()")}}
+
Sets focus away from the window.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
+
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.
+
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
+
Registers the window to capture all events of the specified type.
+
{{domxref("Window.clearImmediate()")}}
+
Cancels the repeated execution set using setImmediate.
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("Window.close()")}}
+
Closes the current window.
+
{{domxref("Window.confirm()")}}
+
Displays a dialog with a message that the user needs to respond to.
+
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.dispatchEvent()")}}
+
Used to trigger an event.
+
{{domxref("Window.dump()")}}
+
Writes a message to the console.
+
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("GlobalFetch.fetch()")}}
+
Starts the process of fetching a resource.
+
{{domxref("Window.find()")}}
+
Searches for a given string in a window.
+
{{domxref("Window.focus()")}}
+
Sets focus on the current window.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves the window one document forward in the history.
+
{{domxref("Window.getAttention()")}}
+
Flashes the application icon.
+
{{domxref("Window.getAttentionWithCycleCount()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.getComputedStyle()")}}
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
+
Gets default computed style for the specified element, ignoring author stylesheets.
+
{{domxref("Window.getSelection()")}}
+
Returns the selection object representing the selected item(s).
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Returns the browser to the home page.
+
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
+
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Minimizes the window.
+
{{domxref("Window.moveBy()")}}
+
Moves the current window by a specified amount.
+
{{domxref("Window.moveTo()")}}
+
Moves the window to the specified coordinates.
+
{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
+
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a MozBeforePaint event to fire before that repaint occurs.
+
{{domxref("Window.open()")}}
+
Opens a new window.
+
{{domxref("Window.openDialog()")}}
+
Opens a new dialog window.
+
{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}
+
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
+
{{domxref("Window.print()")}}
+
Opens the Print Dialog to print the current document.
+
{{domxref("Window.prompt()")}}
+
Returns the text entered by the user in a prompt dialog.
+
{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}
+
Releases the window from trapping events of a specific type.
+
{{domxref("element.removeEventListener","Window.removeEventListener()")}}
+
Removes an event listener from the window.
+
{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
+
Enables the scheduling of tasks during a browser's idle periods.
+
{{domxref("Window.resizeBy()")}}
+
Resizes the current window by a certain amount.
+
{{domxref("Window.resizeTo()")}}
+
Dynamically resizes window.
+
{{domxref("Window.restore()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.scroll()")}}
+
Scrolls the window to a particular place in the document.
+
{{domxref("Window.scrollBy()")}}
+
Scrolls the document in the window by the given amount.
+
{{domxref("Window.scrollByLines()")}}
+
Scrolls the document by the given number of lines.
+
{{domxref("Window.scrollByPages()")}}
+
Scrolls the current document by the specified number of pages.
+
{{domxref("Window.scrollTo()")}}
+
Scrolls to a particular set of coordinates in the document.
+
{{domxref("Window.setCursor()")}}
+
Changes the cursor for the current window
+
{{domxref("Window.setImmediate()")}}
+
Executes a function after the browser has finished other heavy tasks
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("Window.setResizable()")}}
+
Toggles a user's ability to resize a window.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}
+
Displays a modal dialog.
+
{{domxref("Window.sizeToContent()")}}
+
Sizes the window according to its content.
+
{{domxref("Window.stop()")}}
+
This method stops window loading.
+
{{domxref("Window.updateCommands()")}}
+
Updates the state of commands of the current chrome window (UI).
+
+ +

Event handlers

+ +

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

+ +

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

+ +
+

Note: Starting in {{Gecko("9.0")}}, you can now use the syntax if ("onabort" in window) to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers for details.

+
+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Called when the print dialog box is closed. See {{event("afterprint")}} event.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Called when the print dialog box is opened. See {{event("beforeprint")}} event.
+
{{domxref("Window.onbeforeinstallprompt")}}
+
An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
An event handler property for before-unload events on the window.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Called after the window loses focus, such as due to a popup.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
An event handler property for change events on the window.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Called after the ANY mouse button is pressed & released
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Called when a double click is made with ANY mouse button.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Called after the window is closed
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Called when the RIGHT mouse button is pressed
+
{{domxref("Window.ondevicelight")}}
+
An event handler property for any ambient light levels changes
+
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
+
Called if accelerometer detects a change (For mobile devices)
+
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+
Called when the orientation is changed (For mobile devices)
+
{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only
+
An event handler property for any device orientation changes.
+
{{domxref("Window.ondeviceproximity")}}
+
An event handler property for device proximity event
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Called after the window receives or regains focus. See {{event("focus")}} events.
+
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+
An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.
+
{{domxref("Window.oninstall")}}
+
Called when the page is installed as a webapp. See {{event('install')}} event.
+
{{domxref("Window.oninput")}}
+
Called when the value of an <input> element changes
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Called when you begin pressing ANY key. See {{event("keydown")}} event.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Called when you finish releasing ANY key. See {{event("keyup")}} event.
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
An event handler property for {{event("languagechange")}} events on the window.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Called when ANY mouse button is pressed.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Called continously when the mouse is moved inside the window.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Called when the pointer leaves the window.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Called when the pointer enters the window
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Called when ANY mouse button is released
+
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Called when network connection is lost. See {{event("offline")}} event.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Called when network connection is established. See {{event("online")}} event.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.
+
{{domxref("Window.onpaint")}}
+
An event handler property for paint events on the window.
+
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
+
Called when a back putton is pressed.
+
{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
+
An event handler for handled {{jsxref("Promise")}} rejection events.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Called when a form is reset
+
{{domxref("GlobalEventHandlers.onresize")}}
+
Called continuously as you are resizing the window.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked
+
{{domxref("GlobalEventHandlers.onwheel")}}
+
Called when the mouse wheel is rotated around any axis
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Called after text in an input field is selected
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Called when there is a change in session storage or local storage. See {{event("storage")}} event
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Called when a form is submitted
+
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
+
An event handler for unhandled {{jsxref("Promise")}} rejection events.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Called when the user navigates away from the page.
+
{{domxref("Window.onuserproximity")}}
+
An event handler property for user proximity events.
+
{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}
+
Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).
+
{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}
+
Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).
+
{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}
+
represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("onvrdisplaypresentchange")}} event fires).
+
+ +

Constructors

+ +

See also the DOM Interfaces.

+ +
+
{{domxref("Window.DOMParser")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.GeckoActiveXObject")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Image")}}
+
Used for creating an {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Used for creating an {{domxref("HTMLOptionElement")}}
+
{{domxref("Window.QueryInterface")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XMLSerializer")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Worker")}}
+
Used for creating a Web worker
+
{{domxref("Window.XPCNativeWrapper")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XPCSafeJSObjectWrapper")}}
+
{{todo("NeedsContents")}}
+
+ +

Interfaces

+ +

See DOM Reference

+ +

See also

+ + diff --git a/files/nl/web/api/window/prompt/index.html b/files/nl/web/api/window/prompt/index.html new file mode 100644 index 0000000000..ee0a1d0613 --- /dev/null +++ b/files/nl/web/api/window/prompt/index.html @@ -0,0 +1,83 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +tags: + - API + - DOM + - Méthode + - Naslagwerk + - Referentie + - Window + - prompt +translation_of: Web/API/Window/prompt +--- +
{{ApiRef("Window")}}
+ +

De Window.prompt() geeft een dialoog weer met een optioneel bericht die de gebruiker vraagt om tekst in te voeren.

+ +

Syntaxis

+ +
resultaat = window.prompt(bericht, standaardwaarde);
+
+ + + +

Voorbeeld

+ +
var sign = prompt("Wat is jouw sterrenbeeld?");
+
+if (sign.toLowerCase() == "Schorpioen") {
+  alert("Wow! Ik ben ook een schorpioen!");
+}
+
+// er zijn vele manieren om prompt te gebruiken
+var sign = window.prompt(); // opent een blanco promptvenster
+var sign = prompt();       //  opent een blanco promptvenster
+var sign = window.prompt('Heeft u geluk?'); // Opent een venster met de tekst "Heeft u geluk?"
+var sign = window.prompt('Heeft u geluk?', 'Zeker'); // Opent een venster met de tekst "Heeft u geluk?" en de standaardwaarde "Zeker"
+ +

Wanneer de gebruiker op OK klikt wordt de ingegeven tekst teruggegeven. Indien de gebruiker op OK klikt zonder enige tekst in te voeren wordt een lege string teruggegeven. Als de gebruiker op Cancel klikt, geeft deze functie null terug.

+ +

Bovenstaande prompt verschijnt als volgt (in Chrome op OS X):

+ +

prompt() dialog in Chrome on OS X

+ +

Opmerkingen

+ +

Een prompt-dialoog bevat een single-line-tekstbox, een Cancel-knop en een OK-knop. De dialoog geeft de (mogelijk lege) tekst terug die de gebruiker heeft ingevoerd.

+ +

The following text is shared between this article, DOM:window.confirm and DOM:window.alert Dialoogvensters zijn modale vensters; ze verhinderen de gebruiker ertoe om toegang te krijgen tot de rest van de interface totdat het dialoogvenster wordt gesloten. Om deze reden moet er niet worden overdreven in het gebruik van functies die dialoogvensters (of andere modale vensters) genereren.

+ +

Merk hierbij op dat het resultaat een string is. Dit betekent dat u de waarde, die werd ingegeven door de gebruiker, soms moet omvormen. Bijvoorbeeld, als het antwoord een Number zou moeten zijn, moet u de waarde omvormen naar een Number. var aNumber = Number(window.prompt("Type a number", "")); 

+ +

Beginnende bij Chrome {{CompatChrome(46.0)}} werd deze methode geblokkeerd binnen een  {{htmlelement("iframe")}} tenzij zijn sandboxattribuut de waarde allow-modal heeft.

+ +

Deze functie heeft geen effect in de Modern UI/Metroversie van Internet Explorer voor Windows 8. Het geeft geen prompt weer aan de gebruiker, en geeft altijd de waarde undefined terug. Het is niet duidelijk of het hier om een bug of bedoeld gedrag gaat. Desktopversies van IE implementeren deze functie wel.

+ +

Specificatie

+ + + + + + + + + + + + + + +
SpecificatieStatusCommentaar
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}{{Spec2('HTML WHATWG')}} 
+ +

Zie ook

+ + diff --git a/files/nl/web/api/window/requestanimationframe/index.html b/files/nl/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..061f620c28 --- /dev/null +++ b/files/nl/web/api/window/requestanimationframe/index.html @@ -0,0 +1,188 @@ +--- +title: window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +translation_of: Web/API/window/requestAnimationFrame +--- +

{{APIRef}}
+ De window.requestAnimationFrame() methode vertelt de browser dat je een animatie wilt uitvoeren en vereist dat de browser een gespecificeerde functie aanroept om een animatie bij te werken voor de volgende repaint. De methode neemt een argument als een callback die aangeroepen wordt voor de repaint.

+ +
Notitie: Uw callback routine moet zelfrequestAnimationFrame() aanroepen als u een andere frame wilt animeren bij de volgende repaint.
+ +

Je dient deze methode aan te roepen wanneer je klaar bent om de animatie op het scherm bij te werken. Deze zal de browser vragen om je animatie functie aan te roepen voor de browser de volgende repaint uitvoert. Het aantal callbacks is meestal 60 keer per seconde, maar zal over het algemeen dezelfde display refresh rate zijn als in de meeste websites, volgens W3C aanbevelingen. requestAnimationFrame callbacks worden in de meeste browsers gepauzeerd wanneer deze plaatsvinden vanuit een inactief tabblad of vanuit een verborgen {{ HTMLElement("iframe") }}, om de performance en batterijduur te verbeteren.

+ +

De callback methode krijg een enkel argument, een {{domxref("DOMHighResTimeStamp")}}, die de huidige tijd aangeeft wanneer callbacks die gequeued zijn door requestAnimationFrame beginnen te vuren. Meerdere callbacks in een enkel frame krijgen daarom ieder dezelfde timestamp, ondanks de verstreken tijd tijdens de berekening van elke vorige callback. De timestamp is een decimaal nummer, in miliseconden, maar met een minimale precisie van 1ms (1000 µs).

+ +

Syntax

+ +
window.requestAnimationFrame(callback);
+
+ +

Parameters

+ +
+
callback
+
Een parameter die een functie om aan te roepen specificeert wanneer het tijd is om uw animatie bij te werken voor de volgende repaint. De callback heeft een enkel argument, een {{domxref("DOMHighResTimeStamp")}}, die aangeeft wat de huidige tijd (de tijd die {{domxref('performance.now()')}} teruggeeft) is voor wanneer requestAnimationFrame begint de callback te vuren.
+
+ +

Return waarde

+ +

Een long integer waarde, de request id, die de entry in de callback lijst uniek identificeert. Dit is een non-nul waarde, maar u mag geen andere aannames maken over zijn waarden. U kunt deze waarde aan {{domxref("window.cancelAnimationFrame()")}} geven om het ververs callback verzoek af te breken.

+ +

Voorbeeld:

+ +
var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+element.style.position = 'absolute';
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress < 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+
+ +

Specificatie

+ + + + + + + + + + + + + + + + + + + + + +
SpecificatieStatusCommentaar
{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}{{Spec2('HTML WHATWG')}}Geen verandering, vervangt de vorige.
{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}{{Spec2('RequestAnimationFrame')}}Initiele definitie
+ +

Browser compatibiliteit

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic ondersteuning{{CompatChrome(10)}} {{property_prefix("webkit")}}
+ {{CompatChrome(24)}} [3]		4.0 {{property_prefix("moz")}} [1][4]
+ 23 [2]		10.0{{compatversionunknown}} {{property_prefix("-o")}}
+ 15.0		6.0 {{property_prefix("webkit")}}
+ 6.1
return waarde{{CompatChrome(23)}}{{CompatGeckoDesktop("11.0")}}10.015.06.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
+ + + + + + + +
Basic ondersteuning 
+ 		+

4.3 {{property_prefix("webkit")}}
+ 4.4

+ 		4.3 {{property_prefix("webkit")}}
+ 4.4		 +

{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}
+ 23

+ 		10.015.0 +

6.1 {{property_prefix("webkit")}}
+ 7.1

+ 		{{CompatChrome(18)}} {{property_prefix("webkit")}}{{CompatChrome(25)}} [3]
requestID return waarde4.44.4{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}10.015.06.1 {{property_prefix("webkit")}}
+ 7.1		{{CompatChrome(25)}}
+
+ +

[1] Voor Gecko 11.0 kon {{geckoRelease("11.0")}}, mozRequestAnimationFrame() aangeroepen worden zonder input parameters. Dit wordt niet langer ondersteund, omdat het waarschijnlijk geen onderdeel van de standaard wordt.

+ +

[2] De callback parameter is een {{domxref("DOMTimeStamp")}} in plaats van een {{domxref("DOMHighResTimeStamp")}} als de geprefixte versie van deze methode werd gebruikt. DOMTimeStamp heeft alleen millisecond precisie, maar DOMHighResTimeStamp heeft een minimale precies van tien microseconden. Verder is de nultijd anders: DOMHighResTimeStamp heeft dezelfde nultijd als performance.now(), maar DOMTimeStamp heeft dezelfde nultijd alsDate.now().

+ +

[3] De correctie aanroep in Chrome op de request af te breken is op dit moment window.cancelAnimationFrame(). Oudere versies, window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame(), zijn afgeschaft maar worden voor nu nog steeds ondersteund.

+ +

[4] Ondersteuning voor de geprefixte versie is verwijderd in Firefox 42.

+ +

Zie ook

+ + diff --git a/files/nl/web/api/window/sessionstorage/index.html b/files/nl/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..0a62084a19 --- /dev/null +++ b/files/nl/web/api/window/sessionstorage/index.html @@ -0,0 +1,148 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +tags: + - API + - Referentie + - eigenschap + - opslag + - sessie opslag +translation_of: Web/API/Window/sessionStorage +--- +

{{APIRef()}}

+ +

De sessionStorage eigenschap stelt je in staat toegang te krijgen tot het {{domxref("Storage")}} object. sessionStorage lijkt sterk op {{domxref("Window.localStorage")}}, het enige verschil is dat data opgeslagen in localStorage geen vervaltijd heeft, waarbij sessionStorage vervalt als de sessie van de pagina vervalt. Een pagina sessie duurt zo lang de browser open is en overleeft acties als vernieuwen. Het openen van een pagina in een nieuw tabblad of window zorgt voor een nieuwe sessie, wat dus anders is dan hoe sessie-cookies werken. 

+ +

Syntax

+ +
// Sla data op in sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// Vraag opgeslagen data op uit sessionStorage
+var data = sessionStorage.getItem('key');
+
+// Verwijder opgeslagen data uit sessionStorage
+sessionStorage.removeItem('key')
+
+ +

Waarde

+ +

Een {{domxref("Storage")}} object.

+ +

Voorbeeld

+ +

Het volgende stukje code slaat data op in de sessie van het huidige domein door {{domxref("Storage.setItem()")}} aan te roepen op {{domxref("Storage")}}.

+ +
sessionStorage.setItem('mijnKat', 'Tom');
+ +

Het volgende voorbeeld slaat automatisch de inhoud van een text veld op en als de browser per ongeluk herladen wordt zal de text herstelt worden en is er niks verloren gegaan.

+ +
// Zoek het veld wat je wilt bewaren in de sessie
+var field = document.getElementById("field");
+
+// Kijk eerst of we een 'autosave' waarde hebben
+// (dit gebeurt alleen als je per ongeluk ververst)
+if (sessionStorage.getItem("autosave")) {
+  // Herstel de inhoud van het veld
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Luister naar wijzigingen in het veld
+field.addEventListener("change", function() {
+  // Sla het resultaat op in de sessionStorage
+  sessionStorage.setItem("autosave", field.value);
+});
+ + + +
+

Note: Please refer to the Using the Web Storage API article for a full example.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}{{Spec2('Web Storage')}}
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.

+ +
+

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.

+
+ +

See also

+ + diff --git a/files/nl/web/api/windoweventhandlers/index.html b/files/nl/web/api/windoweventhandlers/index.html new file mode 100644 index 0000000000..284862190f --- /dev/null +++ b/files/nl/web/api/windoweventhandlers/index.html @@ -0,0 +1,191 @@ +--- +title: WindowEventHandlers +slug: Web/API/WindowEventHandlers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/WindowEventHandlers +--- +
{{APIRef("HTML DOM")}}
+ +

WindowEventHandlers mixin describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and  {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement additional specific event handlers.

+ +
+

Note: WindowEventHandlers is a mixin and not an interface; you can't actually create an object of type WindowEventHandlers.

+
+ +

Properties

+ +

The events properties, of the form onXYZ, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.
+
{{domxref("WindowEventHandlers.onhashchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.
+
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
+
An event handler for unhandled {{jsxref("Promise")}} rejection events.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.
+
+ +

Methods

+ +

This interface defines no method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onlanguage since the {{SpecName("HTML5 W3C")}} snapshot.
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onhashchange{{CompatGeckoDesktop(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{experimental_inline}}{{CompatGeckoDesktop(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onstorage{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onhashchange{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{experimental_inline}}{{CompatGeckoMobile(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onstorage{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/nl/web/api/windoweventhandlers/onbeforeunload/index.html b/files/nl/web/api/windoweventhandlers/onbeforeunload/index.html new file mode 100644 index 0000000000..268a544c5f --- /dev/null +++ b/files/nl/web/api/windoweventhandlers/onbeforeunload/index.html @@ -0,0 +1,159 @@ +--- +title: WindowEventHandlers.onbeforeunload +slug: Web/API/WindowEventHandlers/onbeforeunload +translation_of: Web/API/WindowEventHandlers/onbeforeunload +--- +
+
{{APIRef("HTML DOM")}}
+
+ +
 
+ +

De WindowEventHandlers.onbeforeunload event handler property bevat code welke uitgevoerd wordt wanneer {{event("beforeunload")}} is verstuurd. Dit event wordt getriggerd wanneer een venster op het punt staat zijn bronnen te {{event("unload")}}. Het document is nog steeds zichtbaar en het event is nog steeds te annuleren.

+ +
+

Nota: Om ongewilde pop-ups tegen te gaan, geven browsers mogelijk geen prompts weer welke gecreëerd zijn in beforeunload event handlers, tenzij er interactie met de pagina is geweest. Voor een overzicht van specifieke browsers, zie de browser compatibiliteit sectie.

+
+ +

Syntax

+ +
window.onbeforeunload = funcRef
+ + + +

Voorbeeld

+ +
window.onbeforeunload = function(e) {
+  var dialogText = 'Dialog text here';
+  e.returnValue = dialogText;
+  return dialogText;
+};
+
+ +

Nota

+ +

Wanneer deze event een andere waarde dan null of  undefined terug stuurt (of de returnValue property instelt), wordt de gebruiker gevraagd om het sluiten van de pagina te bevestigen. In sommige browsers wordt de terug gestuurde waarde van dit event weergegeven in een dialoogvenster. Beginnende met Firefox 4, Chrome 51, Opera 38 en Safari 9.1, wordt er een algemene string, welke niet the beinvloeden is door de webpagina, weergegeven in plaats van de terug gestuurde string. Als voorbeeld, Firefox geeft altijd de string "This page is asking you to confirm that you want to leave - data you have entered may not be saved." weer. Zie {{bug("588292")}} and Chrome Platform Status.

+ +

Sinds 25 Mei 2011, De HTML5 specificatie stelt dat aanroepen van {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, en {{domxref("window.prompt()")}} methods mogen worden genegeerd tijdens dit event. Zie de HTML5 specification voor meer details.

+ +

Let op dat sommige mobile browsers het resultaat van het event negeren (Ze vragen niet om bevestiging aan de gebruiker). Firefox heeft een verborgen instelling in about:config om ditzelfde te bereiken. In essentie betekend dit dat de gebruiker altijd bevestigd dat het document gesloten mag worden.

+ +

Je kunt en zou moeten om dit event te handelen met {{domxref("EventTarget.addEventListener","window.addEventListener()")}} en het {{event("beforeunload")}} event. Meer informatie is daar te vinden.

+ +

Specificaties

+ +

Het event was van origine geintroduceerd door Microsoft in Internet Explorer 4 en gestandariseerd in de HTML5 specificatie.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificatieStatusOpmerking
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}} 
+ +

Browser compatibiliteit

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KenmerkChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basis support{{CompatChrome(1.0)}}{{CompatVersionUnknown}}14123
Ondersteuning voor aangepaste tekst verwijderd{{CompatChrome(51.0)}}{{CompatNo}}{{CompatGeckoMobile("44.0")}} 389.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KenmerkAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basis support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}(nee) defect{{CompatVersionUnknown}}
Ondersteuning voor aangepaste tekst verwijderd{{CompatUnknown}}{{CompatChrome(51.0)}}{{CompatNo}}{{CompatGeckoMobile("44.0")}}   {{CompatChrome(51.0)}}
+
+ +

Zie ook

+ + diff --git a/files/nl/web/api/xmlhttprequest/index.html b/files/nl/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..4668644ddd --- /dev/null +++ b/files/nl/web/api/xmlhttprequest/index.html @@ -0,0 +1,741 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +

XMLHttpRequest is een JavaScript object dat is ontwikkeld door Microsoft en aangepast is door Mozilla, Apple, en Google. Het wordt nu gestandaardiseerd in het W3C. Het zorgt voor een makkelijke manier om informatie uit een URL op te halen zonder de gehele pagina te herladen. Een webpagina kan een gedeelte van de pagina bijwerken zonder dat de gebruiker er last van heeft.  XMLHttpRequest word veel gebruikt in AJAX programering. Ondanks de naam kan XMLHttpRequest gebruikt worden om elke soort data op te halen, dus niet alleen XML, en ondersteunt protocollen anders dan HTTP (onder andere  file en ftp).

+ +

Om een instantie van XMLHttpRequest aan te maken schrijft men simpelweg:

+ +
var myRequest = new XMLHttpRequest();
+
+ +

Voor meer informatie over het gebruik van XMLHttpRequest, zie Using XMLHttpRequest.

+ +

Methods overzicht

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
XMLHttpRequest(JSObject objParameters);
void abort();
DOMString getAllResponseHeaders();
DOMString? getResponseHeader(DOMString header);
void open(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);
void overrideMimeType(DOMString mime);
void send();
+ void send(ArrayBuffer data);
+ void send(ArrayBufferView data);
+ void send(Blob data);
+ void send(Document data);
+ void send(DOMString? data);
+ void send(FormData data);
void setRequestHeader(DOMString header, DOMString value);
Niet-standaard methods
[noscript] void init(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);
[noscript] void openRequest(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password);
void sendAsBinary(in DOMString body);
+ +

Eigenschappen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttribuutTypeOmschrijving
+

onreadystatechange

+ 		Function? +

A JavaScript function object that is called whenever the readyState attribute changes. The callback is called from the user interface thread.

+ +
Warning: This should not be used with synchronous requests and must not be used from native code.
+
readyStateunsigned short +

The state of the request:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueStateDescription
0UNSENTopen()has not been called yet.
1OPENEDsend()has not been called yet.
2HEADERS_RECEIVEDsend() has been called, and headers and status are available.
3LOADINGDownloading; responseText holds partial data.
4DONEThe operation is complete.
+
responsevaries +

The response entity body according to responseType, as an ArrayBuffer, Blob, {{ domxref("Document") }}, JavaScript object (for "json"), or string. This is null if the request is not complete or was not successful.

+
responseText {{ReadOnlyInline()}}DOMStringThe response to the request as text, or null if the request was unsuccessful or has not yet been sent.
responseTypeXMLHttpRequestResponseType +

Can be set to change the response type.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueData type of response property
"" (empty string)String (this is the default)
"arraybuffer"ArrayBuffer
"blob"{{ domxref("Blob") }}
"document"{{ domxref("Document") }}
"json"JavaScript object, parsed from a JSON string returned by the server
"text"String
"moz-blob"Used by Firefox to allow retrieving partial {{ domxref("Blob") }} data from progress events. This lets your progress event handler start processing data while it's still being received.
"moz-chunked-text" +

Similar to "text", but is streaming. This means that the value in response is only available during dispatch of the "progress" event and only contains the data received since the last "progress" event.

+ +

When response is accessed during a "progress" event it contains a string with the data. Otherwise it returns null.

+ +

This mode currently only works in Firefox.

+
"moz-chunked-arraybuffer" +

Similar to "arraybuffer", but is streaming. This means that the value in response is only available during dispatch of the "progress" event and only contains the data received since the last "progress" event.

+ +

When response is accessed during a "progress" event it contains a string with the data. Otherwise it returns null.

+ +

This mode currently only works in Firefox.

+
+ +
Note: Starting with Gecko 11.0, as well as WebKit build 528, these browsers no longer let you use the responseType attribute when performing synchronous requests. Attempting to do so throws an NS_ERROR_DOM_INVALID_ACCESS_ERR exception. This change has been proposed to the W3C for standardization.
+
responseXML {{ReadOnlyInline()}}Document? +

The response to the request as a DOM Document object, or null if the request was unsuccessful, has not yet been sent, or cannot be parsed as XML or HTML. The response is parsed as if it were a text/xml stream. When the responseType is set to "document" and the request has been made asynchronously, the response is parsed as a text/html stream.

+ +
Note: If the server doesn't apply the text/xml Content-Type header, you can use overrideMimeType()to force XMLHttpRequest to parse it as XML anyway.
+
status {{ReadOnlyInline()}}unsigned shortThe status of the response to the request. This is the HTTP result code (for example, status is 200 for a successful request).
statusText {{ReadOnlyInline()}}DOMStringThe response string returned by the HTTP server. Unlike status, this includes the entire text of the response message ("200 OK", for example).
timeoutunsigned long +

The number of milliseconds a request can take before automatically being terminated. A value of 0 (which is the default) means there is no timeout.

+ +
Note: You may not use a timeout for synchronous requests with an owning window.
+
ontimeoutFunction +

A JavaScript function object that is called whenever the request times out.

+
uploadXMLHttpRequestUploadThe upload process can be tracked by adding an event listener to upload.
withCredentialsboolean +

Indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies or authorization headers. The default is false.

+ +
Note: This never affects same-site requests.
+ +
Note: Starting with Gecko 11.0, Gecko no longer lets you use the withCredentials attribute when performing synchronous requests. Attempting to do so throws an NS_ERROR_DOM_INVALID_ACCESS_ERR exception.
+
+ +

Non-standard properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeTypeDescription
channel {{ReadOnlyInline()}}{{Interface("nsIChannel")}}The channel used by the object when performing the request. This is null if the channel hasn't been created yet. In the case of a multi-part request, this is the initial channel, not the different parts in the multi-part request. Requires elevated privileges to access.
mozAnon {{ReadOnlyInline()}}boolean +

If true, the request will be sent without cookie and authentication headers.

+
mozSystem {{ReadOnlyInline()}}boolean +

If true, the same origin policy will not be enforced on the request.

+
mozBackgroundRequestboolean +

Indicates whether or not the object represents a background service request. If true, no load group is associated with the request, and security dialogs are prevented from being shown to the user. Requires elevated privileges to access.

+ +

In cases in which a security dialog (such as authentication or a bad certificate notification) would normally be shown, the request simply fails instead.

+ +
Note: This property must be set before calling open().
+
mozResponseArrayBuffer  {{ obsolete_inline("6") }} {{ReadOnlyInline()}}ArrayBufferThe response to the request, as a JavaScript typed array. This is NULL if the request was not successful, or if it hasn't been sent yet.
multipart {{ obsolete_inline("22") }}boolean +

This Gecko-only feature was removed in Firefox/Gecko 22. Please use Server-Sent Events, Web Sockets, or responseText from progress events instead.

+ +

Indicates whether or not the response is expected to be a stream of possibly multiple XML documents. If set to true, the content type of the initial response must be multipart/x-mixed-replace or an error will occur. All requests must be asynchronous.

+ +

This enables support for server push; for each XML document that's written to this request, a new XML DOM document is created and the onload handler is called between documents.

+ +
Note: When this is set, the onload handler and other event handlers are not reset after the first XMLdocument is loaded, and the onload handler is called after each part of the response is received.
+
+ +

Constructor

+ +

XMLHttpRequest()

+ +

The constructor initiates an XMLHttpRequest. It must be called before any other method calls.

+ +

Gecko/Firefox 16 adds a non-standard parameter to the constructor that can enable anonymous mode (see Bug 692677). Setting the mozAnon flag to true effectively resembles the AnonXMLHttpRequest() constructor described in the XMLHttpRequest specification which has not been implemented in any browser yet (as of September 2012).

+ +
XMLHttpRequest (
+  JSObject objParameters
+);
+ +
Parameters (non-standard)
+ +
+
objParameters
+
There are two flags you can set: +
+
mozAnon
+
Boolean: Setting this flag to true will cause the browser not to expose the origin and user credentials when fetching resources. Most important, this means that cookies will not be sent unless explicitly added using setRequestHeader.
+
mozSystem
+
Boolean: Setting this flag to true allows making cross-site connections without requiring the server to opt-in using CORS. Requires setting mozAnon: true, i.e. this can't be combined with sending cookies or other user credentials. This only works in privileged (reviewed) apps; it does not work on arbitrary webpages loaded in Firefox.
+
+
+
+ +

Methods

+ +

abort()

+ +

Aborts the request if it has already been sent.

+ +

getAllResponseHeaders()

+ +
DOMString getAllResponseHeaders();
+ +

Returns all the response headers as a string, or null if no response has been received. Note: For multipart requests, this returns the headers from the current part of the request, not from the original channel.

+ +

getResponseHeader()

+ +
DOMString? getResponseHeader(DOMString header);
+ +

Returns the string containing the text of the specified header, or null if either the response has not yet been received or the header doesn't exist in the response.

+ +

open()

+ +

Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use openRequest()instead.

+ +
Note: Calling this method for an already active request (one for which open()or openRequest()has already been called) is the equivalent of calling abort().
+ +
void open(
+   DOMString method,
+   DOMString url,
+   optional boolean async,
+   optional DOMString user,
+   optional DOMString password
+);
+
+ +
Parameters
+ +
+
method
+
The HTTP method to use, such as "GET", "POST", "PUT", "DELETE", etc. Ignored for non-HTTP(S) URLs.
+
url
+
The URL to send the request to.
+
async
+
An optional boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If this value is false, the send()method does not return until the response is received. If true, notification of a completed transaction is provided using event listeners. This must be true if the multipart attribute is true, or an exception will be thrown. +
Note: Starting with Gecko 30.0, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
+
+
user
+
The optional user name to use for authentication purposes; by default, this is an empty string.
+
password
+
The optional password to use for authentication purposes; by default, this is an empty string.
+
+ +

overrideMimeType()

+ +

Overrides the MIME type returned by the server. This may be used, for example, to force a stream to be treated and parsed as text/xml, even if the server does not report it as such. This method must be called before send().

+ +
void overrideMimeType(DOMString mimetype);
+ +

send()

+ +

Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent. If the request is synchronous, this method doesn't return until the response has arrived.

+ +
Note: Any event listeners you wish to set must be set before calling send().
+ +
Note: Be aware to stop using a plain ArrayBuffer as parameter. This is not part of the XMLHttpRequest specification any longer. Use an ArrayBufferView instead (see compatibility table for version information).
+ +
void send();
+void send(ArrayBuffer data);
+void send(ArrayBufferView data);
+void send(Blob data);
+void send(Document data);
+void send(DOMString? data);
+void send(FormData data);
+ +
Notes
+ +

If the data is a Document, it is serialized before being sent. When sending a Document, versions of Firefox prior to version 3 always send the request using UTF-8 encoding; Firefox 3 properly sends the document using the encoding specified by body.xmlEncoding, or UTF-8 if no encoding is specified.

+ +

If it's an nsIInputStream, it must be compatible with nsIUploadChannel's setUploadStream()method. In that case, a Content-Length header is added to the request, with its value obtained using nsIInputStream's available()method. Any headers included at the top of the stream are treated as part of the message body. The stream's MIMEtype should be specified by setting the Content-Type header using the setRequestHeader() method prior to calling send().

+ +

The best way to send binary content (like in files upload) is using an ArrayBufferView or Blobs in conjuncton with the send() method. However, if you want to send a stringifiable raw data, use the sendAsBinary() method instead, or the StringView Non native typed arrays superclass.

+ +

setRequestHeader()

+ +

Sets the value of an HTTP request header. You must call setRequestHeader() after open(), but before send(). If this method is called several times with the same header, the values are merged into one single request header.

+ +
void setRequestHeader(
+   DOMString header,
+   DOMString value
+);
+
+ +
Parameters
+ +
+
header
+
The name of the header whose value is to be set.
+
value
+
The value to set as the body of the header.
+
+ +

Non-standard methods

+ +

init()

+ +

Initializes the object for use from C++ code.

+ +
Warning: This method must not be called from JavaScript.
+ +
[noscript] void init(
+   in nsIPrincipal principal,
+   in nsIScriptContext scriptContext,
+   in nsPIDOMWindow ownerWindow
+);
+
+ +
Parameters
+ +
+
principal
+
The principal to use for the request; must not be null.
+
scriptContext
+
The script context to use for the request; must not be null.
+
ownerWindow
+
The window associated with the request; may be null.
+
+ +

openRequest()

+ +

Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use open()instead. See the documentation for open().

+ +

sendAsBinary()

+ +

A variant of the send() method that sends binary data.

+ +
void sendAsBinary(
+   in DOMString body
+);
+
+ +

This method, used in conjunction with the readAsBinaryString method of the FileReader API, makes it possible to read and upload any type of file and to stringify the raw data.

+ +
Parameters
+ +
+
body
+
The request body as a DOMstring. This data is converted to a string of single-byte characters by truncation (removing the high-order byte of each character).
+
+ +
sendAsBinary() polyfill
+ +

Since sendAsBinary() is an experimental feature, here is a polyfill for browsers that don't support the sendAsBinary() method but support typed arrays.

+ +
/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+|*|
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+ +
Note: It's possible to build this polyfill putting two types of data as argument for send(): an ArrayBuffer (ui8Data.buffer – the commented code) or an ArrayBufferView (ui8Data, which is a typed array of 8-bit unsigned integers – uncommented code). However, on Google Chrome, when you try to send an ArrayBuffer, the following warning message will appear: ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead. Another possible approach to send binary data is the StringView Non native typed arrays superclass in conjunction with the send() method.
+ +

Notes

+ + + +

Events

+ +

onreadystatechange as a property of the XMLHttpRequest instance is supported in all browsers.

+ +

Since then, a number of additional event handlers were implemented in various browsers (onload, onerror, onprogress, etc.). These are supported in Firefox. In particular, see {{ interface("nsIXMLHttpRequestEventTarget") }} and Using XMLHttpRequest.

+ +

More recent browsers, including Firefox, also support listening to the XMLHttpRequest events via standard addEventListener APIs in addition to setting on* properties to a handler function.

+ +

Permissions

+ +

When using System XHR via the mozSystem property, for example for Firefox OS apps, you need to be sure to add the systemXHR permission into your manifest file. System XHR can be used in privileged or certified apps.

+ +
"permissions": {
+    "systemXHR":{}
+}
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (XHR1)11.05 (via ActiveXObject)
+ 7 (XMLHttpRequest)		{{ CompatVersionUnknown() }}1.2
send(ArrayBuffer)991011.60{{ compatUnknown() }}
send(ArrayBufferView)2220{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}
send(Blob)73.61012{{ compatUnknown() }}
send(FormData)641012{{ compatUnknown() }}
sendAsBinary(DOMString){{ compatNo() }} – use the polyfill1.9{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
response1061011.60{{ compatUnknown() }}
responseType = 'arraybuffer'1061011.60{{ compatUnknown() }}
responseType = 'blob'1961012{{ compatUnknown() }}
responseType = 'document'181110{{ CompatNo() }}6.1
responseType = 'json'{{ CompatNo() }}10{{ CompatNo() }}12{{ CompatNo() }}
Progress Events73.51012{{ compatUnknown() }}
withCredentials33.510124
timeout2912.0812{{ CompatNo() }}
responseType = 'moz-blob'{{ CompatNo() }}12.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}0.16{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Gecko notes

+ +

Gecko 11.0 {{ geckoRelease("11.0") }} removed support for using the responseType and withCredentials attributes when performing synchronous requests. Attempting to do so throws an NS_ERROR_DOM_INVALID_ACCESS_ERR exception. This change has been proposed to the W3C for standardization.

+ +

Gecko 12.0 {{ geckoRelease("12.0") }} and later support using XMLHttpRequest to read from data: URLs.

+ +

Gecko 20.0 {{ geckoRelease("20.0") }} adds the support of sending an ArrayBufferView - sending a plain ArrayBuffer is not part of the XMLHttpRequest specification any longer and should be treated as deprecated.

+ +

See also

+ + + +

{{ languages( { "es": "es/XMLHttpRequest", "fr": "fr/XMLHttpRequest", "it": "it/XMLHttpRequest", "ja": "ja/XMLHttpRequest", "ko": "ko/XMLHttpRequest", "pl": "pl/XMLHttpRequest", "zh-cn": "zh-cn/DOM/XMLHttpRequest" } ) }}

-- cgit v1.2.3-54-g00ecf