Lessons 139 & 140 – Complete 2020 Web Development Bootcamp

Lesson 139 – Text Manipulation and the Text Content Property

The textContent property is slightly different to the innerHTML property. The innerHTML property selects all of the html that is inside that elements tag. So if you select the example h1 element below using the innerHTML property, it will select all of the html contained in the h1 tag which will include the text as well as the <strong> tag.

<h1>This is a <strong>test</strong> paragraph.</h1>

Whereas, if you use the textContent property to select the same h1 element, it will only select the text and not the <strong> tag.

You can use the innerHTML property not only to change or add text but also to add html code. For example –

document.querySelector("h1").innerHTML = "<em>Good Bye</em>";

Lesson 140 – Manipulating HTML Attribute Elements

The following are some of the HTML attributes:

  • class;
  • href;
  • src.

You can get a list of the attributes which are attached to an element using –

document.querySelector("a").attributes;

You can get a specific attribute of an element by using this code to specify the attribute that you want.

document.querySelector("a").getAttribute("href");

To change an attribute, you use the setAttribute method. The setAttribute method takes two parameters. The first is the attribute that you want to change and the second is what you want to change it to.

document.querySelector("a").setAttribute("href", "https://www.bing.com");

The above setAttribute example selects the href attribute inside the <a> element and changes it to “https://www.bing.com”.

Lesson 143 – Challenge: The Dicee Challenge

This lesson is an explanation of the challenge.