Question

让我们说我的页面有10＆＃34; li＆＃34;元件。

如果我使用getElementsByTagName("li")，我将在整个页面上获得所有10个元素。

而不是全部。

如何从页面上的某个区域获取这些内容？

let allListElements = document.getElementsByTagName('li');
for (var i=0;i<allListElements.length;i++){
    console.log(all[i].innerText);
}

这向我显示了所有列表元素，但我不想要所有这些元素。我只想从页面的某个区域获取它们。

编辑：没有包含列表的特定区域的父级。我无法编辑HTML，因为我正在进行网络抓取

<ul style="list-style-image: url(/images/icon/icon-bullet-orange-arrow_small.png); margin:10px 0px 0px 0px;padding-left:17px;">

                <li style="padding-bottom:5px;">
                    <a data-tag="linkResult" id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl01_linkResult" class="CsLinkButton" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$siteContent$widgetLayout$rptWidgets$ctl03$widgetContainer$ctl00$resultsRepeater$ctl01$linkResult", "", true, "", "JobDetails.aspx?site=1&amp;id=1985", false, true))'>J2EE Developer</a>
                    <span class="FieldValue">&nbsp;-&nbsp;( <span id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl01_displayFields_ctl01_displayField" dolocalize="false">req1985</span> | <span id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl01_displayFields_ctl03_displayField" dolocalize="false">Regular Full-Time</span> | <span id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl01_displayFields_ctl05_displayField" dolocalize="false"></span>&nbsp;)</span>
                </li>

                <li style="padding-bottom:5px;">
                    <a data-tag="linkResult" id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl02_linkResult" class="CsLinkButton" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$siteContent$widgetLayout$rptWidgets$ctl03$widgetContainer$ctl00$resultsRepeater$ctl02$linkResult", "", true, "", "JobDetails.aspx?site=1&amp;id=192", false, true))'>Penetration Test Analyst</a>
                    <span class="FieldValue">&nbsp;-&nbsp;( <span id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl02_displayFields_ctl01_displayField" dolocalize="false">req192</span> | <span id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl02_displayFields_ctl03_displayField" dolocalize="false">Regular Full-Time</span> | <span id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl02_displayFields_ctl05_displayField" dolocalize="false"></span>&nbsp;)</span>
                </li>

                <li style="padding-bottom:5px;">
                    <a data-tag="linkResult" id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl03_linkResult" class="CsLinkButton" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$siteContent$widgetLayout$rptWidgets$ctl03$widgetContainer$ctl00$resultsRepeater$ctl03$linkResult", "", true, "", "JobDetails.aspx?site=1&amp;id=2839", false, true))'>Senior J2EE Developer</a>
                    <span class="FieldValue">&nbsp;-&nbsp;( <span id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl03_displayFields_ctl01_displayField" dolocalize="false">req2839</span> | <span id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl03_displayFields_ctl03_displayField" dolocalize="false">Regular Full-Time</span> | <span id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl03_displayFields_ctl05_displayField" dolocalize="false"></span>&nbsp;)</span>
                </li>

                <li style="padding-bottom:5px;">
                    <a data-tag="linkResult" id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl04_linkResult" class="CsLinkButton" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$siteContent$widgetLayout$rptWidgets$ctl03$widgetContainer$ctl00$resultsRepeater$ctl04$linkResult", "", true, "", "JobDetails.aspx?site=1&amp;id=1703", false, true))'>Software Dev-Object Oriented</a>
                    <span class="FieldValue">&nbsp;-&nbsp;( <span id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl04_displayFields_ctl01_displayField" dolocalize="false">req1703</span> | <span id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl04_displayFields_ctl03_displayField" dolocalize="false">Regular Full-Time</span> | <span id="ctl00_siteContent_widgetLayout_rptWidgets_ctl03_widgetContainer_ctl00_resultsRepeater_ctl04_displayFields_ctl05_displayField" dolocalize="false"></span>&nbsp;)</span>
                </li>

                </ul>

Answer 1

使用特定的父节点，而不是“文档”。

<div id="demo">
  <ul>
    <li>Data</li>
    <li>Data</li>
     ...
  </ul>
</div>

在您的脚本中，使用节点而不是文档对象。

var demo = document.querySelector("#demo");
var li = demo.getElementsByTagName("li");

你应该只获得该组中的“li”。希望这是你要问的问题。

快乐的编码。

Answer 2

把class =＆＃34; testLiClass＆＃34; id = on your＆lt;李＆GT;元素并尝试用下面的方法找到基本的JQuery / CSS选择器：

var testLi = $（＆＃34; ul＆＃34;）。find（＆＃34;＃.testLiClass＆＃34;）;

即如果您的代码看起来像 ....

然后你可以用下面的代码来识别你正在寻找的李：

var testLiControl = $（＆＃34; ul＆＃34;）。find（＆＃34;＃1.testClass＆＃34;）;

Answer 3

这样可行。

function Change() {
var a = document.getElementsByTagName("ul")[0];
a.getElementsByTagName("li")[0].innerHTML = "2";
}

<ul>
<li>1</li>
<li>3</li>
</ul>
<button onclick="Change();">Change</button>

getElementsByTagName（） - 只想要选择元素，而不是全部

3 个答案: