minor
This commit is contained in:
Ilya Kantor
parent
d1d8c968e7
commit
80dd2cba73
4 changed files with 220 additions and 224 deletions
|
|
@ -4,11 +4,9 @@ DOM modifications is the key to create "live" pages.
|
|||
|
||||
Here we'll see how to create new elements "on the fly" and modify the existing page content.
|
||||
|
||||
First we'll see a simple example and then explain the methods.
|
||||
|
||||
## Example: show a message
|
||||
|
||||
For a start, let's see how to add a message on the page that looks nicer than `alert`.
|
||||
Let's see the methods on example. We'll add a message on the page that looks nicer than `alert`.
|
||||
|
||||
Here's how it will look:
|
||||
|
||||
|
|
@ -30,11 +28,10 @@ Here's how it will look:
|
|||
*/!*
|
||||
```
|
||||
|
||||
That was an HTML example. Now let's create the same `div` with JavaScript (assuming that the styles are still in the HTML or an external CSS file).
|
||||
That was an HTML example. Now let's create the same `div` with JavaScript (assuming that the styles are in the HTML or an external CSS file).
|
||||
|
||||
## Creating an element
|
||||
|
||||
|
||||
To create DOM nodes, there are two methods:
|
||||
|
||||
`document.createElement(tag)`
|
||||
|
|
@ -53,21 +50,21 @@ To create DOM nodes, there are two methods:
|
|||
|
||||
### Creating the message
|
||||
|
||||
In our case we want to make a `div` with given classes and the message in it:
|
||||
In our case the message is a `div` with `alert` class and the HTML in it:
|
||||
|
||||
```js
|
||||
let div = document.createElement('div');
|
||||
div.className = "alert alert-success";
|
||||
div.className = "alert";
|
||||
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
|
||||
```
|
||||
|
||||
After that, we have our DOM element ready. Right now it is just in a variable and we cannot see it. That is because it's not yet inserted into the page.
|
||||
We created the element, but as of now it's only in a variable. We can't see the element on the page, as it's not yet a part of the document.
|
||||
|
||||
## Insertion methods
|
||||
|
||||
To make the `div` show up, we need to insert it somewhere into `document`. For instance, in `document.body`.
|
||||
|
||||
There's a special method `appendChild` for that: `document.body.appendChild(div)`.
|
||||
There's a special method `append` for that: `document.body.append(div)`.
|
||||
|
||||
Here's the full code:
|
||||
|
||||
|
|
@ -84,77 +81,16 @@ Here's the full code:
|
|||
|
||||
<script>
|
||||
let div = document.createElement('div');
|
||||
div.className = "alert alert-success";
|
||||
div.className = "alert";
|
||||
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
|
||||
|
||||
*!*
|
||||
document.body.appendChild(div);
|
||||
document.body.append(div);
|
||||
*/!*
|
||||
</script>
|
||||
```
|
||||
|
||||
Here's a brief list of methods to insert a node into a parent element (`parentElem` for short):
|
||||
|
||||
`parentElem.appendChild(node)`
|
||||
: Appends `node` as the last child of `parentElem`.
|
||||
|
||||
The following example adds a new `<li>` to the end of `<ol>`:
|
||||
|
||||
```html run height=100
|
||||
<ol id="list">
|
||||
<li>0</li>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
</ol>
|
||||
|
||||
<script>
|
||||
let newLi = document.createElement('li');
|
||||
newLi.innerHTML = 'Hello, world!';
|
||||
|
||||
list.appendChild(newLi);
|
||||
</script>
|
||||
```
|
||||
|
||||
`parentElem.insertBefore(node, nextSibling)`
|
||||
: Inserts `node` before `nextSibling` into `parentElem`.
|
||||
|
||||
The following code inserts a new list item before the second `<li>`:
|
||||
|
||||
```html run height=100
|
||||
<ol id="list">
|
||||
<li>0</li>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
</ol>
|
||||
<script>
|
||||
let newLi = document.createElement('li');
|
||||
newLi.innerHTML = 'Hello, world!';
|
||||
|
||||
*!*
|
||||
list.insertBefore(newLi, list.children[1]);
|
||||
*/!*
|
||||
</script>
|
||||
```
|
||||
To insert `newLi` as the first element, we can do it like this:
|
||||
|
||||
```js
|
||||
list.insertBefore(newLi, list.firstChild);
|
||||
```
|
||||
|
||||
`parentElem.replaceChild(node, oldChild)`
|
||||
: Replaces `oldChild` with `node` among children of `parentElem`.
|
||||
|
||||
All these methods return the inserted node. In other words, `parentElem.appendChild(node)` returns `node`. But usually the returned value is not used, we just run the method.
|
||||
|
||||
These methods are "old school": they exist from the ancient times and we can meet them in many old scripts. Unfortunately, they are not flexible enough.
|
||||
|
||||
For instance, how to insert *html* if we have it as a string? Or, given a node, without reference to its parent, how to remove it? Of course, that's doable, but not in an elegant way.
|
||||
|
||||
So there exist two other sets of insertion methods to handle all cases easily.
|
||||
|
||||
### prepend/append/before/after
|
||||
|
||||
This set of methods provides more flexible insertions:
|
||||
This set of methods provides more ways to insert:
|
||||
|
||||
- `node.append(...nodes or strings)` -- append nodes or strings at the end of `node`,
|
||||
- `node.prepend(...nodes or strings)` -- insert nodes or strings into the beginning of `node`,
|
||||
|
|
@ -162,9 +98,7 @@ This set of methods provides more flexible insertions:
|
|||
- `node.after(...nodes or strings)` –- insert nodes or strings after the `node`,
|
||||
- `node.replaceWith(...nodes or strings)` –- replaces `node` with the given nodes or strings.
|
||||
|
||||
All of them accept a list of DOM nodes and/or text strings. If a string is given it's inserted as a text node.
|
||||
|
||||
Here's an example of using these methods to add more items to a list and the text before/after it:
|
||||
Here's an example of using these methods to add items to a list and the text before/after it:
|
||||
|
||||
```html autorun
|
||||
<ol id="ol">
|
||||
|
|
@ -174,20 +108,20 @@ Here's an example of using these methods to add more items to a list and the tex
|
|||
</ol>
|
||||
|
||||
<script>
|
||||
ol.before('before');
|
||||
ol.after('after');
|
||||
ol.before('before'); // insert string "before" before <ol>
|
||||
ol.after('after'); // insert string "after" after <ol>
|
||||
|
||||
let prepend = document.createElement('li');
|
||||
prepend.innerHTML = 'prepend';
|
||||
ol.prepend(prepend);
|
||||
let liFirst = document.createElement('li');
|
||||
liFirst.innerHTML = 'prepend';
|
||||
ol.prepend(liFirst); // insert liFirst at the beginning of <ol>
|
||||
|
||||
let append = document.createElement('li');
|
||||
append.innerHTML = 'append';
|
||||
ol.append(append);
|
||||
let liLast = document.createElement('li');
|
||||
liLast.innerHTML = 'append';
|
||||
ol.append(liLast); // insert liLast at the end of <ol>
|
||||
</script>
|
||||
```
|
||||
|
||||
Here's a small picture what methods do:
|
||||
Here's a visual picture what methods do:
|
||||
|
||||
|
||||
|
||||
|
|
@ -234,9 +168,9 @@ So, these methods can only be used to insert DOM nodes or text pieces.
|
|||
|
||||
But what if we want to insert HTML "as html", with all tags and stuff working, like `elem.innerHTML`?
|
||||
|
||||
### insertAdjacentHTML/Text/Element
|
||||
## insertAdjacentHTML/Text/Element
|
||||
|
||||
There's another, pretty versatile method: `elem.insertAdjacentHTML(where, html)`.
|
||||
For that we can use another, pretty versatile method: `elem.insertAdjacentHTML(where, html)`.
|
||||
|
||||
The first parameter is a code word, specifying where to insert relative to `elem`. Must be one of the following:
|
||||
|
||||
|
|
@ -265,7 +199,7 @@ For instance:
|
|||
<p>Bye</p>
|
||||
```
|
||||
|
||||
That's how we can append an arbitrary HTML to our page.
|
||||
That's how we can append an arbitrary HTML to the page.
|
||||
|
||||
Here's the picture of insertion variants:
|
||||
|
||||
|
|
@ -294,12 +228,56 @@ So here's an alternative variant of showing a message:
|
|||
</style>
|
||||
|
||||
<script>
|
||||
document.body.insertAdjacentHTML("afterbegin", `<div class="alert alert-success">
|
||||
document.body.insertAdjacentHTML("afterbegin", `<div class="alert">
|
||||
<strong>Hi there!</strong> You've read an important message.
|
||||
</div>`);
|
||||
</script>
|
||||
```
|
||||
|
||||
## Node removal
|
||||
|
||||
To remove a node, there's a method `node.remove()`.
|
||||
|
||||
Let's make our message disappear after a second:
|
||||
|
||||
```html run untrusted
|
||||
<style>
|
||||
.alert {
|
||||
padding: 15px;
|
||||
border: 1px solid #d6e9c6;
|
||||
border-radius: 4px;
|
||||
color: #3c763d;
|
||||
background-color: #dff0d8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let div = document.createElement('div');
|
||||
div.className = "alert";
|
||||
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
|
||||
|
||||
document.body.append(div);
|
||||
*!*
|
||||
setTimeout(() => div.remove(), 1000);
|
||||
*/!*
|
||||
</script>
|
||||
```
|
||||
|
||||
Please note: if we want to *move* an element to another place -- there's no need to remove it from the old one.
|
||||
|
||||
**All insertion methods automatically remove the node from the old place.**
|
||||
|
||||
For instance, let's swap elements:
|
||||
|
||||
```html run height=50
|
||||
<div id="first">First</div>
|
||||
<div id="second">Second</div>
|
||||
<script>
|
||||
// no need to call remove
|
||||
second.after(first); // take #second and after it insert #first
|
||||
</script>
|
||||
```
|
||||
|
||||
## Cloning nodes: cloneNode
|
||||
|
||||
How to insert one more similar message?
|
||||
|
|
@ -337,7 +315,6 @@ An example of copying the message:
|
|||
</script>
|
||||
```
|
||||
|
||||
|
||||
## DocumentFragment [#document-fragment]
|
||||
|
||||
`DocumentFragment` is a special DOM node that serves as a wrapper to pass around lists of nodes.
|
||||
|
|
@ -404,62 +381,84 @@ ul.append(...getListContent()); // append + "..." operator = friends!
|
|||
|
||||
We mention `DocumentFragment` mainly because there are some concepts on top of it, like [template](info:template-element) element, that we'll cover much later.
|
||||
|
||||
## Old-school insert/remove methods
|
||||
|
||||
## Removal methods
|
||||
[old]
|
||||
|
||||
To remove nodes, there are the following methods:
|
||||
There are also "old school" DOM manipulation methods, existing for historical reasons.
|
||||
|
||||
These methods come from really ancient times. Nowadays, there's no reason to use them, as modern methods, such as `append`, `prepend`, `before`, `after`, `remove`, `replaceWith`, are more flexible.
|
||||
|
||||
The only reason we list these methods here is that you can find them in many old scripts:
|
||||
|
||||
`parentElem.appendChild(node)`
|
||||
: Appends `node` as the last child of `parentElem`.
|
||||
|
||||
The following example adds a new `<li>` to the end of `<ol>`:
|
||||
|
||||
```html run height=100
|
||||
<ol id="list">
|
||||
<li>0</li>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
</ol>
|
||||
|
||||
<script>
|
||||
let newLi = document.createElement('li');
|
||||
newLi.innerHTML = 'Hello, world!';
|
||||
|
||||
list.appendChild(newLi);
|
||||
</script>
|
||||
```
|
||||
|
||||
`parentElem.insertBefore(node, nextSibling)`
|
||||
: Inserts `node` before `nextSibling` into `parentElem`.
|
||||
|
||||
The following code inserts a new list item before the second `<li>`:
|
||||
|
||||
```html run height=100
|
||||
<ol id="list">
|
||||
<li>0</li>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
</ol>
|
||||
<script>
|
||||
let newLi = document.createElement('li');
|
||||
newLi.innerHTML = 'Hello, world!';
|
||||
|
||||
*!*
|
||||
list.insertBefore(newLi, list.children[1]);
|
||||
*/!*
|
||||
</script>
|
||||
```
|
||||
To insert `newLi` as the first element, we can do it like this:
|
||||
|
||||
```js
|
||||
list.insertBefore(newLi, list.firstChild);
|
||||
```
|
||||
|
||||
`parentElem.replaceChild(node, oldChild)`
|
||||
: Replaces `oldChild` with `node` among children of `parentElem`.
|
||||
|
||||
`parentElem.removeChild(node)`
|
||||
: Removes `node` from `parentElem` (assuming it's a child).
|
||||
: Removes `node` from `parentElem` (assuming `node` is its child).
|
||||
|
||||
`node.remove()`
|
||||
: Removes the `node` from its place.
|
||||
The following example removes first `<li>` from `<ol>`:
|
||||
|
||||
We can easily see that the second method is much shorter. The first one exists for historical reasons.
|
||||
```html run height=100
|
||||
<ol id="list">
|
||||
<li>0</li>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
</ol>
|
||||
|
||||
````smart
|
||||
If we want to *move* an element to another place -- there's no need to remove it from the old one.
|
||||
<script>
|
||||
let li = list.firstElementChild;
|
||||
list.removeChild(li);
|
||||
</script>
|
||||
```
|
||||
|
||||
**All insertion methods automatically remove the node from the old place.**
|
||||
|
||||
For instance, let's swap elements:
|
||||
|
||||
```html run height=50
|
||||
<div id="first">First</div>
|
||||
<div id="second">Second</div>
|
||||
<script>
|
||||
// no need to call remove
|
||||
second.after(first); // take #second and after it - insert #first
|
||||
</script>
|
||||
```
|
||||
````
|
||||
|
||||
Let's make our message disappear after a second:
|
||||
|
||||
```html run untrusted
|
||||
<style>
|
||||
.alert {
|
||||
padding: 15px;
|
||||
border: 1px solid #d6e9c6;
|
||||
border-radius: 4px;
|
||||
color: #3c763d;
|
||||
background-color: #dff0d8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let div = document.createElement('div');
|
||||
div.className = "alert alert-success";
|
||||
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
|
||||
|
||||
document.body.append(div);
|
||||
*!*
|
||||
setTimeout(() => div.remove(), 1000);
|
||||
// or setTimeout(() => document.body.removeChild(div), 1000);
|
||||
*/!*
|
||||
</script>
|
||||
```
|
||||
All these methods return the inserted/removed node. In other words, `parentElem.appendChild(node)` returns `node`. But usually the returned value is not used, we just run the method.
|
||||
|
||||
## A word about "document.write"
|
||||
|
||||
|
|
@ -502,33 +501,22 @@ For instance:
|
|||
|
||||
So it's kind of unusable at "after loaded" stage, unlike other DOM methods we covered above.
|
||||
|
||||
That was the downside.
|
||||
That's the downside.
|
||||
|
||||
Technically, when `document.write` is called while the browser is reading ("parsing") incoming HTML, and it writes something, the browser consumes it just as if it were initially there, in the HTML text.
|
||||
There's an upside also. Technically, when `document.write` is called while the browser is reading ("parsing") incoming HTML, and it writes something, the browser consumes it just as if it were initially there, in the HTML text.
|
||||
|
||||
That gives us the upside -- it works blazingly fast, because there's *no DOM modification*. It writes directly into the page text, while the DOM is not yet built, and the browser puts it into DOM at generation-time.
|
||||
So it works blazingly fast, because there's *no DOM modification* involved. It writes directly into the page text, while the DOM is not yet built.
|
||||
|
||||
So if we need to add a lot of text into HTML dynamically, and we're at page loading phase, and the speed matters, it may help. But in practice these requirements rarely come together. And usually we can see this method in scripts just because they are old.
|
||||
|
||||
## Summary
|
||||
|
||||
Methods to create new nodes:
|
||||
- Methods to create new nodes:
|
||||
- `document.createElement(tag)` -- creates an element with the given tag,
|
||||
- `document.createTextNode(value)` -- creates a text node (rarely used),
|
||||
- `elem.cloneNode(deep)` -- clones the element, if `deep==true` then with all descendants.
|
||||
|
||||
- `document.createElement(tag)` -- creates an element with the given tag,
|
||||
- `document.createTextNode(value)` -- creates a text node (rarely used),
|
||||
- `elem.cloneNode(deep)` -- clones the element, if `deep==true` then with all descendants.
|
||||
|
||||
Insertion and removal of nodes:
|
||||
|
||||
- From the parent:
|
||||
- `parent.appendChild(node)`
|
||||
- `parent.insertBefore(node, nextSibling)`
|
||||
- `parent.removeChild(node)`
|
||||
- `parent.replaceChild(newElem, node)`
|
||||
|
||||
All these methods return `node`.
|
||||
|
||||
- Given a list of nodes and strings:
|
||||
- Insertion and removal:
|
||||
- `node.append(...nodes or strings)` -- insert into `node`, at the end,
|
||||
- `node.prepend(...nodes or strings)` -- insert into `node`, at the beginning,
|
||||
- `node.before(...nodes or strings)` –- insert right before `node`,
|
||||
|
|
@ -538,7 +526,15 @@ Insertion and removal of nodes:
|
|||
|
||||
Text strings are inserted "as text".
|
||||
|
||||
- Given a piece of HTML: `elem.insertAdjacentHTML(where, html)`, inserts depending on where:
|
||||
- There are also "old school" methods:
|
||||
- `parent.appendChild(node)`
|
||||
- `parent.insertBefore(node, nextSibling)`
|
||||
- `parent.removeChild(node)`
|
||||
- `parent.replaceChild(newElem, node)`
|
||||
|
||||
All these methods return `node`.
|
||||
|
||||
- Given a piece of HTML: `elem.insertAdjacentHTML(where, html)`, inserts depending on `where`:
|
||||
- `"beforebegin"` -- insert `html` right before `elem`,
|
||||
- `"afterbegin"` -- insert `html` into `elem`, at the beginning,
|
||||
- `"beforeend"` -- insert `html` into `elem`, at the end,
|
||||
|
|
|
|||
|
|
@ -62,8 +62,8 @@
|
|||
<text id="ol.before" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
|
||||
<tspan x="111" y="26">ol.before</tspan>
|
||||
</text>
|
||||
<text id="ol.*(…nodes-or-strin" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8B572A">
|
||||
<tspan x="198" y="112">ol.*(…nodes or strings)</tspan>
|
||||
<text id="(…nodes-or-strings)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8B572A">
|
||||
<tspan x="198" y="112">(…nodes or strings)</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
|
@ -15,9 +15,9 @@
|
|||
</defs>
|
||||
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="metric-offset-width-height.svg">
|
||||
<path d="M394,155 L54,155 L54,395 L394,395 L394,155 Z M29,130 L419,130 L419,420 L29,420 L29,130 Z" id="Rectangle-2" fill-opacity="0.88" fill="#E8C48F"></path>
|
||||
<path d="M75,177 L75,376 L358,376 L358,177 L75,177 Z" id="Rectangle-1" stroke="#EE6B47" stroke-width="2"></path>
|
||||
<g id="Scrollbar" transform="translate(378.000000, 155.000000)">
|
||||
<path d="M395,155 L55,155 L55,395 L395,395 L395,155 Z M30,130 L420,130 L420,420 L30,420 L30,130 Z" id="Rectangle-2" fill-opacity="0.88" fill="#E8C48F"></path>
|
||||
<path d="M76,177 L76,376 L359,376 L359,177 L76,177 Z" id="Rectangle-1" stroke="#EE6B47" stroke-width="2"></path>
|
||||
<g id="Scrollbar" transform="translate(379.000000, 155.000000)">
|
||||
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F2F2" x="0.5" y="0.5" width="15" height="239" rx="3"></rect>
|
||||
<g id="Rectangle-18-+-Triangle-1">
|
||||
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
|
||||
|
|
@ -40,72 +40,72 @@
|
|||
</g>
|
||||
</g>
|
||||
<text id="border" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
|
||||
<tspan x="20.9" y="75" fill="#EE6B47">border</tspan>
|
||||
<tspan x="28.1" y="89" fill="#3B86C4">25px</tspan>
|
||||
<tspan x="21.9" y="75" fill="#EE6B47">border</tspan>
|
||||
<tspan x="29.1" y="89" fill="#3B86C4">25px</tspan>
|
||||
</text>
|
||||
<text id="padding" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
|
||||
<tspan x="40.3" y="45" fill="#EE6B47">padding</tspan>
|
||||
<tspan x="51.1" y="59" fill="#3B86C4">20px</tspan>
|
||||
<tspan x="41.3" y="45" fill="#EE6B47">padding</tspan>
|
||||
<tspan x="52.1" y="59" fill="#3B86C4">20px</tspan>
|
||||
</text>
|
||||
<text id="content-width:284px" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
|
||||
<tspan x="147.1" y="109" fill="#EE6B47">content width:</tspan>
|
||||
<tspan x="247.9" y="109" fill="#3B86C4">284px</tspan>
|
||||
<tspan x="148.1" y="109" fill="#EE6B47">content width:</tspan>
|
||||
<tspan x="248.9" y="109" fill="#3B86C4">284px</tspan>
|
||||
</text>
|
||||
<text id="height:200px" transform="translate(428.500000, 274.000000) rotate(-90.000000) translate(-428.500000, -274.000000) " font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
|
||||
<tspan x="385.3" y="278" fill="#EE6B47">height:</tspan>
|
||||
<tspan x="435.7" y="278" fill="#3B86C4">200px</tspan>
|
||||
<text id="height:200px" transform="translate(429.500000, 274.000000) rotate(-90.000000) translate(-429.500000, -274.000000) " font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
|
||||
<tspan x="386.3" y="278" fill="#EE6B47">height:</tspan>
|
||||
<tspan x="436.7" y="278" fill="#3B86C4">200px</tspan>
|
||||
</text>
|
||||
<path d="M359.5,175 L447.64193,175" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
|
||||
<path d="M359.5,377 L447.64193,377" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
|
||||
<path id="Line" d="M442,191.5 L442,360 L448,360 L441,374 L434,360 L440,360 L440,191.5 L434,191.5 L441,177.5 L448,191.5 L442,191.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<path id="Line-15" d="M90.6799927,116 L344.5,116 L344.5,110 L358.5,117 L344.5,124 L344.5,118 L90.6799927,118 L90.6799927,124 L76.6799927,117 L90.6799927,110 L90.6799927,116 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<path d="M7.53515625,114.945312 L50.5351562,114.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(29.480469, 114.945312) rotate(-270.000000) translate(-29.480469, -114.945312) "></path>
|
||||
<path d="M34.5351562,113.945312 L75.5351562,113.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(55.480469, 113.945312) rotate(-270.000000) translate(-55.480469, -113.945312) "></path>
|
||||
<path d="M360.5,175 L448.64193,175" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
|
||||
<path d="M360.5,377 L448.64193,377" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
|
||||
<path id="Line" d="M443,191.5 L443,360 L449,360 L442,374 L435,360 L441,360 L441,191.5 L435,191.5 L442,177.5 L449,191.5 L443,191.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<path id="Line-15" d="M91.6799927,116 L345.5,116 L345.5,110 L359.5,117 L345.5,124 L345.5,118 L91.6799927,118 L91.6799927,124 L77.6799927,117 L91.6799927,110 L91.6799927,116 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<path d="M8.53515625,114.945312 L51.5351562,114.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(30.480469, 114.945312) rotate(-270.000000) translate(-30.480469, -114.945312) "></path>
|
||||
<path d="M35.5351562,113.945312 L76.5351562,113.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(56.480469, 113.945312) rotate(-270.000000) translate(-56.480469, -113.945312) "></path>
|
||||
<text id="border-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
|
||||
<tspan x="384.9" y="76" fill="#EE6B47">border</tspan>
|
||||
<tspan x="392.1" y="90" fill="#3B86C4">25px</tspan>
|
||||
<tspan x="385.9" y="76" fill="#EE6B47">border</tspan>
|
||||
<tspan x="393.1" y="90" fill="#3B86C4">25px</tspan>
|
||||
</text>
|
||||
<text id="padding-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
|
||||
<tspan x="347.3" y="16" fill="#EE6B47">padding</tspan>
|
||||
<tspan x="358.1" y="30" fill="#3B86C4">20px</tspan>
|
||||
<tspan x="348.3" y="16" fill="#EE6B47">padding</tspan>
|
||||
<tspan x="359.1" y="30" fill="#3B86C4">20px</tspan>
|
||||
</text>
|
||||
<text id="scrollbar" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
|
||||
<tspan x="357.1" y="48" fill="#EE6B47">scrollbar</tspan>
|
||||
<tspan x="375.1" y="62" fill="#3B86C4">16px</tspan>
|
||||
<tspan x="358.1" y="48" fill="#EE6B47">scrollbar</tspan>
|
||||
<tspan x="376.1" y="62" fill="#3B86C4">16px</tspan>
|
||||
</text>
|
||||
<path d="M357.535156,114.945312 L400.535156,114.945312" id="Line-17" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(379.480469, 114.945312) rotate(-270.000000) translate(-379.480469, -114.945312) "></path>
|
||||
<path d="M371.535156,114.945312 L414.535156,114.945312" id="Line-20" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(393.480469, 114.945312) rotate(-270.000000) translate(-393.480469, -114.945312) "></path>
|
||||
<path d="M397.535156,113.945312 L438.535156,113.945312" id="Line-18" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(418.480469, 113.945312) rotate(-270.000000) translate(-418.480469, -113.945312) "></path>
|
||||
<path d="M53.5351562,113.945312 L94.5351562,113.945312" id="Line-16" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(74.480469, 113.945312) rotate(-270.000000) translate(-74.480469, -113.945312) "></path>
|
||||
<path d="M340.535156,113.945312 L381.535156,113.945312" id="Line-19" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(361.480469, 113.945312) rotate(-270.000000) translate(-361.480469, -113.945312) "></path>
|
||||
<path d="M358.535156,114.945312 L401.535156,114.945312" id="Line-17" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(380.480469, 114.945312) rotate(-270.000000) translate(-380.480469, -114.945312) "></path>
|
||||
<path d="M372.535156,114.945312 L415.535156,114.945312" id="Line-20" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(394.480469, 114.945312) rotate(-270.000000) translate(-394.480469, -114.945312) "></path>
|
||||
<path d="M398.535156,113.945312 L439.535156,113.945312" id="Line-18" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(419.480469, 113.945312) rotate(-270.000000) translate(-419.480469, -113.945312) "></path>
|
||||
<path d="M54.5351562,113.945312 L95.5351562,113.945312" id="Line-16" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(75.480469, 113.945312) rotate(-270.000000) translate(-75.480469, -113.945312) "></path>
|
||||
<path d="M341.535156,113.945312 L382.535156,113.945312" id="Line-19" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(362.480469, 113.945312) rotate(-270.000000) translate(-362.480469, -113.945312) "></path>
|
||||
<text id="offsetWidth-=-25+20+" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
|
||||
<tspan x="55.5" y="484" fill="#EE6B47">offsetWidth = </tspan>
|
||||
<tspan x="173.1" y="484" fill="#3B86C4">25+20+284+20+16+25 </tspan>
|
||||
<tspan x="332.7" y="484" fill="#F38158">=</tspan>
|
||||
<tspan x="341.1" y="484" fill="#3B86C4"> 390px</tspan>
|
||||
<tspan x="56.5" y="484" fill="#EE6B47">offsetWidth = </tspan>
|
||||
<tspan x="174.1" y="484" fill="#3B86C4">25+20+284+20+16+25 </tspan>
|
||||
<tspan x="333.7" y="484" fill="#F38158">=</tspan>
|
||||
<tspan x="342.1" y="484" fill="#3B86C4"> 390px</tspan>
|
||||
</text>
|
||||
<path d="M29.5,419 L29.5,497" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
|
||||
<path d="M418.5,419 L418.5,499" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
|
||||
<path id="Line-22" d="M46.0899963,462.070965 L402,462.070965 L402,456.070965 L416,463.070965 L402,470.070965 L402,464.070965 L46.0899963,464.070965 L46.0899963,470.070965 L32.0899963,463.070965 L46.0899963,456.070965 L46.0899963,462.070965 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<text id="offsetHeight:290px" transform="translate(482.500000, 280.500000) rotate(-90.000000) translate(-482.500000, -280.500000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
|
||||
<tspan x="406.9" y="285" fill="#EE6B47">offsetHeight:</tspan>
|
||||
<tspan x="516.1" y="285" fill="#3B86C4">290px</tspan>
|
||||
<path d="M30.5,419 L30.5,497" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
|
||||
<path d="M419.5,419 L419.5,499" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
|
||||
<path id="Line-22" d="M47.0899963,462.070965 L403,462.070965 L403,456.070965 L417,463.070965 L403,470.070965 L403,464.070965 L47.0899963,464.070965 L47.0899963,470.070965 L33.0899963,463.070965 L47.0899963,456.070965 L47.0899963,462.070965 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<text id="offsetHeight:290px" transform="translate(483.500000, 280.500000) rotate(-90.000000) translate(-483.500000, -280.500000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
|
||||
<tspan x="407.9" y="285" fill="#EE6B47">offsetHeight:</tspan>
|
||||
<tspan x="517.1" y="285" fill="#3B86C4">290px</tspan>
|
||||
</text>
|
||||
<path d="M416.5,131 L504.64193,131" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
|
||||
<path d="M416.5,420 L504.64193,420" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
|
||||
<path id="Line-26" d="M469,146.589996 L469,405.410004 L475,405.410004 L468,419.410004 L461,405.410004 L467,405.410004 L467,146.589996 L461,146.589996 L468,132.589996 L475,146.589996 L469,146.589996 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<path d="M417.5,131 L505.64193,131" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
|
||||
<path d="M417.5,420 L505.64193,420" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
|
||||
<path id="Line-26" d="M470,146.589996 L470,405.410004 L476,405.410004 L469,419.410004 L462,405.410004 L468,405.410004 L468,146.589996 L462,146.589996 L469,132.589996 L476,146.589996 L470,146.589996 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<text id="Introduction" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
|
||||
<tspan x="78" y="193">Introduction</tspan>
|
||||
<tspan x="178.726562" y="193" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
|
||||
<tspan x="78" y="221" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
|
||||
<tspan x="78" y="240" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
|
||||
<tspan x="78" y="259" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
|
||||
<tspan x="78" y="278" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
|
||||
<tspan x="78" y="297" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
|
||||
<tspan x="78" y="316" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
|
||||
<tspan x="78" y="335" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. It has appeared in all </tspan>
|
||||
<tspan x="78" y="354" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">subsequent browsers from Netscape and </tspan>
|
||||
<tspan x="78" y="373" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in all browsers from Microsoft starting with </tspan>
|
||||
<tspan x="79" y="193">Introduction</tspan>
|
||||
<tspan x="179.726562" y="193" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
|
||||
<tspan x="79" y="221" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
|
||||
<tspan x="79" y="240" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
|
||||
<tspan x="79" y="259" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
|
||||
<tspan x="79" y="278" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
|
||||
<tspan x="79" y="297" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
|
||||
<tspan x="79" y="316" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
|
||||
<tspan x="79" y="335" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. It has appeared in all </tspan>
|
||||
<tspan x="79" y="354" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">subsequent browsers from Netscape and </tspan>
|
||||
<tspan x="79" y="373" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in all browsers from Microsoft starting with </tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
BIN
figures.sketch
BIN
figures.sketch
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue