问题描述
HTML 响应:
<html>
<head> </head>
<body>
<span style="font-size:30px">Name:</span>
<span style="font-size:25px;border-radius: 10px;">John Doe</span>
<h1>Stats</h1>
<div>
<p>info1</p>
<p>info2</p>
<p><a href="https://link.com">info3</a></p>
</div>
</body>
</html>
我是否会使用 querySelector()
来检索标签中的链接和第二个 span 标签中的 John Doe?如果是这样,我将如何获得确切的标签?
解决方法
您可以按如下方式使用 DOMParser
:
const response = `<html>
<head> </head>
<body>
<span style="font-size:30px">Name:</span>
<span style="font-size:25px;border-radius: 10px;">John Doe</span>
<h1>Stats</h1>
<div>
<p>info1</p>
<p>info2</p>
<p><a href="https://link.com">info3</a></p>
</div>
</body>
</html>`;
const doc = new DOMParser().parseFromString(response,"text/html");
console.log(doc.querySelector("a[href]").href);
console.log(doc.querySelector("span:nth-child(2)").textContent);
如果您可以编辑特定的 span 元素,请尝试以下操作:
- 在第二个 span 元素上设置 ID 属性
- 使用
getElementById
引用元素 - 然后使用
textContent
获取文本
const name = document.getElementById('name').textContent
console.log(name)
<html>
<head> </head>
<body>
<span style="font-size:30px">Name:</span>
<span style="font-size:25px;border-radius: 10px;" id="name">John Doe</span>
<h1>Stats</h1>
<div>
<p>info1</p>
<p>info2</p>
<p><a href="https://link.com">info3</a></p>
</div>
</body>
</html>