Nodes, Elements, and Interfaces...Oh My!

TheNodeInterface

QUESTION 1 OF 4

Put these in the correct order of operation.

DOM

tag

token

nodes

ORDER

ITEM

happens first

happens second

happens third

happens fourth

SUBMIT

We looked at this in an earlier section, but let's take one more quick look at what Illya said about how the DOM is constructed.

So to reiterate the process, it's:

  • characters
  • tags
  • tokens
  • nodes
  • DOM

But what_is_a "node", exactly?

⚠️ Interface vs User Interface ⚠️

The word "interface" might be an unclear word right now, and that's ok. I do want to make sure that you're not connecting this "interface" with auser interface(UI) or a graphical user interface (GUI).

Our use of "interface" face is not related to the either a UI or a GUI. Our use of "interface" is a technical, computer science word for a list of properties and methods that are inherited.

Node (with a capital "N"!) is a blueprint that contains information about all of the properties and methods for real nodes (with a lowercase "n"!). If you're not used to them, the words "interface", "property", and "method" can be kind of cryptic at first. Just remember that:

  • interface = blueprint
  • properties = data
  • methods = functionality

Let's check out Node on MDN:Node Interface on MDN

So the Node Interface is a blueprint for all of the properties (data) and methods (functionality) that every real node has after it's been created. Now, the Node Interface has a lot of properties and methods, but it's not veryspecific...I mean, what_is_a node???

Just like "blueprint for a Building" is not as specific as "blueprint for a house" or "blueprint for a skyscraper". These are more-specific blueprints. And these more-specific blueprints would probably have their own properties and methods that are specific to_just_houses or_just_skyscrapers.

This brings us to the "Element Interface".

Element Interface

Just like the Node Interface, the Element Interface is a blueprint for creating elements:Element Interface on MDN

One really important thing about the Element Interface is that it is a descendent of the Node Interface.

Element points to its parent, Node.

Since Element is pointing at Node, this indicates that the Element Interface inherits all of the Node Interface's properties and methods. This means that any element (lowercase "e"!) that was created from the Element Interface is_also_a descendent from the Node Interface...which means the element (lowercase "e"!) is also a node (lowercase "n"!).

Let's do a little digging around on an element!

QUESTION 2 OF 4

Does the.outerHTMLproperty come from the Node Interface or the Element Interface? Check all that apply.

  • Node Interface

  • Element Interface

  • neither

SUBMIT B

QUESTION 3 OF 4

Which interface does the.idproperty come from?

  • Node Interface

  • Element Interface

  • neither

SUBMIT B

QUESTION 4 OF 4

Which interface does the.textContentproperty come from?

  • Node Interface

  • Element Interface

  • neither

SUBMIT A

Do you remember the.getElementsByClassName()method on thedocumentobject that we looked at previously? While reviewing the Element interface, you might've noticed that it_also_has a.getElementsByClassName()method! The Element Interface inherits from the Node Interface, not the Document Interface (yep, there's a Document Interface!). The Element Interface has its own.getElementsByClassName()that does the exact same thing as the one on thedocumentobject.

This means that you can use thedocumentobject to select an element,_then_you can call.getElementsByClassName()on that element to receive a list of elements with the class name that are descendents of that specific element!

// selects the DOM element with an ID of "sidebar"
const sidebarElement = document.getElementById('sidebar');

// searches within the "sidebar" element for any elements with a class of "sub-heading"
const subHeadingList = sidebarElement.getElementsByClassName('sub-heading');

To check out all of the different interfaces, check here:Web API Interfaces

Recap

Hopefully this was an enlightening lesson on a number of fronts! You learned about interfaces, properties, and methods; an interface is like a blueprint, properties are like bits of information or data, and methods are functionality.

We also looked at a couple of specific interfaces:

  • Node Interface
  • Element Interface

We saw that both of these interfaces have properties and methods. We also saw how the Element Interface inherits all of the properties and methods from the Node interface.

Further Research

results matching ""

    No results matching ""