使用javaScript进行HTML解析

Question

我正在尝试解析HTML文档。

这是HTML：

<h1>
<span class="memName fn" itemprop="name">Ankur Arora</span>
<span class="display-none" itemprop="image">http://photos1.meetupstatic.com/photos/member/3/8/f/8/member_249974584.jpeg</span>
<span class="display-none" itemprop="url">http://www.meetup.com/Meetup-API-Testing/members/191523682/</span>
</h1>

我需要得到图片和名字。

我尝试以下代码：

var name = document.querySelector("memName fn").name;

有人可以帮助我吗？ 我是javaScript的新手...

谢谢

Answer 1

要获取内部文本，可以使用text()函数，如下所示：

HTML：

<span class="memName fn">Ankur Arora</span>

jQuery：

var memName = $(".memName").text();
console.log(memName); // Via console log
alert(memName); // Alert it

Answer 2

使用jQuery很容易。 只需将其包含在您的页面中即可：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

然后使用.text()或.html()提取span元素的内容

var pictureLink = $("span[itemprop='image']").text();
//.html() also gets the html-elements inside
var name = $("span[itemprop='name']").html();

https://jsfiddle.net/bh9mebru/

Answer 3

您还可以使用innerHTML获取文本。

<span id="memId" class="memName fn">Ankur Arora</span>

document.getElementsByClassName（'memName'）-这将给出具有类'memName'的元素列表

要获取第一个元素的内部文本，请使用document.getElementsByClassName('memName')[0].innerHTML

或通过id访问。

document.getElementById('memId').innerHTML