up

Author: iliakan

2-ui/1-document/2-dom-nodes/domconsole1@2x.png

@@ -1,4 +1,4 @@
-# Searching: getElement*, querySelector* and others
+# Searching with getElement*, querySelector* and others
 
 DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the page?
 
@@ -111,7 +111,7 @@ Another widespread novice mistake is to write like:
 document.getElementsByTagName('input').value = 5;
 ```
 
-That won't work, because we take a *collection* of inputs and assign the value to it, rather to elements inside it.
+That won't work, because it takes a *collection* of inputs and assigns the value to it, rather to elements inside it.
 
 We should either iterate over the collection or get an element by the number, and then assign, like this:
 
@@ -121,7 +121,7 @@ document.getElementsByTagName('input')[0].value = 5;
 ```
 ````
 
-Other methods:
+There are also other rarely used methods of this kind:
 
 - `document.getElementsByName(name)` returns elements with the given `name` attribute. Rarely used.
 - `elem.getElementsByClassName(className)` returns elements that have the given CSS class. Elements may have other classes too.
@@ -179,7 +179,7 @@ Pseudo-classes in the CSS selector like `:hover` and `:active` are also supporte
 
 The call to `elem.querySelector(css)` returns the first element for the given CSS selector.
 
-In other words, the result is the same as `elem.querySelectorAll(css)[0]`, but that's looking for *all* elements and picking the first, much slower than only looking for the first one.
+In other words, the result is the same as `elem.querySelectorAll(css)[0]`, but the latter is looking for *all* elements and picking one, while `elem.querySelector` just looks for one. So it's faster.
 
 ## matches
 
@@ -241,9 +241,11 @@ For instance:
 
 ## Live collections
 
-All methods `getElementsBy*` return a *live* collection. They always reflect the current state of the document.
+All methods `"getElementsBy*"` return a *live* collection. Such collections always reflect the current state of the document.
 
-For instance, here in the first script the length is `1`, because the browser only processed the first div. Then later it's 2:
+For instance, here in the first script the length is `1`, because the browser only processed the first div.
+
+Then later after the second `div` it's 2:
 
 ```html run
 <div>First div</div>
@@ -284,6 +286,10 @@ If we use it instead, then both scripts output `1`:
 </script>
 ```
 
+Now we can easily see the difference. The static collection did not increase after the appearance of a new `div` in the document.
+
+Here we used separate scripts to illustrate how the element addition affects the collection. Soon we'll see more ways to alter DOM.
+
 ## Summary
 
 There are 6 main methods to search for nodes in DOM:
@@ -292,8 +298,8 @@ There are 6 main methods to search for nodes in DOM:
 <thead>
 <tr>
 <td>Method</td>
-<td>Finds by...</td>
-<td>Can call on element?</td>
+<td>Searches by...</td>
+<td>Can call on an element?</td>
 <td>Live?</td>
 </tr>
 </thead>
@@ -337,9 +343,11 @@ There are 6 main methods to search for nodes in DOM:
 </tbody>
 </table>
 
-Please note that methods `getElementById` and `getElementsByName` can only be called in the context of the document: `document.getElementById(...)`. Other methods can be called on elements, like `elem.querySelectorAll(...)` -- and will search in their subtrees.
+Please note that methods `getElementById` and `getElementsByName` can only be called in the context of the document: `document.getElementById(...)`. But not on an element: `elem.getElementById(...)` would cause an error.
+
+Other methods can be called on elements too. For instance `elem.querySelectorAll(...)` will search inside `elem` (in the DOM subtree).
 
-Besides:
+Besides that:
 
 - There is `elem.matches(css)` to check if `elem` matches the given CSS selector.
 - There is `elem.closest(css)` to look for a nearest ancestor that matches the given CSS-selector. The `elem` itself is also checked.

2-ui/1-document/5-searching-elements-dom/article.md

@@ -0,0 +1,17 @@
+There's a catch here.
+
+At the time of `<script>` execution the last DOM node is exactly `<script>`, because the browser did not process the rest of the page yet.
+
+So the result is `1` (element node).
+
+```html run height=60
+<html>
+
+<body>
+  <script>
+    alert(document.body.lastChild.nodeType);
+  </script>
+</body>
+
+</html>
+```

2-ui/1-document/6-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md

@@ -0,0 +1,19 @@
+importance: 5
+
+---
+
+# What's in the nodeType?
+
+What the script shows?
+
+```html
+<html>
+
+<body>
+  <script>
+    alert(document.body.lastChild.nodeType);
+  </script>
+</body>
+
+</html>
+```

2-ui/1-document/6-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md

@@ -0,0 +1,17 @@
+The answer: **`BODY`**.
+
+```html run
+<script>
+  let body = document.body;
+
+  body.innerHTML = "<!--" + body.tagName + "-->";
+
+  alert( body.firstChild.data ); // BODY
+</script>
+```
+
+What's going on step by step:
+
+1. The content of `<body>` is replaced with the comment. The comment is <code>&lt;!--BODY--&gt;</code>, because `body.tagName == "BODY"`. As we remember, `tagName` is always uppercase in HTML.
+2. The comment is now the only child node, so we get it in `body.firstChild`.
+3. The `data` property of the comment is its contents (inside `<!--...-->`): `"BODY"`.

2-ui/1-document/6-basic-dom-node-properties/3-tag-in-comment/solution.md

@@ -0,0 +1,17 @@
+importance: 3
+
+---
+
+# Tag in comment
+
+What this code shows?
+
+```html
+<script>
+  let body = document.body;
+
+  body.innerHTML = "<!--" + body.tagName + "-->";
+
+  alert( body.firstChild.data ); // what's here?
+</script>
+```

2-ui/1-document/6-basic-dom-node-properties/3-tag-in-comment/task.md

@@ -0,0 +1,38 @@
+
+We can see which class it belongs by outputting it, like:
+
+```js run
+alert(document); // [object HTMLDocument]
+```
+
+Or:
+
+```js run
+alert(document.constructor.name); // HTMLDocument
+```
+
+So, `document` is an instance of `HTMLDocument` class.
+
+What's its place in the hierarchy?
+
+Yeah, we could browse the specification, but it would be faster to figure out manually.
+
+Let's traverse the prototype chain via `__proto__`.
+
+As we know, methods of a class are in the `prototype` of the constructor. For instance, `HTMLDocument.prototype` has methods for documents.
+
+Also, there's a reference to the constructor function inside the `prototype`:
+
+```js run
+alert(HTMLDocument.prototype.constructor === HTMLDocument); // true
+```
+
+For built-in classes in all prototypes there's a `constructor` reference, and we can get `constructor.name` to see the name of the class. Let's do it for all objects in the `document` prototype chain:
+
+```js run
+alert(HTMLDocument.prototype.constructor.name); // HTMLDocument
+alert(HTMLDocument.prototype.__proto__.constructor.name); // Document
+alert(HTMLDocument.prototype.__proto__.__proto__.constructor.name); // Node
+```
+
+We also could examine the object using `console.dir(document)` and see these names by opening `__proto__`. The console takes them from `constructor` internally.

2-ui/1-document/6-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md

@@ -0,0 +1,11 @@
+importance: 4
+
+---
+
+# Where's the "document" in the hierarchy?
+
+Which class the `document` belongs to?
+
+What's its place in the DOM hierarchy?
+
+Does it inherit from `Node` or `Element`?