How can I define addEventListener('click' with an ancestoral node hierarchy

Introductory note: It was suggested the question below was not clearly stated. I simply wish to define an addEventListener('click' trap that traverses three nodes. One of the two examples I present below runs through a (grand)parent id ('id="ArticleStyle"' in the article tag) -> traverses down node to its child 'h1' -> and then further down node to the h1 spawned child, 'a'. Which is, the 'a href' being clicked and listened for.

I have two js scripts properly working that serve my needs by luck alone; not by robust planning. Both I would like to contain and evaluate in a grandparent node/wrapper using that unique id as the defined starting point. It would be essential in the second script to do so since there would be over a hundred (and growing) unique ids needed; if it weren't for the fact I am succeeding by using 'h1'-'a'. Fortunately here, 'h1' is not yet used elsewhere.

The 'a' links in the first script (immediately below / and one of its two HTML blocks is included below that) are fortunately parented by just a total of four unique id allowing it to be functional without the attempted EVALUATION for HANDLING line commented out. Otherwise, if I used an 'a'-'img' (as I used 'hi'-'a' in the second script), there would be sucked in traffic on clicks to other page navigation icons based on their similar 'a'-'img' coding. I would hope to use the attempted line of code I commented out, code it correctly and have it create a container/wrapper/node representing a lineage of 'div class="flagLinkVIEW"'-'a'-'img' || 'div class="flagLinkVIEW"'-'a'-'span' as a filter where none else enter in.

<script>
    //Toggles between Montage and Montage_VIEW based on, clicking the img icon.png or the span text below it

    document.addEventListener('click', ({ target }) => {

        //!!!!!!!!!!!!!!!! FIX 'IF' LINE COMMENTED OUT in second line below this !!!!!!!!!!!!!!!!!!!!!!!!
        //Code incorrectly formatted in line under this comment
        //if ((target.matches('.flagLinkVIEW a > img')) || (target.matches('.flagLinkVIEW a > span'))) {        

            if (target.parentElement.id === "VIEW_topIconOnOff0") {
                sessionStorage.displayStateMontage = "idMontage_VIEW";
                document.body.style.background = "white";
            }
            if (target.parentElement.id === "VIEW_topIconOnOff1") {
                sessionStorage.displayStateMontage = "idMontage";
                document.body.style.background = "rgb(225, 213, 191)";
            }
            if (target.parentElement.id === "VIEW_btmIconOnOff0") {
                sessionStorage.displayStateMontage = "idMontage_VIEW";
                document.body.style.background = "white";
            }
            if (target.parentElement.id === "VIEW_btmIconOnOff1") {
                sessionStorage.displayStateMontage = "idMontage";
                document.body.style.background = "rgb(225, 213, 191)";
            }

        //}
        //!!!!!!!!!!!Above is the closing bracket of the FIX 'IF' LINE COMMENTED OUT !!!!!!!!!!!!!!!!

    });
</script>




<div id="Icons-midNAV" class="IconOpacityControl-p5 LNKiconCOLORS">   
    <a href="#" onclick="window.open ('./Poetry%20-%20Montage%20of%20the%20Years_files/PDF%20-%20MASTER%20Montage%20of%20the%20Years.pdf', 'PDF Master',
    'resizable=yes,scrollbars=yes,top=100,left=260,height=420,width=420'); return false;">
    <img class="PDF-IconBC-Pv" src="./b-pdf_w.png" alt="PDF Master" />
    <span class="BtmCtrIconTextStyle PDF-TextBC-Pv">MASTER</span></a>

    <div class="flagLinkVIEW">
        <!-- Instead of class, which would be nice, I could if must, use a unique id of
        flagLinkVIEW_A here if necessary, and elsewhere in the second similar block, an
        id of flagLinkVIEW_B. It would be instructive though, to solve with a class example. -->

        <a id="VIEW_btmIconOnOff0" href="./Poetry%20-%20Montage%20of%20the%20Years.html"> 
        <img class="VIEW-IconBC-pV" src="./binoculars-detail-2A.png" alt="Basic-VIEW" />
        <span class="BtmCtrIconTextStyle VIEW-TextBC-pV">BasicVIEW</span></a>

        <a id="VIEW_btmIconOnOff1" href="./Poetry%20-%20Montage%20of%20the%20Years.html"> 
        <img class="VIEW-IconBC-pV" src="./binoculars-detail-2A.png" alt="Basic-VIEW" />
        <span class="BtmCtrIconTextStyle VIEW-TextBC-pV">FullVIEW</span></a>

    </div>

</div> 

The solution I seek for the second script I believe is similar. Here I would wish use the unique id attached to the article node. I would hope to incorporate the incorrectly coded line now commented out, and fix it to contain a specified node lineage of 'article id="ArticleStyle"'-'h1'-'a' and use it as a filter where none else enter in. Again, the js script is immediately below with the HTML following it.

<script>
    //Sets localStorage to transfer present sessionStorage to a new _blank tab/window being opened

    document.addEventListener('click', ({ target }) => {

    //!!!!!!!!!!!!!!! Change line below to a correctly syntaxed lineage of: 
    //if ((target.matches('#ArticleStyle h1 > a')) !!!!!!!!!!!!!!!!!!
        if (target.matches('h1 a')) {
            localStorage.previousMenu = sessionStorage.previousMenu;
            localStorage.motherMenu = sessionStorage.motherMenu;
            localStorage.rootMenu = sessionStorage.rootMenu;
        }
    });
</script>




<article id="ArticleStyle">
<h1 style="line-height:0; padding-top:1.8em">
  <a href="./Poetry%20-%20Black%20Holes%20and%20When%20Time%20Stands%20Still.html" target="_blank">
  Black Holes and When Time Stands Still</a></h1>

<!--multiple 'h1' child nodes, as above but with differing URLs -->
</article