Document Object Model (Javascript)

अब Quizwiz के साथ अपने होमवर्क और परीक्षाओं को एस करें!

Document Object Model, provides a way of manipulating

HTML and XML documents. (We call this "way of manipulating" things an Application Programming Interface, or API — but more on those later.)

The DOM provides a structural representation of the document in tree form, enabling you

to modify its content and visual presentation by using a scripting language such as JavaScript.

Block elements can be nested in a block element True False

true

Inline elements can be nested inside of another inline element True False

true

Common Listing events

other common events are change, 'keydown', 'keyup', 'load', 'mouseover', 'mouseout'

remove child element

removeChild() ul.removeChild(ul.querySelector('li:nth-child(2)'));

Which of the following tags contains the main content of a table? body tablebody thead tbody tfoot

tbody

common window commands

window.document; //returns the entire HTML document window.innerWidth; // returns the inner width of the browser window. window.innerHeight; // returns the inner height of the browser window.

insertAdjacentHTML

insert html attributes in the dom

Class Selectors

$('.pics'); Just like in CSS, we use a . to denote a class. This code is selecting any HTML elements with the class pics,

Last Selector Let's say you want to select the last div on the page. You could use the last selector to do that

$('div:last');

Let's say we want to select the first img tag inside each div. We could do that with the first child selector. You set up this selector:

$('parent-tag child-tag:first-child'); $('div img:first-child');

Descendant Selector Let's say we want to select all list items inside the ul tag. The li tags are descendants of the ul tag. We can use a descendant selector like this:

$('ul li');

where do you like the jQuery library from

(right above the </body> close tag)

Bubbling

(starting at the target node and moving up the DOM tree to the root) by default, events nowadays all bubble.

capturing

(starting from the target node's parent elements and propagating down the tree until it reaches the target)

Which of the following is an inline element: <p> <strong> <section>

<strong>

CSS selectors

A tag name (e.g. p or div) A class (e.g. .red) An ID (e.g. #something-specific)

ID Selectors

An ID selector works in much the same way as a class selector; you just replace the . with a #: $('#baby-ninja');

DOM

Document Object Model

Block elements can be nested inside of an inline element True False

False

stopPropagation

Like preventDefault, stopPropagation is a function that, when called, interrupts the event's normal behavior. In this case, it stops the event from triggering other nodes in the DOM that might be listening for the same event.

Document

The document object represents any web page loaded in the browser. The document contains all the nodes that represent the HTML elements of the page. We use the document object to traverse through the HTML and manipulate elements. There are many document properties that allow us to obtain information about the document programmatically.

addEventListener second argument

The second argument is a function that accepts the event as its argument. The event has a number of useful properties on it — keypress, keydown, and keyup events, for example, will have a which property that tells us which key was pressed. In the code snippet example below we add an event listener to the input element. const input = document.querySelector('input'); input.addEventListener('keydown', function(e) { console.log(e.which); });

All visible content in an HTML document is written inside of the <body> tag. True False

True

Inline elements can be nested inside of a block element True False

True

The display value of most DOM elements is either inline or block. T or F

True

EventListener

addEventListener() takes two arguments: the name of the event, and a function to handle the event. ex. const main = document.getElementById('main'); main.addEventListener('click', function(event) { alert('I was clicked!'); });

append element to an existing DOM node

appendChild() document.body.appendChild(element); body is what we are appending the element to

Document Ready

built-in way to determine when a page is loaded. $(document).ready(function() { // code to be executed goes here }); The $ is a shortcut for jQuery, and provides an interface to the library. Every time you see $, think jQuery.

Preventing the Default Behavior for DOM Nodes Example

const input = document.querySelector('input'); input.addEventListener('keydown', function(e) { if (e.which === 71) { console.log('default prevented'); return e.preventDefault(); } else { console.log('Not a "g"'); } });

CDN

content delivery network

create element in DOM

document.createElement() document.createElement(tagName), where tagName is the string representation of any valid HTML tag (e.g., 'p', 'div', 'span', etc.).

remove entire element from dom

element.remove() ul.remove();

JavaScript and DOM

we can (1) view a current representation of our Document Object Model. With JavaScript we can also (2) select specific portions of the DOM, and manipulate them, which changes what shows up in a browser window.

Which of the following selectors is the most specific: header #header .header.header-dark

#header

Alt Tag Selector Let's say we want to select an image that has a specific alt text. The second image on our page (The Beatles) has the alt text "the beatles making faces". We can use that text to find the image:

$("img[alt='the beatles making faces']");

Window

-The highest level of the DOM tree is the window object. Think of the window as the browser window. The window contains the entire DOM document. All components of your HTML file will be accessible from within the window. -The window object has a large number of properties that return information about the object. Below are a few examples

Document commands

document.all; // returns all the nodes inside the document object document.contentType; // returns the type of content contained. Most web pages should return "text/html" document.URL; // returns the URL of the document object

Selecting Elements We can select HTML elements in the document with JavaScript and jQuery:

document.getElementsByTagName("p"); //returns all p tags on a page // alternatively, we could do document.querySelectorAll('p'); --- it returns a NodeList (which, remember, is not an Array) of all matching elements. $("p"); document.getElementById() - IDs must be unique document.getElementsByClassName() -does not need to be unique document.getElementsByTagName()

to update the style of an element in the dom

element.style.textAlign = 'center';

set the element

ex. element.innerHTML = 'Hello, DOM!';

<span> elements have display: block by default True False

false

An element can have multiple ID's, separated by a space True False

false

An element can only have one class at a time True False

false


संबंधित स्टडी सेट्स

Baltic States and Border Nations

View Set

Texas Real Estate Finance - Chapter 4

View Set

PrepU (ch 38, 40, 41, 13, 15, 16)

View Set

Transfer of Title to Real Property

View Set

ART APPRECIATION - THREE-DIMENSIONAL MEDIA Unit Test Review (Introduction to Art)

View Set

Warrantless Searches and Seizures

View Set

ITIL Service Design Availability Management

View Set

CIE A Level: Control and Coordination

View Set