Retrieve nodes that are children of another node

Here is the code snippet that I am working with:

<div id="page1-div" style="position:relative;width:1347px;height:1189px;">
        <img width="1347" height="1189" src="target001.png" alt="background image" />
        <p style="position:absolute;top:218px;left:209px;white-space:nowrap" class="ft10">Mario</p>
        <p style="position:absolute;top:218px;left:263px;white-space:nowrap" class="ft10">Lopez</p>
        <p style="position:absolute;top:218px;left:827px;white-space:nowrap" class="ft10">18987456O</p>
        <p style="position:absolute;top:395px;left:183px;white-space:nowrap" class="ft10">25</p>
        <p style="position:absolute;top:395px;left:402px;white-space:nowrap" class="ft10">Fisica y Química</p>
        <p style="position:absolute;top:433px;left:298px;white-space:nowrap" class="ft10">Ninguna</p>
        <p style="position:absolute;top:502px;left:633px;white-space:nowrap" class="ft10">230</p>
</div>
<div id="page2-div" style="position:relative;width:1347px;height:1189px;">
        <img width="1347" height="1189" src="target002.png" alt="background image" />
        <p style="position:absolute;top:149px;left:300px;white-space:nowrap" class="ft20">25</p>
        <p style="position:absolute;top:149px;left:565px;white-space:nowrap" class="ft20">Fisica y Química</p>
        <p style="position:absolute;top:149px;left:984px;white-space:nowrap" class="ft20">fevev</p>
        <p style="position:absolute;top:172px;left:425px;white-space:nowrap" class="ft20">fevevvvev</p>
        <p style="position:absolute;top:172px;left:912px;white-space:nowrap" class="ft20">Juan Soler</p>
        <p style="position:absolute;top:195px;left:319px;white-space:nowrap" class="ft20">Ana&#160;Abarca</p>
        <p style="position:absolute;top:195px;left:981px;white-space:nowrap" class="ft20">9:30-14:30</p>
</div>

I am seeking a solution to assign unique ID attributes (or modify the class attribute values) for all p elements within both divs. This will allow me to customize their styles in a CSS file. However, I am unsure of the proper method to access these p elements residing inside the two div sections.

javascripthtmlcsschildren

Answer №1

If you want to access the paragraph elements within divs, you can use the querySelectorAll('p') method.

For example:

const firstDiv = document.querySelector('#page1-div')
const firtDivParagraphs = firstDiv.querySelectorAll('p')

If you simply want to get all paragraphs regardless of their location, you can query them on the document object directly. You can also target paragraphs nested within divs by using a specific CSS selector:

const paragraphs = document.querySelectorAll('div > p')

You have the flexibility to use any valid CSS selector with querySelector or querySelectorAll.

To streamline your code, consider assigning classes to the div elements so you can query them together instead of separately:

const paragraphs = document.querySelectorAll('.div-class > p')

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to transfer table values to a modal in Django?

I am looking to transfer all the values from the specific row to the modal when the edit option is selected in the project. How can I achieve this? Here is the table body code: <tbody class="list form-check-all"> ...

pythonhtmldjangoinheritance

compatibility of javascript with firefox

In my table, I have some JavaScript code that is causing some issues. <td nowrap="" style="background: none repeat scroll 0% 0% rgb(211, 211, 211);" onmouseout="this.style.background='#d3d3d3'; menu3.style.color='#000000'" onmouse ...

javascripthtmlfirefoxibm-midrange

Selenium WebDriverJs has difficulty in setting up a new client for iOS devices

Struggling to make Selenium WebDriverJS work with the iOS browser, but unfortunately facing some issues. I followed the instructions on setting up the "iWebDriver" project as mentioned on the iPhoneDriver wiki page. The Python script worked fine, and even ...

javascriptiosseleniumselenium-webdriver

Can you provide an alternative code to access an element with the id of 'something' using vanilla JavaScript instead of jQuery's $('#something') syntax

Why am I seeing different console output for $('#list') and document.getElementById("list")? Here is the console printout: console.log($('#list')); console.log(document.getElementById("list")); However, the actual output in the cons ...

javascriptjquery

How can I halt further execution and update the user on their status using underscore's _.delay function?

Handling an array of input data with asynchronous calls for each element can be tricky, especially when trying to avoid hitting rate limits on a server. While underscore _.delay() can help with the processing, there are still a few challenges to address. H ...

javascriptarraysunderscore.js

What is the superior choice for PHP scripts that are suitable for real-world projects?

While delving into the world of PHP, I am curious about the best approach for inserting HTML tags within a PHP script. Is it better to use PHP echo statements or to break the PHP script to incorporate HTML with the help of opening and closing PHP tags? B ...

phphtml

Having trouble retrieving the `Content-Disposition` information from the backend response

I've been attempting to retrieve the value of Content-Disposition from the backend response, but unfortunately, I have not been successful. Here is the code I have been working with: public getQuoteImage(sharedQuote):Observable<any> { retu ...

javascriptangularhttpangular5

Why does the CSHTML button containing a JavaScript onclick function only function intermittently?

I've implemented a download button on a webpage that dynamically assigns an ID based on the number of questions posted. Below is the code for the button: <input data-bind="attr: { id: $index() }" type="button" value="Downlo ...

javascripthtmltypescriptrazor

Using Bootstrap to create a floating image amidst surrounding elements

<div id="wrapper"> <div class="row"> <div class="col-sm-6 col-xs-12 image">Image</div> <div class="col-sm-6 col-xs-12 title">Title</div> <div class="col-sm-6 col-xs-12 description"> Desc ...

jqueryhtmlcsstwitter-bootstrapcss-float

Vertically align the content within a div

Here is what I have been working on: http://jsfiddle.net/yisera/2aVpD/ I am trying to vertically center a div inside the .jumbotron-special container. I attempted using display: table; on the parent element and then implementing display:table-cell on th ...

htmlcsstwitter-bootstrapvertical-alignment

Aligning a picture at the center of the screen with CSS - Various screen and image sizes

For my project, I need to design a web page with a single image perfectly centered both vertically and horizontally on the screen. Here are the specific requirements: The client's screen size is unknown (mobile) The image will be user-defined with u ...

javascriptcssenyo

What are the steps for displaying CKeditor's formatted text from a content management system on a Next.js website?

Presently, my method entails utilizing : <div dangerouslySetInnerHTML={{ __html: article.content }}></div> to display the formatted text retrieved from a CKEditor input field within a Strapi CMS backend. Is there an alternative approach to ach ...

htmlnext.jsckeditorcontent-management-systemdangerouslysetinnerhtml

What is the best way to update the content of a div on an HTML page by incorporating the content of a div from a different page using JavaScript?

I have a requirement where I need to implement a link in a Table of Contents that, upon clicking, should replace the existing content of one div on a page with the content of another div on a different page. My goal is to accomplish this using only JavaScr ...

javascripthtmlcss

Trouble with jQuery click event on dynamically generated elements

I have a jQuery function that iterates through each element inside a specified div (#container) and triggers a JavaScript alert whenever a span is clicked. Everything functions correctly when the spans are static. However, when I include code like this: ...

javascriptjqueryhtml

The webpack development server refreshes the page just one time

I've been searching through various issues on Stack Overflow but haven't had any luck. It seems like most solutions are for an older version of webpack-dev-server. Despite trying numerous things, my app just won't reload or rebuild more tha ...

javascriptreactjstypescriptwebpackwebpack-dev-server

Is the CSS3 bar chart flipped?

I'm currently developing a responsive bar chart, and everything seems to be going smoothly except for one issue - when viewing it in full screen, the bars appear to be flipped upside down. It's quite puzzling as all other elements such as text an ...

htmlcssbar-chart

Invoke the URL with a query string and obtain the response from the specified web page

How can I make a button on my user.php page call action.php?name=john&id=10 without refreshing the page? The action.php page needs to process the query string data (name=john & id=10), execute some action, and then send a message back. Here is an ...

javascriptphpajax

Send a request to templateUrl

After experimenting with AngularJS, I decided to create a dynamic route system that funnels all routes through a single PHP file. This was motivated by my desire to prevent users from accessing raw templateUrl files and seeing unstyled partial pages. Prio ...

javascriptajaxangularjs

What could be causing this code to malfunction in Internet Explorer 7?

Code: Demo: In the majority of modern browsers such as Safari, Chrome, Firefox, and IE8/9, the code works perfectly fine. However, there seems to be an issue with IE7, causing it not to work. Any idea why this might be happening? My goal is for the conte ...

htmlcssinternet-explorer-7

"Learn how to dynamically update the user interface in express.js using handlebars without having to refresh the

As a newcomer to using express.js and Handlebars, I am faced with the challenge of implementing autocomplete functionality. Specifically, I want to enable autocompletion in a text input field without triggering a page refresh when users interact with it. C ...

javascriptnode.jsexpresshandlebars.js