jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Merge pull request #403 from brentguf/node-propertie

Browse source 
Node properties chapter
This commit is contained in:
Ilya Kantor 2018-03-31 21:43:48 +03:00 • committed by GitHub
commit ebc46fd727
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@ importance: 5
# What's in the nodeType? # What's in the nodeType?
What the script shows? What does the script show?
```html ```html
<html> <html>

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

@ -4,7 +4,7 @@ importance: 3
# Tag in comment # Tag in comment
What this code shows? What does this code show?
```html ```html
<script> <script>

2
2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md
View file

@ -4,7 +4,7 @@ importance: 4
# Where's the "document" in the hierarchy? # 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? What's its place in the DOM hierarchy?

24
2-ui/1-document/05-basic-dom-node-properties/article.md
View file

@ -76,7 +76,7 @@ Try it on `document.body`.
``` ```
````smart header="IDL in the spec" ````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. In IDL all properties are prepended with their types. For instance, `DOMString`, `boolean` and so on.
@ -163,11 +163,11 @@ Sure, the difference is reflected in their names, but is indeed a bit subtle.
- The `tagName` property exists only for `Element` nodes. - The `tagName` property exists only for `Element` nodes.
- The `nodeName` is defined for any `Node`: - The `nodeName` is defined for any `Node`:
- for elements it means the same as `tagName`. - 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. 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 ```html run
@ -175,7 +175,7 @@ For instance let's compare `tagName` and `nodeName` for the `document` and a com
<script> <script>
// for comment // for comment
alert( document.body.firstChild.tagName ); // undefined (not element) alert( document.body.firstChild.tagName ); // undefined (no element)
alert( document.body.firstChild.nodeName ); // #comment alert( document.body.firstChild.nodeName ); // #comment
// for document // for document
@ -218,7 +218,7 @@ The example shows the contents of `document.body` and then replaces it completel
</body> </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 ```html run
<body> <body>
@ -461,28 +461,28 @@ 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>. 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 ## 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: Main DOM node properties are:
`nodeType` `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` `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` `innerHTML`
: The HTML content of the element. Can modify. : The HTML content of the element. Can be modified.
`outerHTML` `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. : 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` `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` `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. : 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.
@ -490,6 +490,6 @@ Main DOM node properties are:
`hidden` `hidden`
: When set to `true`, does the same as CSS `display:none`. : 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. But HTML attributes and DOM properties are not always the same, as we'll see in the next chapter.