Category: JavaScript Answers

To get the text node of an element with JavaScript, we can use the document.createNodeIterator method to iterate through all the text nodes.

For instance, if we have the following HTML:

<p>
  <br>some text<br>123
</p>

We can write:

let root = document.querySelector('p'),
  iter = document.createNodeIterator(root, NodeFilter.SHOW_TEXT),
  textnode;

while (textnode = iter.nextNode()) {
  console.log(textnode.textContent)
}

to select the p element with document.querySelector .

Then we create the iterator that returns the text nodes of the p element with document.createNodeIterator method.

We call it with the root element and NodeFilter.SHOW_TEXT specifies that it returns the text nodes.

Finally, we have the while loop that gets the text nodes from the iterator with the iter.nextNode method.

Then we see the text node values logged in the console log with the textnode.textContent property.

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.

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.

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.

To simulate a click by using x, y coordinates in JavaScript, we can call the document.elementFromPoint with the x and y coordinates to get the element at those coordinates.

Then we call click on the returned element to click it.

For instance, if we have the following HTML:

<div>
  hello world
</div>

Then we can click it by writing:

document.addEventListener('click', (e) => {
  console.log(e.target)
})

const x = 10
const y = 10
document.elementFromPoint(x, y).click();

We set the x and y values to get the element at that point.

Then we call click on it to click it.

Then in the click listener that we added with addEventListener , we should see the element that’s clicked.

We can also dispatch the click event by using the MouseEvent constructor.

For instance, we can write:

document.addEventListener('click', (e) => {
  console.log(e.target)
})

const x = 10
const y = 10

const click = (x, y) => {
  const ev = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true,
    'screenX': x,
    'screenY': y
  });
  const el = document.elementFromPoint(x, y);
  el.dispatchEvent(ev);
}
click(x, y)

We create the click function that clicks the element with coordinates x and y by using the MouseEvent constructor.

We pass in an object that sets the screenX and screenY to set the location of the click.

And then we get the element at the given x and y coordinates with document.elementFromPoint .

Finally, we call dispatchEvent on it with x and y to do the clicking.