Javascript 如何在不使用DOM的情况下更改类

我有如下的Div列表。当单击每个Div的Click Me时，我想更改标题的颜色，即Heading1、Heading2、Heading3。我已经为以下内容编写了JQuery

    <pre>
     <div>
       <div>
          <span class="Heading">Heading1</span>
          <div>Content1</div>
          <a class="ClickMe">Click Me</a>
        </div> 
      </div>
      <div>
          <div>
            <span class="Heading">Heading2 </span>
            <div>Content2</div>
               <a class="ClickMe">Click Me</a>
           </div> 
      </div>
      <div>
          <div>
            <span class="Heading">Heading3 </span>
            <div>Content3</div>
               <a class="ClickMe">Click Me</a>
           </div> 
      </div>
      <div>
           <div>
            <span class="Heading">Heading3 </span>
            <div>Content3</div>
               <a class="ClickMe">Click Me</a>
           </div> 
      </div>    

  <script>
    $('document').ready(function(){
         $(".ClickMe").click(function(){
       $(this).parent().children(0).toggleClass('red');
     });
    });
  <script>


<style>
  .red
  {
    color : red;
  }
</style>

标题1
内容1
点击我
标题2
内容2
点击我
头3
内容3
点击我
头3
内容3
点击我
$（'document'）.ready（函数（）{
$（“.ClickMe”）。单击（函数（）{
$（this.parent（）.children（0.toggleClass（'red'）；
});
});
红色
{
颜色：红色；
}

1.现在，每当我单击“单击我”按钮时，红色将应用于整个Div

2.除了使用DOM之外，还有其他方法可以单独将红色应用于标题吗

$('document').ready(function(){
  $(".ClickMe").click(function(){
    $(this).closest('.Heading').toggleClass('red');
  });
});

---

很明显，您不知道DOM的作用或含义。这在“使用DOM之外”毫无意义。猜猜看，如果不使用DOM，您就不能更改DOM。我有一个位于2个div中的表，所以我需要浏览父表，然后我想在div中使用应用于该表的类来访问表CSS属性，如果我需要更改，您还可以使用$（“.ClickMe”）。单击（function（）{$（this）（'.heading'）.toggleClass（'red'）；}）；

$('document').ready(function(){
  $(".ClickMe").click(function(){
    $(this).closest('.Heading').toggleClass('red');
  });
});

$(document).ready(function(){
    $(".ClickMe").click(function(){
        $(this).siblings('.Heading').toggleClass('red');
    });
});