使用javascript从html页面获取数据

我有一些HTML-非常讨厌，但不是我的，所以我无法控制它。我需要从表单中提取一些数据，名字值（ABDIGANI）和姓氏值（AHMED）。使用javascript实现这一点的最佳方法是什么

<div class="voffset3"></div>
    <div class="container well panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3">
                    <span class="ax_paragraph">
                        First name
                    </span>
                    <div class="form-group">
                        <div class="ax_h5">
                            ABDIGANI
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <span class="ax_paragraph">
                        Surname
                    </span>
                    <div class="form-group">
                        <div class="ax_h5">
                            AHMED
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

名字
阿布迪加尼
姓
艾哈迈德

如果无法编辑HTML，可以使用XPATH作为示例。

var x=document.queryselectoral（“.panel body>div>.col-md-3>div>div”）；
x、 forEach（myFunction）；
函数myFunction（项目、索引）{
//log（item.innerHTML.trim（））；
如果（索引==0）{
log（“名字：+item.innerHTML.trim（））；
}
如果（索引==1）{
log（“姓氏：+item.innerHTML.trim（））；
}
}

名字
阿布迪加尼
姓
艾哈迈德

检查此项

const firstName = document.querySelector('.row .form-group div').textContent.trim();

const surname = document.querySelector('.row > div:last-child .form-group div').textContent.trim();

注意：最好根据功能需要更改html，例如，如果需要firstname，则必须为具有firstname的div保留一个id属性，这与姓氏相同。然后使用id选择器选择这些字段，因为即使将来更改html页面结构，功能也不会生效

查看下面关于html实际应该如何的参考（只是为了确保您知道它，但是您正在寻找的解决方案在上面的前两行） 例如：

名字
阿布迪加尼
姓
艾哈迈德
<代码> > p>文档。查询选择器（“表单组> div”）。文本内容，但不修改HTML，无法区分名字和姓氏。
 在大多数情况下，您可以认为HTML结构良好。请在下面的代码段中尝试此操作

编辑：由于第一条评论而进行了更改

编辑：如果有多行，则应使用

document.querySelectorAll('.container > .panel-body > .row');

并获取每个找到的元素的对，如下所示

const markers = ['First name', 'Surname'];
const mRx = [new RegExp(markers[0]), new RegExp(markers[1])];

function findMarker(element) {
    for(let i = 0; i < mRx.length; i++) {
        if(element.innerHTML.match(mRx[i])) {
            return markers[i];
        }
    }
    return null;
}

function findValue(el) {
    return el.parentElement.querySelector('.form-group > div').innerHTML.trim();
}

const pairs = [... document.querySelectorAll('.ax_paragraph')]
    .map(el => {
        return {el: el, mk: findMarker(el)};
    })
    .filter(n => n.mk !== null)
    .map(o => {
        return {key: o.mk, value: findValue(o.el)};
    });
console.log(pairs);

const markers=['名字'，'姓氏']；
const mRx=[new RegExp（markers[0]），new RegExp（markers[1]）；
函数findMarker（元素）{
for（设i=0；idiv'）.innerHTML.trim（）；
}
常量对=[…document.querySelectorAll（'.ax_段落'）]
.map（el=>{
返回{el:el，mk:findMarker（el）}；
})
.filter（n=>n.mk！==null）
.map（o=>{
返回{key:o.mk，value:findValue（o.el）}；
});
控制台日志（对）；
我还应该提到，类ax_h5不一致。根据检索到的页面数据，类会发生变化，因此它不能针对该类。到目前为止，您尝试了什么？这是不正确的。对于每个元素，都会构建一个元素索引，如果HTML标记始终与OP的示例相同，则可以按索引将项目作为目标。这很有效，但有点过火。你不觉得吗？另外，评论中提到的“阿克苏h5”不能用作Op。目前的杀伤力过高，同意。但是考虑到有很多行，并且已经有一个带有类“行”的div。然后，我们必须精确地为姓氏指定名字，即使缺少一些节点。@ikiK只有前两行是实际的解决方案，下面的代码更像是如何编写html+javascript。您的编辑没有区分这两个代码。请也相应地编辑文本并重新编辑对不起，我的错误，看起来a无法取消编辑。它正在等待受信任的社区成员的批准。无法还原它。（尚未批准）请执行。因为你们是新来的，所以我想展示一下如何制作这个片段。我还没有完全理解内容。再一次抱歉。我的扳机有点快；）嗨@BPP-DEV什么是xpath？看起来像是基于我现在在W3学校读到的内容的遗留代码，这个代码现在可以使用几天了。
const markers = ['First name', 'Surname'];
const mRx = [new RegExp(markers[0]), new RegExp(markers[1])];

function findMarker(element) {
    for(let i = 0; i < mRx.length; i++) {
        if(element.innerHTML.match(mRx[i])) {
            return markers[i];
        }
    }
    return null;
}

function findValue(el) {
    return el.parentElement.querySelector('.form-group > div').innerHTML.trim();
}

const pairs = [... document.querySelectorAll('.ax_paragraph')]
    .map(el => {
        return {el: el, mk: findMarker(el)};
    })
    .filter(n => n.mk !== null)
    .map(o => {
        return {key: o.mk, value: findValue(o.el)};
    });
console.log(pairs);