Can not read DOM value, getting Vue.js template (in Chromium, both fom DevTools and extension)-CodePudding

I am working on a Chrome extension, which wants to read some values from the page, e.g. item title. But it reads not the actual title but some Vue.js template variable.

Even if I open DevTools, I can't get the value, only the template variable name.

> document.getElementsByClassName("page-title-text")[0]

<span class="page-title-text">{{pageTitle}}</span>

On the webpage, I can see the actual title. Can I get the raw value somehow? Especially I need the href attribute of a link (tag <a>). I don't really want to use Vue.js in my extension, just get the value from DOM.

CodePudding user response：

Especially I need the href attribute of a link (tag <a>)

You're looking for Element.getAttribute():

console.log(
  ` a.getAttribute('href') => '${document
    .getElementsByClassName("foo")[0]
    .getAttribute("href")}'\n`,
  `span.getAttribute('class') => '${document
    .getElementsByTagName("span")[0]
    .getAttribute("class")}'`
);

<a href="#" >foo</a>
<span >bar</span>

CodePudding user response：

Well, the site has tricked me.

> document.getElementsByClassName("page-title-text")[1]

<span >The Real Title</span>

There is a hidden first element somewhere, which contains the template, that scared me, and also the empty value caused error, so my script has stopped.