Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/docker/10.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript document.querySelector()返回null_Javascript_Html_Polymer_Shadow Dom - Fatal编程技术网

Javascript document.querySelector()返回null

Javascript document.querySelector()返回null,javascript,html,polymer,shadow-dom,Javascript,Html,Polymer,Shadow Dom,我正在创造一种聚合物元素。我已经制作了模板,现在正在编写脚本。由于某些原因,document.querySelector为类选择器和id选择器都返回null。不确定这是否对聚合物不起作用(没有理由不起作用),或者我没有进口什么东西,或者还有什么问题 event-card.html <link rel="import" href="../components/polymer/polymer.html"> <link rel="import" href="event-card-de

我正在创造一种聚合物元素。我已经制作了模板,现在正在编写脚本。由于某些原因,document.querySelector为类选择器和id选择器都返回null。不确定这是否对聚合物不起作用(没有理由不起作用),或者我没有进口什么东西,或者还有什么问题

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>

.卡头{
显示:块;
位置:静态;
字号:1.2rem;
字体大小:300;
宽度:300px;
高度:300px;
边界半径:50%;
-webkit边界半径:50%;
-moz边界半径:50%;
溢出:隐藏;
}
事件卡描述{
保证金:0;
位置:相对位置;
顶部:225px;
}
聚合物(“事件卡”{
onHovered:function(){
var elem=document.querySelector(“描述”);
控制台日志(elem);
}
});
位于元素的阴影dom中<代码>文档。查询选择器(“描述”)正在主文档中查找id为
description
的节点。由于阴影dom边界将其隐藏,因此预期找不到该节点。尝试:

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

然而,Polymer有一个很棒的特性,它将具有ID的静态元素映射到
this.$。
。您可以使用
this.$.description
获取该元素。

对于属性中的多值,请使用
~
符号,例如

var elem = document.querySelector("[attributes~=description]");
或者,如果您只想将其用于元件
聚合物元件
使用:

var elem = document.querySelector("polymer-element[attributes~=description]");

哇,埃里克·拜德曼!谢谢你,埃里克!继续努力!