Scribd
Upload
222 views11 pages

Javascript Info Basic DOM Node-Properties

Uploaded by

Mark Dipad
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
222 views11 pages

Javascript Info Basic DOM Node-Properties

Uploaded by

Mark Dipad
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
Node properties: type, tag and contents Let's get a more in-depth look at DOM nodes. In this chapter we'll see more into what they are and learn their most used properties. DOM node classes Different DOM nodes may have different properties. For instance, an element node corresponding to tag has link-related properties, and the one corresponding to _ has input-related properties and so on. Text nodes are not the same as element nodes, But there are also common properties and methods between all of ‘them, because all classes of DOM nodes form a single hierarchy. Each DOM node belongs to the corresponding built-in class. The root of the hierarchy is EventTarget, that is inherited by Node, and other DOM nodes inherit from it. Here's the picture, explanations to follow Event Target Node = t = Fleeent elements, + HTMLBodyElement ~ the class for elements, + HTMLAnchorélement — the class for elements, + .and so on, There are many other tags with their own classes that may specific properties and methods, while some elements, such as , , do not have any specific properties, so they are instances of HTMLElenent class So, the full set of properties and methods of a given node comes as the result of the inheritance. For example, let's consider the DOM object for an element. it belongs to HTMLInputElement class, It gets properties and methods as a superposition of (listed in inheritance order): + HTMLInputElement ~ this class provides input-specific properties, + HINLELement — it provides common HTML element methods (and getters/setters), + Element — provides generic element methods, + Node — provides common DOM node properties, + EventTarget ~ gives the support for events (to be covered), + and finally it inherits from Object , so “plain object” methods like hasOwnProperty are also available. To see the DOM node class name, we can recall that an object usually has the constructor property. It references the class constructor, and constructor. name is its name: alert( [Link] ); // HTMLBodyElement Or we can just toString it: alert( [Link] ); // [object HTMLBodyElement] We also can use instanceof to check the inheritance: alert( [Link] instanceof HTMLBodyElement ); // true alert( document body instanceof HTMLElement ); // true alert( [Link] instanceof Element ); // true alert( [Link] instanceof Node ); // true alert( [Link] instanceof EventTarget ); // true ‘As we can see, DOM nodes are regular JavaScript objects. They use prototype-based classes for inheritance. That's also easy to see by outputting an element with [Link](elem) in a browser. There in the console you can see [Link], [Link] and so on. @ [Link](elem) versus console.1log(elem) Most browsers support two commands in their developer tools: [Link] and [Link] . They output their arguments to the console. For JavaScript objects these commands usually do the same. But for DOM elements they are different: + console. og(elem) shows the element DOM tree + [Link](elem) shows the element as a DOM object, good to explore its properties. Try iton document. body © wwein the spec In the specification, DOM classes aren't described by using JavaScript, but a special 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, Here's an excerpt from it, with comments: // Define HTMLInputElement 71 The colon ":" means that HTMLInputElement inherits from HTMLElement interface HTMLInputElement: HTMLElement { // here go properties and methods of elements // “DoMString" means that the value of a property is a string attribute DoMString accept; attribute DoMString alt; attribute DOMString autocomplete; attribute DoMString value; // boolean value property (true/false) attribute boolean autofocus; // now the method: "void" means that the method returns no value void select(); The “nodeType” property The nodeType property provides one more, “old-fashioned” way to get the “type” of a DOM node. It has a numeric value: 1 for element nodes, + [Link] + [Link] == 3 for text nodes, + [Link] == 9 for the document object, + there are few other values in the specification, For instance: In modem scripts, we can use instanceof and other class-based tests to see the node type, but sometimes nodeType may be simpler. We can only read nodeType , not change it. Tag: nodeName and tagName Given a DOM node, we can read its tag name from nodeName or tagName properties For instance: alert( document .[Link] ); // BODY alert( [Link] ); // BODY Is there any difference between tagName and nodeName ? 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. 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: // Headline! Martians attack people! alert([Link]) ; ‘As we can see, only text is returned, as if all were cut out, but the text in them remained, In practice, reading such text is rarely needed. Writing to textContent is much more useful, because i llows to write text the “safe way”. Let's say we have an arbitrary string, for instance entered by a user, and want to show it. With innerHTML we'll have it inserted “as HTML’, with all HTML tags. With textContent well have it inserted “as text, all symbols are treated literally. Compare the two:
4. The first
gets the name “as HTML": all tags become tags, so we see the bold name. 2 The second
gets the name “as text”, so we literally see Winnie-the-Pooh! In most cases, we expect the text from a user, and want to treat it as text. We don't want unexpected HTML in our site. An assignment to textContent does exactly that. The “ The *hidden' attribute and the DOM property specifies whether the element is visible or not. \den” property ‘We can use it in HTML or assign it using JavaScript, like this:
JavaScript assigned the property "hidden"
Technically, hidden works the same as style="display:none” . But it’s shorter to write Here's a blinking element (HTMLAnchorElement ). + id —the value of “id” attribute, for all elements (HTMLELement ). + .and much more. For instance: Most standard HTML attributes have the corresponding DOM property, and we can access it like that. If we want to know the full list of supported properties for @ given class, we can find them in the specification. For instance, HTMLInput€lement: is documented at [Link] spec [Link]/#htmlinputelement. Or if we'd like to get them fast or are interested in a concrete browser specification ~ we can always output the element using [Link](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 come as the result of inheritance. Main DOM node properties are: nodeType We can use it to see if a node is a text or an element node. It has a numeric value: 1 for elements, 3 for text nodes, and a few others for other node types. Read-only nodeName/tagname For elements, tag name (uppercased unless XML-mode). For non-element nodes nodeName describes what itis. Read-only. innerHT™L, The HTML content of the element. Can be modified, outerHT™L ‘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 be modified textContent The text inside the element: HTML minus all . 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 lass. For instance, elements (HTMLInputElement ) support value, type, while elements (HTMLANchorElement ) support href etc Most standard HTML attributes have a corresponding DOM property. However, HTML attributes and DOM properties are not always the same, as we'll see in the next chapter.

You might also like