Document Object Model And Event Handling — Part 2 MCQs with Explanations

The Document object does not stand alone, however. It is the central object in a larger API, known as the Document Object Model, or DOM, for representing and manipulating document content.

The paragraph tag belongs to both html and body tags.

The node directly above a node is the parent of that node.

The Text and Comment is part of the CharacterData Element.

The nodes that represent HTML elements are Element nodes.

Both Text and Comment are basically strings of text, and these nodes are much like the Text nodes that represent the displaying text of a document.

he DOM defines a number of ways to select elements; you can query a document for an element or elements: 1. with a specified id attribute; 2. with a specified name attribute; 3. with the specified tag name; 4. with the specified CSS class or classes; or 5. matching the specified CSS selector

To select HTML elements based on the value of their name attributes, you can use the getElementsByName() method of the Document object: var radiobuttons = document . getElementsByName (" favorite_color ") ;

The documentElement property of the Document class refers to the root element of the document. This is always an HTML element.

Like getElementsByTagName() , getElementsByClassName() can be invoked on both HTML documents and HTML elements, and it returns a live NodeList containing all matching descendants of the document or element.

CSS stylesheets have a very powerful syntax, known as selectors, for describing elements or sets of elements within a document.

The above code snippet means that any span child of the element with id=”log”.

querySelectorAll() is the ultimate element selection method: it is a very powerful technique by which client-side JavaScript programs can select the document elements that they are going to manipulate.

Web applications based on jQuery use a portable, cross-browser equivalent to querySelectorAll() named $() .

The C in CSS stands for “cascading”. This term indicates that the style rules that apply to any given element in a document can come from a “cascade” of different sources.

The latest version of CSS is CSS3.

All of the above mentioned properties are shortcut properties. For example, the font-family, font-size, font-style, and font-weight properties can all be set at once using a single font property with a compound value: font : bold italic 24 pt helvetica;

static is the default value and specifies that the element is positioned according to the normal flow of document content (for most Western languages, this is left to right and top to bottom).

When the position property is set to relative, an element is laid out according to the normal flow, and its position is then adjusted relative to its position in the normal flow.

The fixed value allows you to specify an element’s position with respect to the browser window. Elements with fixed positioning are always visible and do not scroll with the rest of the document. Like absolutely positioned elements, fixed-position elements are independent of all others and are not part of the document flow.

The event type is a string that specifies what kind of event occurred) The type “mousemove”, for example, means that the user moved the mouse.

The event target is the object on which the event occurred or with which the event is associated. When we speak of an event, we must specify both the type and the target.

An event handler is in general, a function that handles or responds to an event.

When an event of the specified type occurs on the specified target, the browser invokes the handler.

All event objects have a type property that specifies the event type.

Event propagation is the process by which the browser decides which objects to trigger event handlers on.

Another form of event propogation, known as event capturing, handlers specially registered on container elements have the opportunity to intercept ( or “capture” ) events before they are delivered to their actual target.

These are events that are directly tied to a specific input device, such as the mouse or keyboard) They include legacy event types such as “mousedown”, “mousemove”, “mouseup”, “keydown”, “keypress”, and “keyup” and also new touch specific events like “touchmove” and “gesturechange”.

UI events are higher-level events, often on HTML form elements that define a user interface for a web application. They include the focus event (when a text input field gains keyboard focus), the change event when the user changes the value displayed by a form element, and the submit event when the user clicks a Submit button in a form.

These are input events that are not directly tied to a specific input device. The click event, for example, indicates that a link or button (or other document element) has been activated) This is often done via a mouse click, but it could also be done by keyboard or (on touch-sensitive devices) by gesture.

Some events are not triggered directly by user activity, but by network or browser activity, and indicate some kind of lifecycle or state-related change. The load event, fired on the Window object when the document is fully loaded, is probably the most commonly used of these events.

The HTML5 video and audio elements define a long list of associated event types such as “waiting”, “playing”, “seeking”, “volumechange”, and so on. These events are usually only of interest to web apps that want to define custom controls for video or audio playback.

Timers and error handlers are part of client-side JavaScript’s asynchronous programming model and are similar to events.

The submit and reset events have default actions that can be canceled by event handlers, and some click events do, too. The focus and blur events do not bubble, but all the other form events do.

Window events represent occurrences related to the browser window itself, rather than any specific document content displayed inside the window.

The load event is the most important of these events: it is fired when a document and all of its external resources (such as images) are fully loaded and displayed to the user.

DOMContentLoaded and readystatechange are alternatives to the load event: they are triggered sooner, when the document and its elements are ready to manipulate, but before external resources are fully loaded.

The unload event is the opposite of load: it is triggered when the user is navigating away from a document. An unload event handler might be used to save the user’s state, but it cannot be used to cancel navigation.

The onerror property of the Window object is something like an event handler, and it is triggered in response to JavaScript errors. It isn’t a true event handler, however, because it is invoked with different arguments.

Scroll events can also be fired on any scrollable document element, such as those with the CSS overflow property set.