document.querySelector（）返回null [英] document.querySelector() returns null

问题描述

我正在创造一种聚合物元素。我制作了该模板，现在正在处理脚本。由于某些原因，document.querySelector对于类和id选择器都返回null。不知道这是否适用于聚合物（没有理由不应该）或者我没有导入某些东西或其他什么是错误的。

活动卡片。 html

 < link rel =importhref =../ components / polymer / polymer.html> 
< link rel =importhref =event-card-description.html> 
 
< polymer-element name =event-cardattributes =标题图片描述> 
< template> 
< style> 
 .card-header {
 display：block; 
 position：static; 
 font-size：1.2rem; 
 font-weight：300; 
 width：300px; 
 height：300px; 
 border-radius：50％; 
 -webkit-border-radius：50％; 
 -moz-border-radius：50％; 
 overflow：hidden; 
} 
事件卡片描述{
 margin：0; 
职位：亲属; 
 top：225px; 
} 
< / style> 
 
< div 
 style =background：url（../ images / {{image}}。jpg）no-repeat; background-size：cover
 class =card-headerlayout horizo​​ntal center 
 on-mouseover ='{{onHovered}}'
 on-mouseout ='{{onUnhovered}}'> 
< event-card-description 
 id =description
 header = {{header}} 
 description = {{description}}> 
< / event-card-description> 
< / div> 
< / template> 
 
< script> 
聚合物（'事件卡'，{
 onHovered：function（）{
 var elem = document.querySelector（＃description）; 
 console.log（elem） ; 
} 
}）; 
< / script> 
< / polymer-element> 
  

解决方案

<活动卡-description id =description> 在元素的影子dom中。 document.querySelector（＃description）正在 main中寻找一个包含 id＃description 的节点文档即可。预计由于阴影边界隐藏它而找不到该节点。试试：

  this.shadowRoot.querySelector（＃description）; 
  

然而，Polymer有一个非常棒的功能，其中有ID的静态元素映射到此$< ID> 。您可以使用 this。$。description 来获取该元素。

I'm creating a polymer element. I've made the template and am now working on the script. For some reason document.querySelector is returning null for both class and id selectors. Not sure if this doesn't work with polymer (no reason it shouldn't) or I haven't imported something or what else is wrong.

event-card.html

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="event-card-description.html">

<polymer-element name="event-card" attributes="header image description">
  <template>
    <style>
      .card-header {
        display: block;
        position: static;
        font-size: 1.2rem;
        font-weight: 300;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        overflow: hidden;
      }
      event-card-description {
        margin: 0;
        position: relative;
        top: 225px;
      }
    </style>

    <div 
      style="background: url(../images/{{image}}.jpg) no-repeat; background-size: cover" 
      class="card-header" layout horizontal center
      on-mouseover='{{onHovered}}' 
      on-mouseout='{{onUnhovered}}'>
      <event-card-description
        id="description"
        header={{header}} 
        description={{description}}>
      </event-card-description>
    </div>
  </template>

  <script>
    Polymer('event-card', {
      onHovered: function() {
        var elem = document.querySelector("#description");
        console.log(elem);
      }
    });
  </script>
</polymer-element>

解决方案

<event-card-description id="description"> is in your element's shadow dom. document.querySelector("#description") is looking for a node with id#description in the main document. It's expected that the node isn't found because the shadow dom boundary hides it. Try:

this.shadowRoot.querySelector("#description");

However, Polymer has an awesome feature where static elements that have ids are mapped to this.$.<id>. You can use this.$.description to get at that element.

这篇关于document.querySelector（）返回null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！