JS：隐藏除一个之外的所有元素（按 id）（及其所有降序子元素及其父元素）

debugcn 发表于 Dev

海姆斯

我尝试选择页面上除 #content_container 及其所有后代子元素及其所有父元素之外的所有元素。后来我想隐藏所有选定的元素。

但是我已经失败了：

var elems = document.querySelectorAll("body *:not(#content_container *)");

浏览器控制台 (chrome) 返回：无法在“文档”上执行“querySelectorAll”：“body *:not(#content_container *)”不是有效的选择器。

而"body *:not(#content_container)"不会返回错误。

如何做到这一点？注意：不能使用 jQuery。

编辑：你们中的一些人想要一个例子。目标是让#content_container 及其内容在网站上可见，而所有其他内容将被隐藏。

<body>
<div class="hide">
    <div class="hide">

    </div>
</div>
<div>
    <div>
        <div class="hide">
            <div class="hide">

            </div>
        </div>
        <div id="content_container">
            <p>  ------- content_container div ------- </p>
            <div>
                    <div>
                            <div>

                            </div>
                    </div>
            </div>
            <div>

            </div>    
        </div>
    </div>
    <div class="hide">

    </div>
</div>
<div class="hide">
    <div class="hide">
        <div class="hide">
            <div class="hide">

            </div>
        </div>
    </div>
</div>
<div class="hide">
    <div class="hide">

    </div>
</div>

罗布

我能看到的唯一方法是获取主题节点，然后将它的所有兄弟节点添加到“不显示”集合中，然后向上其父节点收集并添加所有兄弟节点，并在正文处停止.

下面只添加兄弟姐妹和父兄弟姐妹，而不是节点本身或其直接祖先，一旦处理完 body 子节点就停止。它也只收集元素节点并忽略所有其他节点，因此空的 #text 节点兄弟节点仍然存在，但不应影响布局。如果你想摆脱它们，只需删除它们。

单击“隐藏内容”按钮。

function hideStuff(){
  var el = document.querySelector('#content_container');
  var node, nodes = [];
  
  do {
    var parent = el.parentNode;
    
    // Collect element children
    for (var i=0, iLen=parent.childNodes.length; i<iLen; i++) {
      node = parent.childNodes[i];

      // Collect only sibling nodes that are elements and not the current element
      if (node.nodeType == 1 && node != el) {
        nodes.push(node);
      }
    }

    // Go up to parent
    el = parent;

  // Stop when processed the body's child nodes
  } while (el.tagName.toLowerCase() != 'body');

  // Hide the collected nodes
  nodes.forEach(function(node){
    node.style.display = 'none';
  });
}

<body>
  <div class="hide">hide
    <div class="hide">hide
      
    </div>
  </div>
  <div>
    <div>
      <div class="hide">hide
        <div class="hide">hide
          
        </div>
      </div>
      <div id="content_container">
        <p>  ------- content_container div ------- </p>
        <button onclick="hideStuff()">Hide stuff</button>
        <div>don't hide
          <div>don't hide
            <div>don't hide
              
            </div>
          </div>
        </div>
        <div>don't hide
          
        </div>
      </div>
    </div>
    <div class="hide">hide
      
    </div>
  </div>
  <div class="hide">hide
    <div class="hide">hide
      <div class="hide">hide
        <div class="hide">hide
          
        </div>
      </div>
    </div>
  </div>
  <div class="hide">hide
    <div class="hide">hide
      
    </div>
  </div>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。