Strategies for pinpointing specific Elements within the Document Object Model

Question

Strategies for pinpointing specific Elements within the Document Object Model

<html>
</head>
<body>
<div class="class1">
<p>text to update1</p>
<p>text to update2</p>
<p> </p>
</div>

<div class="class2">
<p>text to update1</p>
<p>text to update2</p>
<p> </p>
</div>

<button onclick="obj1.changeContent()">changeContent</button>

<script type="text/javascript">
var change= function()
{
}
change.prototype.changeContent=function()
{
// target specific element positions
var paragraph=document.getElementsByClassName("class1");
paragraph[0].innerHTML="hello";
paragraph[1].innerHTML="world";
var addthem = paragraph[2].innerHTML = second;

}

var obj1= new change;

</script>

</body>

When attempting the above process, I encountered an issue:

Uncaught TypeError: Cannot set property 'innerHTML' of undefined

This error occurs when trying to modify the innerHTML property of the second paragraph [1] element in the first class (Class1). How should I progress from here?

javascript dom

Answer 1

Answer №1

When reviewing your code, one key point to note is that after selecting the `.class1' elements you forgot to include [0].children. It's also important to remember that this will return a NodeList of matched elements rather than individual elements.

If you are familiar with jQuery, it might seem like chaining DOM methods to the NodeList is possible in native JavaScript, but unfortunately, it is not.

var change = function(){}

change.prototype.changehtml = function(){
  // targeting specific elements positions

  // okay selector 
  // var paragraphs = document.getElementsByClassName("class1")[0].children;
  // okayer selector
  // var paragraphs = document.getElementsByClassName('class1')[0].getElementsByTagName('p')

  // better more explicit selector  
  var paragraphs = document.querySelectorAll('.class1 > p');
  console.log( paragraphs )
  
  paragraphs[0].innerHTML="hello";
  paragraphs[1].innerHTML="hello1";
  
  // second is not defined
  var addthem = (paragraphs[2].innerHTML = second);

}

var obj1= new change;

<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>
<div class="class1">
<p>text to change1</p>
<p>text to change2</p>
<p> </p>
</div>

<div class="class2">
<p>text to change1</p>
<p>text to change2</p>
<p> </p>
</div>

<button onclick="obj1.changehtml()">changehtml</button>

Answer 2

When reviewing your code, one key point to note is that after selecting the `.class1' elements you forgot to include [0].children. It's also important to remember that this will return a NodeList of matched elements rather than individual elements.

If you are familiar with jQuery, it might seem like chaining DOM methods to the NodeList is possible in native JavaScript, but unfortunately, it is not.

var change = function(){}

change.prototype.changehtml = function(){
  // targeting specific elements positions

  // okay selector 
  // var paragraphs = document.getElementsByClassName("class1")[0].children;
  // okayer selector
  // var paragraphs = document.getElementsByClassName('class1')[0].getElementsByTagName('p')

  // better more explicit selector  
  var paragraphs = document.querySelectorAll('.class1 > p');
  console.log( paragraphs )
  
  paragraphs[0].innerHTML="hello";
  paragraphs[1].innerHTML="hello1";
  
  // second is not defined
  var addthem = (paragraphs[2].innerHTML = second);

}

var obj1= new change;

<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>
<div class="class1">
<p>text to change1</p>
<p>text to change2</p>
<p> </p>
</div>

<div class="class2">
<p>text to change1</p>
<p>text to change2</p>
<p> </p>
</div>

<button onclick="obj1.changehtml()">changehtml</button>

Strategies for pinpointing specific Elements within the Document Object Model

Answer №1

Similar questions

Impact of shaking the browser window using JavaScript

What steps should I follow to utilize my spotify api token effectively?

Utilize mouseover to rotate the camera in three.js

Retrieve the duplicated items from an array by comparing two specific properties in JavaScript

Creating a hierarchical JSON format for a nested commenting system

A function similar to setCell for modifying form fields in JqGrid

Is there a way to interact with a DOM element through clicking and then pass it as a variable using PHP?

Refresh the page to change the section using vue.js

Issue with Google Scripts Trigger not activating

How to center a div vertically in a window

modify the tr element within a jQuery context

The issue of the keyboard disappearing on Chrome for Android while switching between different input

click events in backbone not triggering as expected

I can't seem to figure out why document.getElementById().innerHTML isn't functioning properly

Encountering an error when integrating my library with MUI

What steps are involved in transitioning from one mesh to another?

Setting up a recurring task with a while loop in a cron job

What is the method to access a form using jQuery? How can I extract the percentage symbol "%" from the entered amount?

The initial step in the process is executing Redux

jquery is showing up in the browserify bundle.js file, however, it is not functioning properly