Javascript 如果选择一个包含相同嵌套元素的整棵树，如何只获取一次DOM元素的内容？_Javascript_Dom_Xpath_Microsoft Translator

Javascript 如果选择一个包含相同嵌套元素的整棵树，如何只获取一次DOM元素的内容？

javascript dom xpath

Javascript 如果选择一个包含相同嵌套元素的整棵树，如何只获取一次DOM元素的内容？,javascript,dom,xpath,microsoft-translator,Javascript,Dom,Xpath,Microsoft Translator,例如：通过id（getElementById）定位容器元素（div#container）返回一个HTML集合，其中包含每个元素及其所有属性，包括每个嵌套项中重复的子节点。然后，我将每个项迭代到一个数组中，但在DOM树的每个级别上都会重复相同的数据 0: <div class="container"><div><div><main><footer><div class="container-fluid"><p&

例如：通过id（getElementById）定位容器元素（div#container）返回一个HTML集合，其中包含每个元素及其所有属性，包括每个嵌套项中重复的子节点。然后，我将每个项迭代到一个数组中，但在DOM树的每个级别上都会重复相同的数据


    0: <div class="container"><div><div><main><footer><div class="container-fluid"><p> © 2018-2020 Copyright:  </p></div></footer></main></div></div></div>
    1: <div><div><main><footer><div class="container-fluid"><p> © 2018-2020 Copyright: </p></div></footer></main></div></div>
    2: <div><main><footer><div class="container-fluid"><p> © 2018-2020 Copyright: </p></div></footer></main></div>
    3: <main><footer><div class="container-fluid"><p> © 2018-2020 Copyright: </p></div></footer></main>
    4: <footer><div class="container-fluid"><p> © 2018-2020 Copyright: </p></div></footer>
    5: <div class="container-fluid"><p> © 2018-2020 Copyright: </p></div>
    6: <p> © 2018-2020 Copyright: </p>

HTML示例：

<html>

<body>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<div id="container">

    <div class="layout">

        <div class="bodyContainer">

            <main class="wrapper">

                <footer class="full-standard">

                    <div class="container no-print">

                        <div class="row">

                            <img alt="" src="" />

                        </div> <!-- footer > div.row -->

                    </div> <!-- /div.container.no-print -->

                    <div class="footer-copyright>

                        <div class="container-fluid">

                            <p>&copy; 2020 Copyright</p>

                        </div> <!-- /div.container-fluid -->

                    </div> <!-- /div.footer-copyright -->

                </footer> <!-- /footer.full-standard -->

            </main> <!-- /main.wrapper -->

        </div> <!-- /div.bodyContainer-->

    </div> <!--/div.layout -->


</div> <!-- / div#container -->

</body>

</html>

{
    "xPathArray": "/HTML/BODY/DIV[6]/DIV/DIV/MAIN/FOOTER/DIV[2]",

    "innerHTML": "<div class=\"container-fluid\"><p> © 2018-2020 Copyright: </p></div>"
}, 

{
    "xPathArray": "/HTML/BODY/DIV[6]/DIV/DIV/MAIN/FOOTER/DIV[2]/DIV",

    "innerHTML": "<p> © 2018-2020 Copyright: </p>"
}, 

{
    "xPathArray": "/HTML/BODY/DIV[6]/DIV/DIV/MAIN/FOOTER/DIV[2]/DIV/P",

    "innerHTML": " © 2018-2020 Copyright: "
}


尝试为您想要的元素分配一个唯一的id，然后通过id获取该元素并将该元素的内部文本传递给您的处理程序
   <p id='unique_id'> Some Text </p>

    document.getElementbById('unique_id')[0].innerHTML

一些文本
document.getElementbById（'unique_id'）[0]。innerHTML

您可能需要稍微修改一下，但总体思路应该是可行的
谢谢您的回复，我考虑尝试用一个唯一的ID（甚至是一系列ID，如transateID1、translateID2、translateID3等）标记我的所有页面区域但是，我希望能够将整个页面的内容从一种语言转换为另一种语言，因此不幸的是，我的目标不仅仅是一个元素，而且我的DOM集合为什么包含整个内容容器您可能需要递归解决方案然后递归解决方案（HtmleElement）{if（HtmleElement.innerText！=''{return HtmleElement.innerText=translateFunction（HtmleElement.innerText）}如果（HtmleElement.innerHTML）{recursiveSoltuion（HtmleElement.innerHTML）}诸如此类-祝你好运
{
    "xPathArray": "/HTML/BODY/DIV[6]/DIV/DIV/MAIN/FOOTER/DIV[2]",

    "innerHTML": "<div class=\"container-fluid\"><p> © 2018-2020 Copyright: </p></div>"
}, 

{
    "xPathArray": "/HTML/BODY/DIV[6]/DIV/DIV/MAIN/FOOTER/DIV[2]/DIV",

    "innerHTML": "<p> © 2018-2020 Copyright: </p>"
}, 

{
    "xPathArray": "/HTML/BODY/DIV[6]/DIV/DIV/MAIN/FOOTER/DIV[2]/DIV/P",

    "innerHTML": " © 2018-2020 Copyright: "
}

   <p id='unique_id'> Some Text </p>

    document.getElementbById('unique_id')[0].innerHTML