Currently trying to access DOM object by the ‘text’, and I can’t find this using standard javascript way – ‘evaluate’ or looping through all th object.
DOM object that I want to access is with textContent <target_text>
I have confirmed that <target_text> is unique across the whole page.
Executing this as part of Chrome extension.
Target element looks like this
<code><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col" style="width: 50%;">Target Text</th>
</code>
<code><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col" style="width: 50%;">Target Text</th>
</code>
<th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col" style="width: 50%;">Target Text</th>
So there is not unique class or tag to point it by.
It’s parent look like
<code><tr class="MuiTableRow-root MuiTableRow-head css-16pe4ub"><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col" style="width: 50%;">Target Text</th><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col" style="width: 50%;">Finding</th><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left w-13 MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col"></th></tr>
</code>
<code><tr class="MuiTableRow-root MuiTableRow-head css-16pe4ub"><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col" style="width: 50%;">Target Text</th><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col" style="width: 50%;">Finding</th><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left w-13 MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col"></th></tr>
</code>
<tr class="MuiTableRow-root MuiTableRow-head css-16pe4ub"><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col" style="width: 50%;">Target Text</th><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col" style="width: 50%;">Finding</th><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left w-13 MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col"></th></tr>
<code> const targetElements = document.querySelectorAll('th');
const targetElement = Array.from(techConcernsElements).find(th =>
th.textContent.trim() === '<target_text>'
);
</code>
<code> const targetElements = document.querySelectorAll('th');
const targetElement = Array.from(techConcernsElements).find(th =>
th.textContent.trim() === '<target_text>'
);
</code>
const targetElements = document.querySelectorAll('th');
const targetElement = Array.from(techConcernsElements).find(th =>
th.textContent.trim() === '<target_text>'
);
This returns nothing
<code> const targetElement = document.evaluate(
"//th[text()='<target_text>']", // This is the Xpath directly.
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE, // FIRST_ORDERED_NODE_TYPE returns the first matching node
// Other options include:
// UNORDERED_NODE_ITERATOR_TYPE - Returns all matching nodes in arbitrary order
// ORDERED_NODE_ITERATOR_TYPE - Returns all matching nodes in document order
// UNORDERED_NODE_SNAPSHOT_TYPE - Returns snapshot of matches in arbitrary order
// ORDERED_NODE_SNAPSHOT_TYPE - Returns snapshot of matches in document order
// FIRST_ORDERED_NODE_TYPE - Returns first match in document order
// ANY_UNORDERED_NODE_TYPE - Returns any single matching node
// NUMBER_TYPE - Returns number value
// STRING_TYPE - Returns string value
// BOOLEAN_TYPE - Returns boolean value
null
);
</code>
<code> const targetElement = document.evaluate(
"//th[text()='<target_text>']", // This is the Xpath directly.
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE, // FIRST_ORDERED_NODE_TYPE returns the first matching node
// Other options include:
// UNORDERED_NODE_ITERATOR_TYPE - Returns all matching nodes in arbitrary order
// ORDERED_NODE_ITERATOR_TYPE - Returns all matching nodes in document order
// UNORDERED_NODE_SNAPSHOT_TYPE - Returns snapshot of matches in arbitrary order
// ORDERED_NODE_SNAPSHOT_TYPE - Returns snapshot of matches in document order
// FIRST_ORDERED_NODE_TYPE - Returns first match in document order
// ANY_UNORDERED_NODE_TYPE - Returns any single matching node
// NUMBER_TYPE - Returns number value
// STRING_TYPE - Returns string value
// BOOLEAN_TYPE - Returns boolean value
null
);
</code>
const targetElement = document.evaluate(
"//th[text()='<target_text>']", // This is the Xpath directly.
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE, // FIRST_ORDERED_NODE_TYPE returns the first matching node
// Other options include:
// UNORDERED_NODE_ITERATOR_TYPE - Returns all matching nodes in arbitrary order
// ORDERED_NODE_ITERATOR_TYPE - Returns all matching nodes in document order
// UNORDERED_NODE_SNAPSHOT_TYPE - Returns snapshot of matches in arbitrary order
// ORDERED_NODE_SNAPSHOT_TYPE - Returns snapshot of matches in document order
// FIRST_ORDERED_NODE_TYPE - Returns first match in document order
// ANY_UNORDERED_NODE_TYPE - Returns any single matching node
// NUMBER_TYPE - Returns number value
// STRING_TYPE - Returns string value
// BOOLEAN_TYPE - Returns boolean value
null
);
Tried out the explicit selector found in the chrome page
<code>#root > div.flex.flex-col.h-screen > main > div > div > div > div:nth-child(2) > div > div.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiCard-root.relative.overflow-visible.rounded-sm.w-full.max-w-6xl.xl:max-w-7xl.css-1kxnsga > div.[&_tbody_tr_td]:text-lg.[&_th]:text-base > div:nth-child(2) > table > thead > tr > th:nth-child(1)
via
const targetElement = document.querySelector('#root > div.flex.flex-col.h-screen > main > div > div > div > div:nth-child(2) > div > div.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiCard-root.relative.overflow-visible.rounded-sm.w-full.max-w-6xl.xl\:max-w-7xl.css-1kxnsga > div\[\&_tbody_tr_td\]\:text-lg\[\&_th\]\:text-base > div:nth-child(2)');
</code>
<code>#root > div.flex.flex-col.h-screen > main > div > div > div > div:nth-child(2) > div > div.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiCard-root.relative.overflow-visible.rounded-sm.w-full.max-w-6xl.xl:max-w-7xl.css-1kxnsga > div.[&_tbody_tr_td]:text-lg.[&_th]:text-base > div:nth-child(2) > table > thead > tr > th:nth-child(1)
via
const targetElement = document.querySelector('#root > div.flex.flex-col.h-screen > main > div > div > div > div:nth-child(2) > div > div.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiCard-root.relative.overflow-visible.rounded-sm.w-full.max-w-6xl.xl\:max-w-7xl.css-1kxnsga > div\[\&_tbody_tr_td\]\:text-lg\[\&_th\]\:text-base > div:nth-child(2)');
</code>
#root > div.flex.flex-col.h-screen > main > div > div > div > div:nth-child(2) > div > div.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiCard-root.relative.overflow-visible.rounded-sm.w-full.max-w-6xl.xl:max-w-7xl.css-1kxnsga > div.[&_tbody_tr_td]:text-lg.[&_th]:text-base > div:nth-child(2) > table > thead > tr > th:nth-child(1)
via
const targetElement = document.querySelector('#root > div.flex.flex-col.h-screen > main > div > div > div > div:nth-child(2) > div > div.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiCard-root.relative.overflow-visible.rounded-sm.w-full.max-w-6xl.xl\:max-w-7xl.css-1kxnsga > div\[\&_tbody_tr_td\]\:text-lg\[\&_th\]\:text-base > div:nth-child(2)');
This also returns nothing
New contributor
ChanJong Na is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
From the full html
<code><!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<table>
<tr class="MuiTableRow-root MuiTableRow-head css-16pe4ub">
<th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89"
scope="col"
style="width: 50%;">
Target Text
</th>
<th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89"
scope="col"
style="width: 50%;">
Finding
</th>
<th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left w-13 MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89"
scope="col">
</th>
</tr>
</table>
<script>
// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', () => {
const targetTextElement = Array.from(document.getElementsByTagName('th'))
.find(th => th.textContent.trim() === 'Target Text');
console.log(targetTextElement);
});
</script>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<table>
<tr class="MuiTableRow-root MuiTableRow-head css-16pe4ub">
<th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89"
scope="col"
style="width: 50%;">
Target Text
</th>
<th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89"
scope="col"
style="width: 50%;">
Finding
</th>
<th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left w-13 MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89"
scope="col">
</th>
</tr>
</table>
<script>
// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', () => {
const targetTextElement = Array.from(document.getElementsByTagName('th'))
.find(th => th.textContent.trim() === 'Target Text');
console.log(targetTextElement);
});
</script>
</body>
</html>
</code>
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<table>
<tr class="MuiTableRow-root MuiTableRow-head css-16pe4ub">
<th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89"
scope="col"
style="width: 50%;">
Target Text
</th>
<th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89"
scope="col"
style="width: 50%;">
Finding
</th>
<th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left w-13 MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89"
scope="col">
</th>
</tr>
</table>
<script>
// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', () => {
const targetTextElement = Array.from(document.getElementsByTagName('th'))
.find(th => th.textContent.trim() === 'Target Text');
console.log(targetTextElement);
});
</script>
</body>
</html>
Here you have the console log:
Make sure the <tr> is inside a <table>, If not, it will return undefined