Skip to main content

Attributes / Properties

Browser Document: Attributes / Properties

What happens to the HTML when the browser loads the page?​

View Answer:
Interview Response: When the browser loads the page, it parses the HTML and generates DOM objects.

Technical Response: When a page gets loaded, the browser "reads" (also known as "parses") the HTML and builds DOM objects from it. Most standard HTML characteristics for element nodes are automatically converted to DOM object properties. If the element is ‹body id="page"›, the DOM object contains body.id="page." The attribute-property mapping, however, is not one-to-one.

Can you modify or customize a DOM node?​

View Answer:
Interview Response: Because DOM nodes are ordinary JavaScript objects, we can modify them just like any other object. This object may change or add methods and attributes, as well as edit built-in prototypes such as Element.prototype and add new methods to all elements.

Code Example:

// Property Creation
document.body.myData = {
  name: 'Caesar',
  title: 'Imperator',
};

alert(document.body.myData.title); // Imperator

// Add new method
document.body.sayTagName = function () {
  alert(this.tagName);
};

document.body.sayTagName();
// BODY (the value of "this" in the method is document.body)

// Add new method to all Elements
Element.prototype.sayHi = function () {
  alert(`Hello, I'm ${this.tagName}`);
};

document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY
note

DOM properties and methods behave just like those of regular JavaScript objects. They can have any value and are case-sensitive (write elem.nodeType, not elem.NoDeTyPe).

Do different elements have different standard HTML attributes?​

View Answer:
Interview Response: Yes, We should note that a standard attribute for one element can be unknown for another. An example is the input element with a standard type attribute used to specify the input type.

Code Example:

<body id="body" type="...">
  <input id="input" type="text" />
  <script>
    alert(input.type); // text
    alert(body.type);
    // undefined: DOM property not created, because it is non-standard
  </script>
</body>
note

The "type" attribute is standard for ‹input› (HTMLInputElement), but not for ‹body› (HTMLBodyElement). Standard attributes are described in the specification for the corresponding element class. So, if an attribute is non-standard, there will not be a DOM-property for it.

What happens to non-standard attributes when the browser loads the page? Does it become a DOM property like standard element attributes?​

View Answer:
Interview Response: In HTML, tags may have attributes. When the browser parses the HTML to create DOM objects for tags, it recognizes standard attributes and creates DOM properties from them. In the case of non-standard attributes, DOM properties get created, and any invocation of those attributes returns undefined.

The attribute exists, but it does not get defined as DOM property, which inevitably returns undefined.

Code Example:

<body id="test" something="non-standard">
  <script>
    alert(document.body.id); // test
    // non-standard attribute does not yield a property
    alert(document.body.something); // undefined
  </script>
</body>

Is there a way to access non-standard HTML attributes?​

View Answer:
Interview Response: Yes, various JavaScript methods, such as hasAttribute, getAttribute, setAttribute, and removeAttribute, are used to access non-standard HTML attributes. These approaches work with precisely what is written in HTML. Additionally, elem.attributes may be used to read all attributes: a collection of objects that belong to the built-in Attr class, containing name and value properties.

Code Example:

<body something="non-standard">
  <script>
    alert(document.body.getAttribute('something')); // non-standard
  </script>
</body>

What are the two primary features of HTML attributes?​

View Answer:
Interview Response: All HTML attributes have two essential features. Their name is case-insensitive (id is the same as ID), and their values are always strings.

Code Example:

<body>
  <div id="elem" about="Elephant"></div>

  <script>
    alert(elem.getAttribute('About')); // (1) 'Elephant', reading

    elem.setAttribute('Test', 123); // (2), writing

    alert(elem.outerHTML); // (3), see if the attribute is in HTML (yes)

    for (let attr of elem.attributes) {
      // (4) list all
      alert(`${attr.name} = ${attr.value}`);
    }
  </script>
</body>
View Answer:
Interview Response: When a standard attribute changes, the corresponding property is auto-updated, and vice versa, but there are some exceptions to the rule. This behavior gets defined as property-attribute synchronization in JavaScript.

Code Example:

<input />

<script>
  let input = document.querySelector('input');

  // attribute => property
  input.setAttribute('id', 'id');
  alert(input.id); // id (updated)

  // property => attribute
  input.id = 'newId';
  alert(input.getAttribute('id')); // newId (updated)
</script>

Can you name one exception to the rule of property-attribute synchronization?​

View Answer:
Interview Response: One exclusion or exception is input.value can only synchronize from attribute to property, but not back. Changing the attribute value updates the property, but the property change does not affect the attribute.

Code Example:

<script>
  let input = document.querySelector('input');

  // attribute => property
  input.setAttribute('value', 'text');
  alert(input.value); // text

  // NOT property => attribute
  input.value = 'newValue';
  alert(input.getAttribute('value')); // text (not updated!)
</script>
note

That “feature” may come in handy because the user actions may lead to value changes, and then after them, if we want to recover the “original” value from HTML, it is in the attribute.

Are DOM properties always strings like HTML attributes?​

View Answer:
Interview Response: No, DOM properties are not always strings because they have property types. For instance, the input.checked property (for checkboxes) is a Boolean (either checked or not checked). There are other examples. The style attribute is a string, but the style property is an object. Most properties are strings, however.

Code Example:

<!-- CHECKBOX EXAMPLE -->
<input id="input" type="checkbox" checked />

<script>
  alert(input.getAttribute('checked')); // the attribute value is: empty string
  alert(input.checked); // the property value is: true
</script>

<!-- STYLE PROPERTY EXAMPLE -->
<div id="div" style="color:red;font-size:120%">Hello</div>

<script>
  // string
  alert(div.getAttribute('style')); // color:red;font-size:120%

  // object
  alert(div.style); // [object CSSStyleDeclaration]
  alert(div.style.color); // red
</script>

Can you describe a case for the use of non-standard attributes?​

View Answer:
Interview Response: We can use non-standard attributes to pass custom data from HTML to JavaScript or “mark” HTML elements for JavaScript.

Code Example:

<!-- mark the div to show "name" here -->
<div show-info="name"></div>
<!-- and age here -->
<div show-info="age"></div>

<script>
  // the code finds an element with the mark and shows what's requested
  let user = {
    name: 'Pete',
    age: 25,
  };

  for (let div of document.querySelectorAll('[show-info]')) {
    // insert the corresponding info into the field
    let field = div.getAttribute('show-info');
    div.innerHTML = user[field]; // first Pete into "name", then 25 into "age"
  }
</script>

Is it possible to style an element with non-standard HTML attributes?​

View Answer:
Interview Response: Yes, we can use non-standard HTML attributes to style our elements. This change may be accomplished by acting on an element's class or id and modifying the styles. This approach works for both inline and external style sheets, and this is a much better way to handle the style based on the state of our elements.

Code Example:

<style>
  /* styles rely on the custom attribute "order-state" */
  .order[order-state='new'] {
    color: green;
  }

  .order[order-state='pending'] {
    color: blue;
  }

  .order[order-state='canceled'] {
    color: red;
  }
</style>

<div class="order" order-state="new">A new order.</div>

<div class="order" order-state="pending">A pending order.</div>

<div class="order" order-state="canceled">A canceled order.</div>
warning

We should note that this is not exactly the recommended approach for implementing custom attributes in HTML.

Is there a way to avoid conflicts when creating custom attributes?​

View Answer:
Interview Response: Yes, we should prepend custom attributes with the “data-*” attribute to avoid conflicts in your code. All attributes starting with “data-” are reserved for programmers’ use and available in the dataset property. The main reason to use the data attribute is if the standard attribute specification is updated. You can avoid any conflicts in your code. Using data-* attributes is a proper, safe way to pass custom data.

Code Example:

<body data-about="Elephants">
  <script>
    alert(document.body.dataset.about); // Elephants
  </script>
</body>

Are multi-word attributes case sensitive in dataset properties?​

View Answer:
Interview Response: Yes, multi-word attributes are case-sensitive in dataset properties. We should use camel-cased styling when we are using dataset properties.

Code Example:

<style>
  .order[data-order-state='new'] {
    color: green;
  }

  .order[data-order-state='pending'] {
    color: blue;
  }

  .order[data-order-state='canceled'] {
    color: red;
  }
</style>

<div id="order" class="order" data-order-state="new">A new order.</div>

<script>
  // read
  alert(order.dataset.orderState); // new

  // modify
  order.dataset.orderState = 'pending'; // (*) camel case dataset property
</script>