 |
 |
+
+
```
@@ -300,28 +300,25 @@ Tying it all together is the JavaScript to draw our framed images:
```js
function draw() {
-
// Loop through all images
for (let i = 0; i < document.images.length; i++) {
-
// Don't add a canvas for the frame image
- if (document.images[i].getAttribute('id') !== 'frame') {
-
+ if (document.images[i].getAttribute("id") !== "frame") {
// Create canvas element
- canvas = document.createElement('canvas');
- canvas.setAttribute('width', 132);
- canvas.setAttribute('height', 150);
+ canvas = document.createElement("canvas");
+ canvas.setAttribute("width", 132);
+ canvas.setAttribute("height", 150);
// Insert before the image
- document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+ document.images[i].parentNode.insertBefore(canvas, document.images[i]);
- ctx = canvas.getContext('2d');
+ ctx = canvas.getContext("2d");
// Draw image to canvas
ctx.drawImage(document.images[i], 15, 20);
// Add frame
- ctx.drawImage(document.getElementById('frame'), 0, 0);
+ ctx.drawImage(document.getElementById("frame"), 0, 0);
}
}
}
diff --git a/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md b/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md
index 821ba8e2eb23049..10f26dd410c6786 100644
--- a/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md
+++ b/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md
@@ -24,7 +24,7 @@ To get to the `style` objects from the `document`, you can use the {{domxref("Do
In this example the background of the page is set to red using CSS. The JavaScript then accesses the property using the CSSOM and changes the background to blue.
```html
-
+
- Click here to change background color. + Click here to change background color.
@@ -124,13 +124,13 @@ More important than the two properties noted here is the use of the `style` obje document.getElementById('d').style.color = 'black'; } - + - -Thunder
-
-
-
+
+ Thunder
+
+
+
```
diff --git a/files/en-us/web/api/document/getelementbyid/index.md b/files/en-us/web/api/document/getelementbyid/index.md
index e7e264d69bb12ce..0207a805df05c72 100644
--- a/files/en-us/web/api/document/getelementbyid/index.md
+++ b/files/en-us/web/api/document/getelementbyid/index.md
@@ -40,15 +40,15 @@ An {{domxref("Element")}} object describing the DOM element object matching the
### HTML
```html
-
-
- Some text here
- - - + + +Some text here
+ + + ``` @@ -76,24 +76,24 @@ Unlike some other element-lookup methods such as {{domxref("Document.querySelect ```html - +
-
-
+
```
diff --git a/files/en-us/web/api/document/getelementsbyclassname/index.md b/files/en-us/web/api/document/getelementsbyclassname/index.md
index 1a2e7aa288d1a90..eceff70338b05b3 100644
--- a/files/en-us/web/api/document/getelementsbyclassname/index.md
+++ b/files/en-us/web/api/document/getelementsbyclassname/index.md
@@ -89,25 +89,25 @@ const testDivs = Array.prototype.filter.call(
This is the most commonly used method of operation.
```html
-
-
+
+
hello word1
-hello word2
-hello word3
-hello word4
+hello word1
+hello word2
+hello word3
+hello word4
-
-
+
```
@@ -133,15 +133,15 @@ elements with ALL of the classNames specified are selected.
// getElementsByClassName only selects elements that have both given classes
const allOrangeJuiceByClass = document.getElementsByClassName('orange juice');
let result = "document.getElementsByClassName('orange juice')";
-for (let i=0; i < allOrangeJuiceByClass.length; i++) {
- result += `\n ${allOrangeJuiceByClass[i].textContent}`;
+for (let i = 0; i < allOrangeJuiceByClass.length; i++) {
+ result += `\n ${allOrangeJuiceByClass[i].textContent}`;
}
// querySelector only selects full complete matches
const allOrangeJuiceQuery = document.querySelectorAll('.orange.juice');
result += "\n\ndocument.querySelectorAll('.orange.juice')";
-for (let i=0; i < allOrangeJuiceQuery.length; i++) {
- result += `\n ${allOrangeJuiceQuery[i].textContent}`;
+for (let i = 0; i < allOrangeJuiceQuery.length; i++) {
+ result += `\n ${allOrangeJuiceQuery[i].textContent}`;
}
document.getElementById("resultArea").value = result;
diff --git a/files/en-us/web/api/document/getelementsbytagnamens/index.md b/files/en-us/web/api/document/getelementsbytagnamens/index.md
index 0a95acbbfcf545b..adfdd3f3aebb974 100644
--- a/files/en-us/web/api/document/getelementsbytagnamens/index.md
+++ b/files/en-us/web/api/document/getelementsbytagnamens/index.md
@@ -36,7 +36,7 @@ getElementsByTagNameNS(namespace, name)
### Return value
A live {{DOMxRef("NodeList")}} (but see the note below) of
- found elements in the order they appear in the tree.
+found elements in the order they appear in the tree.
> **Note:** While the W3C specification says returned value is a `NodeList`, this method returns a {{DOMxRef("HTMLCollection")}} both in Gecko and Internet Explorer.
> Opera returns a `NodeList`, but with a `namedItem` method implemented, which makes it similar to a `HTMLCollection`. As of January 2012, only in WebKit browsers is the returned value a pure `NodeList`.
@@ -59,73 +59,72 @@ To use the following example, just copy/paste it into a new file saved with the
extension.
```html
-
-
-
-hello world 1
-hello world 2
-hello world 3
-hello world 4
+hello world 1
+hello world 2
+hello world 3
+hello world 4
Some outer text
-Some outer text
- -
-
+
+
- +
- + + ``` diff --git a/files/en-us/web/api/document/mscapslockwarningoff/index.md b/files/en-us/web/api/document/mscapslockwarningoff/index.md index a9a394c1d7a9039..68eca0b57445432 100644 --- a/files/en-us/web/api/document/mscapslockwarningoff/index.md +++ b/files/en-us/web/api/document/mscapslockwarningoff/index.md @@ -37,24 +37,28 @@ Fiddle:msCapsLockWarningOff example
-
-
-
-
- - + + +Write example
-
-
-
-
-
- Write example
+
+
+
+
+
+ Simple Document API example
-
-
-
+ myBody.appendChild(myTable);
+ // sets the border attribute of myTable to 2;
+ myTable.setAttribute("border", "2");
+ }
+
+
+
```
@@ -322,37 +330,37 @@ The basic steps to create the table in sample1.html are:
### Getting a text node from the table
-This example introduces two new DOM attributes. First it uses the `childNodes` attribute to get the list of child nodes of mycel. The `childNodes` list includes all child nodes, regardless of what their name or type is. Like `getElementsByTagName()`, it returns a list of nodes.
+This example introduces two new DOM attributes. First it uses the `childNodes` attribute to get the list of child nodes of myCell. The `childNodes` list includes all child nodes, regardless of what their name or type is. Like `getElementsByTagName()`, it returns a list of nodes.
The differences are that (a) `getElementsByTagName()` only returns elements of the specified tag name; and (b) `getElementsByTagName()` returns descendants at any level, not just immediate children.
-Once you have the returned list, use `[x]` method to retrieve the desired child item. This example stores in myceltext the text node of the second cell in the second row of the table.
+Once you have the returned list, use `[x]` method to retrieve the desired child item. This example stores in myCellText the text node of the second cell in the second row of the table.
-Then, to display the results in this example, it creates a new text node whose content is the data of `myceltext`, and appends it as a child of the `` element.
+Then, to display the results in this example, it creates a new text node whose content is the data of `myCellText`, and appends it as a child of the `` element.
> **Note:** If your object is a text node, you can use the data attribute and retrieve the text content of the node.
```js
-mybody = document.getElementsByTagName("body")[0];
-mytable = mybody.getElementsByTagName("table")[0];
-mytablebody = mytable.getElementsByTagName("tbody")[0];
-myrow = mytablebody.getElementsByTagName("tr")[1];
-mycel = myrow.getElementsByTagName("td")[1];
-
-// first item element of the childNodes list of mycel
-myceltext=mycel.childNodes[0];
-
-// content of currenttext is the data content of myceltext
-currenttext=document.createTextNode(myceltext.data);
-mybody.appendChild(currenttext);
+myBody = document.getElementsByTagName("body")[0];
+myTable = myBody.getElementsByTagName("table")[0];
+myTableBody = myTable.getElementsByTagName("tbody")[0];
+myRow = myTableBody.getElementsByTagName("tr")[1];
+myCell = myRow.getElementsByTagName("td")[1];
+
+// first item element of the childNodes list of myCell
+myCellText = myCell.childNodes[0];
+
+// content of currentText is the data content of myCellText
+currentText = document.createTextNode(myCellText.data);
+myBody.appendChild(currentText);
```
### Getting an attribute value
-At the end of sample1 there is a call to `setAttribute` on the `mytable` object. This call was used to set the border property of the table. To retrieve the value of the attribute, use the `getAttribute` method:
+At the end of sample1 there is a call to `setAttribute` on the `myTable` object. This call was used to set the border property of the table. To retrieve the value of the attribute, use the `getAttribute` method:
```js
-mytable.getAttribute("border");
+myTable.getAttribute("border");
```
### Hiding a column by changing style properties
@@ -360,35 +368,34 @@ mytable.getAttribute("border");
Once you have the object in your JavaScript variable, you can set `style` properties directly. The following code is a modified version of sample1.html in which each cell of the second column is hidden and each cell of the first column is changed to have a red background. Note that the `style` property was set directly.
```html
-
-
-
-
+
```
diff --git a/files/en-us/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md b/files/en-us/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md
index d47733d81c2a471..724cf98cde0fdab 100644
--- a/files/en-us/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md
+++ b/files/en-us/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md
@@ -15,14 +15,14 @@ The W3C's [DOM Level 1 Core](https://www.w3.org/TR/REC-DOM-Level-1/level-one-cor
A [DOM](https://www.w3.org/TR/REC-DOM-Level-1/introduction.html) tree is a kind of [tree](https://en.wikipedia.org/wiki/Tree_structure) whose nodes represent an HTML or XML document's contents. Each HTML or XML document has a unique DOM tree representation. For example, the following document
```html
-
-
- My Document
-
-
- My Document
+
+
+
- // elements in the document, and the first is number 0:
-
- const header = document.getElementsByTagName("H2").item(0);
- // the firstChild of the header is a Text node:
- header.firstChild.data = "A dynamic document";
- // now the header is "A dynamic document".
-
- const para = document.getElementsByTagName("P").item(0);
- para.firstChild.data = "This is the first paragraph.";
-
- // create a new Text node for the second paragraph
- const newText = document.createTextNode("This is the second paragraph.");
- // create a new Element to be the second paragraph
- const newElement = document.createElement("P");
- // put the text in the paragraph
- newElement.appendChild(newText);
- // and put the paragraph on the end of the document by appending it to
- // the BODY (which is the parent of para)
- para.parentNode.appendChild(newElement);
- }
+ // document.getElementsByTagName("h2") returns a NodeList of the
Some div1 text
-Some div1 text
-Some div1 text
- -
- getElementsByTagNameNS example
+
+
+
+
+
+
-
-Some div2 text
-Some div2 text
+ + +Some outer text
+Some outer text
+ +
+
- Some div1 text
+Some div1 text
+Some div1 text
+ +
+
Some div2 text
+Some div2 text
+Some outer text
-Some outer text
-+
Some outer text
+Some outer text
-+
- +
- + + ``` diff --git a/files/en-us/web/api/document/mscapslockwarningoff/index.md b/files/en-us/web/api/document/mscapslockwarningoff/index.md index a9a394c1d7a9039..68eca0b57445432 100644 --- a/files/en-us/web/api/document/mscapslockwarningoff/index.md +++ b/files/en-us/web/api/document/mscapslockwarningoff/index.md @@ -37,24 +37,28 @@ Fiddle:
- - + + +
+
+
+
+
+
+
```
diff --git a/files/en-us/web/api/document/write/index.md b/files/en-us/web/api/document/write/index.md
index f581509c924de02..ddb4ff9e492c06d 100644
--- a/files/en-us/web/api/document/write/index.md
+++ b/files/en-us/web/api/document/write/index.md
@@ -41,24 +41,22 @@ None ({{jsxref("undefined")}}).
## Examples
```html
-
-
-
- Some original document content.
- - + + +Some original document content.
+ ``` @@ -74,7 +72,7 @@ If the `document.write()` call is embedded within an inline HTML ` ``` diff --git a/files/en-us/web/api/document_object_model/introduction/index.md b/files/en-us/web/api/document_object_model/introduction/index.md index 894f4726102d0df..5fa1feb4b1bf3f3 100644 --- a/files/en-us/web/api/document_object_model/introduction/index.md +++ b/files/en-us/web/api/document_object_model/introduction/index.md @@ -92,22 +92,20 @@ adds text to that element, and then adds it to the tree for the document: ```html - + - - + ``` @@ -134,9 +132,7 @@ The following table briefly describes these data types.ownerDocument property of an element returns the
document to which it belongs), this object is the root
document object itself. The
- DOM document Reference
+ DOM document Reference
chapter describes the document object.
@@ -226,8 +222,9 @@ const table = document.getElementById("table");
const tableAttrs = table.attributes; // Node/Element interface
for (let i = 0; i < tableAttrs.length; i++) {
// HTMLTableElement interface: border attribute
- if (tableAttrs[i].nodeName.toLowerCase() === "border")
+ if (tableAttrs[i].nodeName.toLowerCase() === "border") {
table.border = "1";
+ }
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";
@@ -263,7 +260,7 @@ The following simple example illustrates using the DOM {{domxref("Document")}} A
- the documents's link color (that is, the color of any hypertext links anywhere in the document)
```html
-
+
Header
-Paragraph
- + + +Header
+Paragraph
+ ``` @@ -46,9 +46,9 @@ Suppose the author wants to change the header of the above document and write tw ```html - -Header
-Paragraph
+ +Header
+Paragraph
``` @@ -56,27 +56,27 @@ Suppose the author wants to change the header of the above document and write tw ```js function change() { - // document.getElementsByTagName("H2") returns a NodeList of the
- // elements in the document, and the first is number 0:
-
- const header = document.getElementsByTagName("H2").item(0);
- // the firstChild of the header is a Text node:
- header.firstChild.data = "A dynamic document";
- // now the header is "A dynamic document".
-
- const para = document.getElementsByTagName("P").item(0);
- para.firstChild.data = "This is the first paragraph.";
-
- // create a new Text node for the second paragraph
- const newText = document.createTextNode("This is the second paragraph.");
- // create a new Element to be the second paragraph
- const newElement = document.createElement("P");
- // put the text in the paragraph
- newElement.appendChild(newText);
- // and put the paragraph on the end of the document by appending it to
- // the BODY (which is the parent of para)
- para.parentNode.appendChild(newElement);
- }
+ // document.getElementsByTagName("h2") returns a NodeList of the
+ // elements in the document, and the first is number 0:
+
+ const header = document.getElementsByTagName("h2").item(0);
+ // the firstChild of the header is a Text node:
+ header.firstChild.data = "A dynamic document";
+ // now the header is "A dynamic document".
+
+ const para = document.getElementsByTagName("p").item(0);
+ para.firstChild.data = "This is the first paragraph.";
+
+ // create a new Text node for the second paragraph
+ const newText = document.createTextNode("This is the second paragraph.");
+ // create a new Element to be the second paragraph
+ const newElement = document.createElement("p");
+ // put the text in the paragraph
+ newElement.appendChild(newText);
+ // and put the paragraph on the end of the document by appending it to
+ // the body (which is the parent of para)
+ para.parentNode.appendChild(newElement);
+}
```
{{ EmbedLiveSample('A_simple_example', 800, 300) }}
diff --git a/files/en-us/web/api/element/haspointercapture/index.md b/files/en-us/web/api/element/haspointercapture/index.md
index 089730e1ea5876e..f5eba79155324bc 100644
--- a/files/en-us/web/api/element/haspointercapture/index.md
+++ b/files/en-us/web/api/element/haspointercapture/index.md
@@ -38,7 +38,7 @@ capture, `false` if it doesn't.
## Examples
```html
-
+
-
-
-
-
+
+
+
-
-
-
- Fix
-
-
-
+ ondrop="event.stopPropagation(); event.preventDefault(); doDrop(event);">
+ Fix
+
+
```
This example cancels both the {{domxref("HTMLElement/dragenter_event", "dragenter")}} and `{{domxref("HTMLElement/dragover_event", "dragover")}}` events by calling the {{domxref("Event.preventDefault","preventDefault()")}}. method. This allows a drop to occur on that element.
-The `dodrop` event handler is called when dropping an item. It checks the {{domxref("DataTransfer.mozItemCount","mozItemCount")}} property to check how many items have been dropped and iterates over them. For each item, the {{domxref("DataTransfer.mozTypesAt","mozTypesAt()")}} method is called to get the list of types. This list is iterated over to get all of the data associated with the drag.
+The `doDrop` event handler is called when dropping an item. It checks the {{domxref("DataTransfer.mozItemCount","mozItemCount")}} property to check how many items have been dropped and iterates over them. For each item, the {{domxref("DataTransfer.mozTypesAt","mozTypesAt()")}} method is called to get the list of types. This list is iterated over to get all of the data associated with the drag.
This processing is useful if you wish to examine the data that a drag is holding. Drop an item on the drop target in the example to see what items, formats and data was being dragged.
+
+
+
+
```
This example cancels both the {{domxref("HTMLElement/dragenter_event", "dragenter")}} and `{{domxref("HTMLElement/dragover_event", "dragover")}}` events by calling the {{domxref("Event.preventDefault","preventDefault()")}}. method. This allows a drop to occur on that element.
-The `dodrop` event handler is called when dropping an item. It checks the {{domxref("DataTransfer.mozItemCount","mozItemCount")}} property to check how many items have been dropped and iterates over them. For each item, the {{domxref("DataTransfer.mozTypesAt","mozTypesAt()")}} method is called to get the list of types. This list is iterated over to get all of the data associated with the drag.
+The `doDrop` event handler is called when dropping an item. It checks the {{domxref("DataTransfer.mozItemCount","mozItemCount")}} property to check how many items have been dropped and iterates over them. For each item, the {{domxref("DataTransfer.mozTypesAt","mozTypesAt()")}} method is called to get the list of types. This list is iterated over to get all of the data associated with the drag.
This processing is useful if you wish to examine the data that a drag is holding. Drop an item on the drop target in the example to see what items, formats and data was being dragged.
-
-
-
-
+ ondrop="event.stopPropagation(); event.preventDefault(); doDrop(event);">
+
-
- Fix
-Fix
+