DOM Manipulation

I'm was feeling pretty good about creating the Item List App above completely from scratch, based on this Traversy Media video. However, once I got working on it I realized as is so often the case, that there are situations that arise that really make me think about what methods and properties are the best tools for the current job, but also just what exactly the objective is in the first place.

For example, the video uses the Document.createTextNode() method, which I've never used before. But more importantly, I didn't sort of hone in on that as I watched and have an "Ah-ha!" moment and realize why it's being used. I don't think it caused a problem necessarily, I just think it would better serve me to be more aware when these situations arise, hopefully to avoid problems down the line.

A quick search finds that there appears to be two basic ways to create nodes in JS, so I assume there's a way to create the same text nodes using textContent.

Another example is when I was working on the filter function below. At a certain point I think I just lost sight of the basic idea of what I was doing: comparing the text input of the search field with the text content of the list items themselves.

Filter Items Function

Objective: loop through all the items, including the newly added ones, and compare them to the text that the user inputs in the search field so I can either display exact matches (case insensitive) or hide (using CSS) items that don't match.

First, save a reference of the search field in a variable and bind an event listener to run a filterItem function on keyup.

Since I already have a variable for the unordered list, I decided to use the children property of the Element Web API to target its list items and then run a loop over those in order to match them to the user input search field. I do try to vary things a bit when I see an opportunity to use an alternative method of solving the problem. And hopefully that helps solidify some additional concepts moving forward.

HTMLCollections and Arrays

Button One Button Two Button Three Button Four

I'm fairly comfortable and familiar with selecting elements with the variations of querySelector and getElement* selectors among a few others.

I have much less practice traversing the DOM, although it doesn't confuse me too much so far (thankfully). That said, I think it could get confusing quickly as JavaScript Web APIs both inherit as well as are based on other object classes which can, from what I understand based on readings, often be used interchangeably. No doubt practice will show which ones work best under certain circumstances.

Use Window.getComputerStyle() to get the values of all CSS properties for an element.

Web API Notes

Track the mouse position while hovering over the grey rectangle.

• Event
  • MDN's Event Reference page. Access the event object by passing it as an argument
  • target property
  • type property
• Element

  The Element API has a list of various events for binding.

  • id property can be used to get id from an element when chained onto the event target property and anytime I have access to an element object.
  • classList returns a live DOMTokenList.
    • DOMTokenList is an API that I haven't read much about yet. It can be accessed with bracket notation. There appear to be many helpful methods to use on it and can be looped over using .foreach().
    • Is this where value property comes from when accessing node values?
    • Poking around the event, I found an API called, NamedNodeMap.
    • There's MouseEvent.clientX of the MouseEvent interface. See offsetX for coordinates on event target versus window. A good way to remember is that client is the browser and offset represents the Window interface.
• HTMLInputElement

  Putting this here for a reference. Although this is specifically for the input element, there seems to be at least several like this where I can access properties through a more specific API.

The 14 Must Know DOM Manipulation Techniques

That is, according to Web Dev Simplified.

Adding Elements to Page

Appending elements

• append: multiple strings and nodes (elements)
• appendChild: only single node (elements)

Adding Text

• innerText: returns what is displayed inside HTML (follows CSS styles).
• textContent: copies directly from HTML.
• innerHTML: huge security problem. Only way to add HTML from a string.

Deleting Elements from DOM

• Element API remove()
• Node API removeChild()

Properties, Classes, Data Attributes

• getAttribute(attributeName) string
• Can also use properties of Element API such as .id, .title, .className, etc.
• span.id = 'idName'
• setAttribute()
• removeAttribute()

Web Dev Simplified Blog: Data Attributes

• HTMLElement.dataset provides access to custom data attributes (data-*) on elements.
  • Value is a DOMStringMap (a map of strings)
  • Inspect this list item for an example of a data-set attribute.
  • See the end of dom-manipulation.js for examples of how to access individual dataset properties as well as looping with for...in.
  • dataAttr.dataset.newName = 'new-name';

Working with classes: classList add, remove, toggle, replace

Working w HTMLElement.style property.