Category: JavaScript Answers

Sometimes, we want to add or update an element’s attribute with JavaScript.

In this article, we’ll look at how to add or update an element’s attribute with JavaScript.

Use the setAttribute Method

One way to add or update an attribute is to use the setAttribute method.

For instance, we can write:

<div>  
  hello world  
</div>

And:

const d = document.querySelector('div');  
d.setAttribute('style', 'color: red')

to set the text color of the div to red.

We call setAttribute with 'style' and 'color: red' to add the style attribute with the value in the 2nd argument.

Use Set the Property of the Element

We can also set the property with the attribute name to add an attribute.

For instance, we can write:

<div>  
  hello world  
</div>

And:

const d = document.querySelector('div');  
d.style = 'color: red'

Then we set the style attribute with the ‘color: red’ string.

Conclusion

One way to add or update an attribute is to use the setAttribute method.

Also, we can also set the property with the attribute name to add an attribute.

Sometimes, we want to search for the immediate children of an element returned by querySelector with JavaScript.

In this article, we’ll look at how to search for the immediate children of an element returned by querySelector with JavaScript.

Search for the Immediate Children of an Element Returned by querySelector

To search for the immediate children of an element returned by document.querySelector , we can use the :scope pseudoselector.

For instance, if we have the following HTML:

<div>  
  <p>  
    hello world  
  </p>  
</div>

Then we can get the p element given the div by writing:

const getChild = (elem) => {  
  return elem.querySelectorAll(':scope > p');  
};  
const div = document.querySelector('div')  
console.log(getChild(div))

We define the getChild function that calls elem.querySelectorAll to get all the p elements that are the immediate child of the given elem .

Then we get the div with querySelector and assign it to div .

And then we call getChild with div to get the p element in the div in a Nodelist.

Conclusion

To search for the immediate children of an element returned by document.querySelector , we can use the :scope pseudoselector.

Sometimes, we want to fill the whole canvas with a specific color in JavaScript.

In this article, we’ll look at how to fill the whole canvas with a specific color in JavaScript.

Fill the Whole Canvas with a Specific Color in JavaScript

To fill the whole canvas with a specific color in JavaScript, we can set the glovalCompositionOperation property of the canvas context to 'destination-cover' .

Then we can set the fillStyle to the color we want to fill the canvas with.

For instance, we can write:

<canvas width='300' height='300'></canvas>

to add the canvas.

Then we write:

const canvas = document.querySelector("canvas");  
const ctx = canvas.getContext("2d");  
ctx.globalCompositeOperation = 'destination-over'  
ctx.fillStyle = "blue";  
ctx.fillRect(0, 0, canvas.width, canvas.height);

We get the canvas with document.querySelector .

Then we get the context with getContext .

Then we set the glovalCompositionOperation property of the canvas context to 'destination-cover' to add the color behind other elements.

Next, we set fillStyle to 'blue' to make the canvas blue.

And then we call fillRect to add the fill color to the canvas.

Conclusion

To fill the whole canvas with a specific color in JavaScript, we can set the glovalCompositionOperation property of the canvas context to 'destination-cover' .

Then we can set the fillStyle to the color we want to fill the canvas with.

Sometimes, we want to use querySelector with IDs that are numbers in JavaScript.

In this article, we’ll look at how to use querySelector with IDs that are numbers in JavaScript.

Use querySelector with IDs that are Numbers in JavaScript

To use querySelector with IDs that are numbers in JavaScript, we have to escape the unicode code point representation of the number.

For instance, we can write:

<div id='1'>
  hello world
</div>

Then we write:

const el = document.querySelector('#\\31');
console.log(el)

to select the div with ID 1.

U+0031 is the Unicode code point of the character 1, so we pass in \31 , which is the escaped version of the Unicode code point representation of 1.

el should be the div with ID 1 as a result.

Conclusion

To use querySelector with IDs that are numbers in JavaScript, we have to escape the unicode code point representation of the number.

Sometimes, we want to listen for text highlight in an HTML element with JavaScript.

In this article, we’ll look at how to listen for text highlight in an HTML element with JavaScript.

Listen for Text Highlight in an HTML Element with JavaScript

To listen for text highlight in an HTML element with JavaScript, we can listen to the selectionchange event.

For instance, if we have the following div:

<div>  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus aliquam iaculis. Pellentesque interdum elit sapien, quis interdum enim laoreet sed. Mauris varius magna ac dapibus molestie. Sed porttitor sapien eget ipsum aliquet, lacinia venenatis lacus finibus. Phasellus in nibh mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed placerat tristique augue, id lacinia massa iaculis eu. Donec sed vestibulum odio. Fusce sit amet congue odio, eu consequat neque. Sed sed mauris id sem malesuada blandit eu at quam.  
</div>

Then we can write:

document.addEventListener("selectionchange", event => {  
  const selection = document.getSelection ? document.getSelection().toString() : document.selection.createRange().toString();  
  console.log(selection);  
})

to listen to the selectionchange event on document , which means we pick up all text selection changes on the page.

In the event handler, we call getSelection to get the text selection if it exists.

Otherwise, we call document.selection.createRange().toString() to get the text selection.

Conclusion

To listen for text highlight in an HTML element with JavaScript, we can listen to the selectionchange event.