Document Object Model Introduction to Web Design Hocument html , - - PowerPoint PPT Presentation

▶
document object model introduction to web design
SMART_READER_LITE
LIVE PREVIEW

Document Object Model Introduction to Web Design Hocument html , - - PowerPoint PPT Presentation

Oct 12, 2022 441 likes •553 views

Document Object Model Introduction to Web Design Hocument html , head . titl, e ft exc r-; ext !t ext I ' ! text ! text l 1cxt Document Object Model Introduction to Web Design When a browser loads a web page, it creates a

slide-1
SLIDE 1

Hocument

html , ·head . titl, e

ft exc

'

r-; ext

I

!t ext ! text ! text l 1cxt

Introduction to Web Design Document Object Model

slide-2
SLIDE 2

Introduction to Web Design Document Object Model

When a browser loads a web page, it creates a model of that

Document Object Model

page. This is called a “DOM tree” and it is stored in the browser’s memory. Every element, attribute, and piece of text in the HTML is represented by its own “DOM node.”

slide-3
SLIDE 3

Introduction to Web Design Document Object Model Types of DOM Nodes

There are four main types of nodes.

  • The Document node, which represents the entire page
  • Element nodes, which represent individual HTML tags
  • Attribute nodes, which represent attributes of HTML tags,

such as a class

  • Text nodes, which represents the text within an element,

such as the content of a <p> tag We talk about the relationship between element nodes as “parents,” “children,” and “siblings.”

slide-4
SLIDE 4

Introduction to Web Design Document Object Model

<html> <head> <title>New York University</title> </head> <body> <h1>Intro to Web Design</h1> <p>In this course you will learn how to build websites.</p> <p>Class notes are available
 <a href="notes.html">here</a>.<p> </body> </html>

slide-5
SLIDE 5

html head title

New York University

body h1

Intro to Web Design

p

In this lecture-based course ...

p

Class notes are available

a

here

Introduction to Web Design Document Object Model

Adapted from Eloquent JavaScript: The Document Object Model

slide-6
SLIDE 6

,

html

  • -- head

..... title

..... New York University

,,,,..

  • ..
  • -- body
  • -- h1

...._ Intro to Web Design

  • ...
  • p
  • This course . . .

,,,,. ,,,,.

  • -- p
  • -- Class notes are ...

,.,,. ,,,,.

  • a

...._ here

,,,,.

,,,,. ...

  • Introduction to Web Design

Document Object Model

Adapted from Eloquent JavaScript: The Document Object Model

slide-7
SLIDE 7

Introduction to Web Design Document Object Model

JavaScript methods that find elements in the DOM tree are

DOM Queries

called “DOM queries.” DOM queries may return one element, or they may return a “node list.” Which DOM query you use depends on what you want to do and the scope of browser support required.

slide-8
SLIDE 8

Introduction to Web Design Document Object Model

Methods that return a single element node:

DOM Queries

  • getElementById()
  • querySelector()
slide-9
SLIDE 9

Introduction to Web Design Document Object Model

Methods that return one or more elements as a node list:

DOM Queries

  • getElementsByClassName()
  • getElementsByTagName()
  • querySelectorAll()