javascript - 为什么我无法在 Javascript 中访问我的 html 元素

Question

所以，我在这里坐了很长一段时间，试图找出如何访问我的登录表单输入元素。

我正在编写一个基于聚合物入门套件的 PWA，这是我的 html 代码:

<template id="loginTemplate"> 
    <style>
        //removed styles for better overview
    </style>
    <hgroup>
        <h1>Login</h1>
    </hgroup>
    <form id="loginForm">
        <div class="group">
            <input id="username" type="email"><span class="bar"></span>
            <label>Email</label>
        </div>
        <div class="group">
            <input id="password" type="text"><span class="bar"></span>
            <label>Passwort</label>
        </div>
        <button type="button" class="button buttonBlue" onclick="login()">Login
          <div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
        </button>
    </form>
</template>

这是我的 javascript(用同一个 HTML 文件编写):

<script>
    // Define the element's API using an ES2015 class
    class MyLogin extends Polymer.Element {

      static get is() { return 'my-login'; }

    }


    var login=function()
    {
        var client = new HttpClient();
        //var temp = document.querySelector('#loginTemplate');
        //var formElements = temp.content.querySelectorAll("form")[0].elements;
        var formElements = document.getElementById("loginForm").elements;

        var pass=formElements["password"];
        var mail=formElements["username"];
        //have already tried:
        //var pass=document.getElementById("password");
        //var pass=document.getElementById("username");
        //and
        //var pass=$("#password").val();
        //var pass=$("#username").val();

        client.login('http://localhost:50253/Token', pass, mail, function() { 

            window.alert("logged in!")

            client.get('http://localhost:50253/api/Task', function(response){
                window.alert(response); 
            });

        });
    }

    customElements.define(MyLogin.is, MyLogin);
</script>

问题是，每当我尝试使用方法“getElementById”时，我都会得到一个未定义的元素:

f.e.如果我使用 document.getElementById("loginForm").elements;

我会收到此错误:

Uncaught TypeError: Cannot read property 'elements' of null

编辑:我不知道这是否重要，但我想指出整个 html 文件位于 dom 模块内

感谢任何帮助!

Answer 1

里面有什么<template>是 Shadow dom 的一部分，无法像访问“常规”Dom 那样进行访问。

根据您的情况(Polymer v2)，您需要执行

var formElements = this.shadowRoot.querySelector('#loginForm').elements;

编辑:

现在我意识到...功能登录必须在类内部，你可以在外部。应该是这样的:

class MyLogin extends Polymer.Element {

      static get is() { return 'my-login'; }

      // the function is inside the class
      login() {
        // define whatever this function does...
      }

}

customElements.define(MyLogin.is, MyLogin);