如何使JavaScript只影响某个div中的元素？

<div id="myDiv">
  <p>这是div中的段落</p>
  <button>点击按钮</button>
</div>

<script>
  var myDiv = document.getElementById("myDiv");
  var paragraphs = myDiv.getElementsByTagName("p");
  // 对div中的段落进行操作
  for (var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.color = "red";
  }
</script>

<div class="myDiv">
  <p>这是div中的段落</p>
  <button>点击按钮</button>
</div>

<script>
  var myDivs = document.getElementsByClassName("myDiv");
  var paragraphs = myDivs[0].getElementsByTagName("p");
  // 对div中的段落进行操作
  for (var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.color = "red";
  }
</script>

<div id="parentDiv">
  <div>
    <p>这是div中的段落</p>
    <button>点击按钮</button>
  </div>
</div>

<script>
  var parentDiv = document.getElementById("parentDiv");
  var myDiv = parentDiv.getElementsByTagName("div")[0];
  var paragraphs = myDiv.getElementsByTagName("p");
  // 对div中的段落进行操作
  for (var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.color = "red";
  }
</script>