Most elements on a webpage will have some attributes associated with them. An [a] tag for example will have a src attribute. Other elements may have attributes such as id, class, title, or style.

Once the browser parses your HTML code, a corresponding DOM node will be created. This node is an object, and therefore it has properties. In JavaScript we can change these properties, which are attributes for an HTML element. In other words, attributes refer to an HTML element, and properties refer to the Node Object of an HTML element.

For instance, this HTML element:

• < input type="text" value="Name:">

Selecting Elements

We know we can use getElement() and querySelector() to return an element, or querySelectorAll() to return multiple elements. For example, if we call document.querySelector('p'); on this webpage, it would return:

• < p>Colt Steele< /p>

However, if we call querySelectorAll('p'); on this page, it would return:

• NodeList(11) [p, p, p, p, p, p, p, p, p, p, p]

We can also call querySelectorAll('p')[x]; to list a specific element. if we call querySelectorAll('p')[5]; we will target the 4^th [p] tag (because it starts counting at 0) which you can then expand to see all of the individual properties for that [p] object.

getAttribute()

• - W3Schools getAttribute()
• - MDN getAttribute()

getAttribute() is another way of selecting an element. getAttribute() returns the value of a specified attribute of an element. If the given attribute does not exist, the value returned will either be null or "" (an empty string).

Example: if we have the following HTML code,

• < div id="div1">Hi Champ!< /div>

• const divAttr = document.getElementById("div1");
• console.log(divAttr);

• < div id="div1">Hi Champ!< /div>

and then if we console.log(divAttr.getAttribute("id")); we get:

• div1

and finally, if we console.log(divAttr.getAttribute("align")); this will return

• null

*note: You can also list a property's current value by console logging .(period)(property). For example:

• console.log(document.querySelectorAll('img')[2].src);

The difference between using an object property directly and using getAttribute()

• using an object property directly would be:
  • document.querySelector('a').href;
    • this is a JavaScript reference to the href property and would return
      • file://linkToFile   (or)
      • https://linkToFile
• whereas using getAttribute() would be:
  • document.querySelector('a').getAttribute('href');
    • this is a reference to the href value and would return
      • linkToFile   (the text of the link path only)

Manipulating Properties

Now comes the interesting part. So we can use:

• getElementById('#id name');
• getElementsByTagName('HTML tag')[specific HTML tag item];
• getElementsByClassName('.class name')[specific class item];
• querySelectorAll('HTML tag')[specific HTML tag];
• getAttribute();   // could be an HTML tag, .class, or #id

For which ever method we use to target an HTML element, we can look in the console to see ALL of it's DOM Object properties, such as class, id, innerText, src, and many others. We can then target any one of these properties, by referencing it's label in the DOM properties and attaching it to the end of a selection call (preceded by a . period).

For example, if we have a webpage with some [img] tags, we could target a single tag like so:

• document.querySelector('img')[2];

• querySelectorAll('img')[2].src = 'new image source';

setAttribute()

setAttribute() is another way of changing an existing HTML element's DOM Object properties. So we could modify the src for our image tag, with setAttribute(), like so:

• document.querySelectorAll('img')[2].setAttribute('src', 'new image source');