Question

如何选择段落中的段落，没有类或ID来识别它？

<!DOCTYPE html>
...
<body>

    <h1>Hello</h1>
    <h2>Goodbye</h2>
    <ul>
        <li id="highlight">List Item 1</li>
        <li class="som">List Item 2</li>
        <li class="bolded">List Item 3</li>
        <li class="bolded">List Item 4 <p>Testing123</p></li>
    </ul>
    <p>
        This is an <strong>awesome</strong> paragraph!
    </p>
    <a href="htps://www.google.com">Link to Google</a>
    <a href="https://www.bing.com">Link to Bing</a>
    <p>
        Click a button!
        <button class="button">Click here!</button>
        <p>Haven't been clicked...</p>
    </p>
    <script type="text/javascript" src="domManipulate.js"></script>
</body>
</html>

如何选择<p>Haven't been clicked...</p>代码？

我已尝试var under_btn_txt = document.querySelector("p p");和... = document.getElementsByTagName("p")。

我认为第一个有效，因为document.querySelector("li p");确实获得了Testing123文字......

从技术上讲，第二种方法可以实现它。我需要使用under_btn_txt[2]来访问它。但是如果我不知道那些p是什么，知道我需要第二个索引呢？

Answer 1

这里的html无效。 p是一个自我结束标记，它无法嵌套另一个p。更多信息here。

将一个类添加到父p元素并使用span进行嵌套。然后使用querySelector和getElementsByTagName＆amp; innerHTML获取内容

＆＃13;

var getPTag = document.querySelector(".click");
var getChild = getPTag.getElementsByTagName('span')[0].innerHTML;
console.log(getChild)

＆＃13;

<h1>Hello</h1>
<h2>Goodbye</h2>
<ul>
  <li id="highlight">List Item 1</li>
  <li class="som">List Item 2</li>
  <li class="bolded">List Item 3</li>
  <li class="bolded">List Item 4
    <p>Testing123</p>
  </li>
</ul>
<p>
  This is an <strong>awesome</strong> paragraph!
</p>
<a href="htps://www.google.com">Link to Google</a>
<a href="https://www.bing.com">Link to Bing</a>
<p class="click">Click a button!<button class="button">Click here!</button>
  <span>Haven't been clicked...</span>
</p>

＆＃13;

Answer 2

段落元素可能不包含其他块元素。这意味着您无法将p嵌套在另一个p代码中，因为p是块元素。

您必须修改HTML。您可以使用p替换父div，并使用p访问其中的div p标记。

＆＃13;

console.log(document.querySelectorAll('div p')[0])

＆＃13;

<h1>Hello</h1>
<h2>Goodbye</h2>
<ul>
    <li id="highlight">List Item 1</li>
    <li class="som">List Item 2</li>
    <li class="bolded">List Item 3</li>
    <li class="bolded">List Item 4 <p>Testing123</p></li>
</ul>
<p>
    This is an <strong>awesome</strong> paragraph!
</p>
<a href="htps://www.google.com">Link to Google</a>
<a href="https://www.bing.com">Link to Bing</a>
<div>
    Click a button!
    <button class="button">Click here!</button>
    <p>Haven't been clicked...</p>
</div>

＆＃13;

获取元素内的元素（没有类/ id）

2 个答案: