Merge pull request #403 from brentguf/node-propertie

iliakan · web-flow · commit ebc46fd727e4 · 2018-03-31T21:43:48.000+03:00
Node properties chapter
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md
@@ -4,7 +4,7 @@ importance: 5
 
 # What's in the nodeType?
 
-What the script shows?
+What does the script show?
 
 ```html
 <html>
diff --git a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md
@@ -4,7 +4,7 @@ importance: 3
 
 # Tag in comment
 
-What this code shows?
+What does this code show?
 
 ```html
 <script>
diff --git a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md
@@ -4,7 +4,7 @@ importance: 4
 
 # Where's the "document" in the hierarchy?
 
-Which class the `document` belongs to?
+Which class does the `document` belong to?
 
 What's its place in the DOM hierarchy?
 
diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md
@@ -76,7 +76,7 @@ Try it on `document.body`.
 ```
 
 ````smart header="IDL in the spec"
-In the specification classes are described using not JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand.
+In the specification, classes are described not using JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand.
 
 In IDL all properties are prepended with their types. For instance, `DOMString`, `boolean` and so on.
 
@@ -163,19 +163,19 @@ Sure, the difference is reflected in their names, but is indeed a bit subtle.
 - The `tagName` property exists only for `Element` nodes.
 - The `nodeName` is defined for any `Node`:
     - for elements it means the same as `tagName`.
-    - for other node types (text, comment etc) it has a string with the node type.
+    - for other node types (text, comment, etc.) it has a string with the node type.
 
 In other words, `tagName` is only supported by element nodes (as it originates from `Element` class), while `nodeName` can say something about other node types.
 
-For instance let's compare `tagName` and `nodeName` for the `document` and a comment node:
+For instance, let's compare `tagName` and `nodeName` for the `document` and a comment node:
 
 
 ```html run
 <body><!-- comment -->
 
   <script>
     // for comment
-    alert( document.body.firstChild.tagName ); // undefined (not element)
+    alert( document.body.firstChild.tagName ); // undefined (no element)
     alert( document.body.firstChild.nodeName ); // #comment
 
     // for document
@@ -218,7 +218,7 @@ The example shows the contents of `document.body` and then replaces it completel
 </body>
 ```
 
-We can try to insert an invalid HTML, the browser will fix our errors:
+We can try to insert invalid HTML, the browser will fix our errors:
 
 ```html run
 <body>
@@ -461,35 +461,35 @@ Most standard HTML attributes have the corresponding DOM property, and we can ac
 
 If we want to know the full list of supported properties for a given class, we can find them in the specification. For instance, HTMLInputElement is documented at <https://html.spec.whatwg.org/#htmlinputelement>.
 
-Or if we'd like to get them fast or interested in the concrete browser -- we can always output the element using `console.dir(elem)` and read the properties. Or explore "DOM properties" in Elements tab of the browser developer tools.
+Or if we'd like to get them fast or are interested in a concrete browser specification -- we can always output the element using `console.dir(elem)` and read the properties. Or explore "DOM properties" in the Elements tab of the browser developer tools.
 
 ## Summary
 
-Each DOM node belongs to a certain class. The classes form a hierarchy. The full set of properties and methods comes as the result of inheritance.
+Each DOM node belongs to a certain class. The classes form a hierarchy. The full set of properties and methods come as the result of inheritance.
 
 Main DOM node properties are:
 
 `nodeType`
-: Node type. We can get it from the DOM object class, but often we need just to see if it is a text or element node. The `nodeType` property is good for that. It has numeric values, most important are: `1` -- for elements,`3` -- for text nodes. Read-only.
+: We can get `nodeType` from the DOM object class, but often we need just to see if it is a text or element node. The `nodeType` property is good for that. It has numeric values, most important are: `1` -- for elements,`3` -- for text nodes. Read-only.
 
 `nodeName/tagName`
-: For elements, tag name (uppercased unless XML-mode). For non-element nodes `nodeName` describes what is it. Read-only.
+: For elements, tag name (uppercased unless XML-mode). For non-element nodes `nodeName` describes what it is. Read-only.
 
 `innerHTML`
-: The HTML content of the element. Can modify.
+: The HTML content of the element. Can be modified.
 
 `outerHTML`
 : The full HTML of the element. A write operation into `elem.outerHTML` does not touch `elem` itself. Instead it gets replaced with the new HTML in the outer context.
 
 `nodeValue/data`
-: The content of a non-element node (text, comment). These two are almost the same, usually we use `data`. Can modify.
+: The content of a non-element node (text, comment). These two are almost the same, usually we use `data`. Can be modified.
 
 `textContent`
 : The text inside the element, basically HTML minus all `<tags>`. Writing into it puts the text inside the element, with all special characters and tags treated exactly as text. Can safely insert user-generated text and protect from unwanted HTML insertions.
 
 `hidden`
 : When set to `true`, does the same as CSS `display:none`.
 
-DOM nodes also have other properties depending on their class. For instance, `<input>` elements (`HTMLInputElement`) support `value`, `type`, while `<a>` elements (`HTMLAnchorElement`) support `href` etc. Most standard HTML attributes have the corresponding DOM property.
+DOM nodes also have other properties depending on their class. For instance, `<input>` elements (`HTMLInputElement`) support `value`, `type`, while `<a>` elements (`HTMLAnchorElement`) support `href` etc. Most standard HTML attributes have a corresponding DOM property.
 
 But HTML attributes and DOM properties are not always the same, as we'll see in the next chapter.
