使用 GetElementById 传递多个值（在某个字符后拆分）答案

【问题标题】：Passing multiple values with GetElementById (& Split after certain a character)使用 GetElementById 传递多个值（在某个字符后拆分）
【发布时间】：2018-02-27 20:22:22
【问题描述】：

我几乎没有 JavaScript 经验，但我知道 getElementID 只携带一个值，那么我如何才能传递 2 个值？我可以像下面那样使用它两次，还是使用另一个 GetElementBy/GetElementsBy 方法更好？

<script type="text/javascript">
$(document).ready(function () {
           hash();
            function hash() {
                var hashParams = window.location.hash.substr(1).split('&');
                for (var i = 0; i < hashParams.length; i++) {
                    var p = hashParams[i].split('=');
                    document.getElementById("<%=start.ClientID%>").value = decodeURIComponent(p[1]);
                    document.getElementById("<%=end.ClientID%>").value = decodeURIComponent(p[1]);;
                }
                
            }
        });
 </script>

编辑所以我决定使用循环两次并且它的工作但我传递的值包含我需要删除的文本。有没有办法可以在某个角色之后切断分裂？这是我的新代码

<script type="text/javascript">

        $(document).ready(function () {
             hash();
            function hash() {
                var hashParams = window.location.hash.substr(1).split('#');
                for (var i = 0; i < hashParams.length; i++) {
                    var p = hashParams[i].split('=');
                    document.getElementById("<%=start.ClientID%>").value = decodeURIComponent(p[1]);
                }
                var hashParams = window.location.hash.substr(1).split('&');
                for (var i = 0; i < hashParams.length; i++) {
                    var p = hashParams[i].split('=');
                    document.getElementById("<%=end.ClientID%>").value = decodeURIComponent(p[1]);;
                }
                
            }
        });
 </script>

这是从上一页转发时出现在搜索栏中的文本。 localhost:56363/Bookings.aspx#start=27/02/2018 12:30&end=27/02/2018 17:30

开始和结束输入框填充了值，但开始输入框 (27/02/2018 12:30&end) 包含我想要切断的字符 (&end)。有没有办法在某个字符之后停止分裂？

【问题讨论】：

getElementById 每次你想通过 Id 从 DOM 中获取元素时都需要调用。从 DOM 调用多个元素的方法可能比通过 Id 更有效。例如，如果您需要遍历一组具有相同名称的元素，则可以使用 getElementsByName。

标签： javascript asp.net split webforms getelementbyid

【解决方案1】：

使用它两次是完全可以接受的。而且，如果它们是独立的东西，那么这是有道理的。

虽然您也可以使用getElementsByTagName()、getElementsByName() 或getElementsByClassName()，但通常使用document.querySelectorAll() 是更现代的选择。

如果他们与他们有共同点（比如一个类），你可以这样使用它：

const nodeList = document.querySelectorAll('.classToGet');
Array.prototype.forEach.call(nodeList, element => element.value = decodeURIComponent(p[1]));

document.querySelectorAll()（以及getElementsBy函数）返回一个NodeList，有点像Array，但没有数组的函数，所以你需要Array.prototype.forEach.call()循环超过他们。

document.querySelectorAll() 接受一个字符串，就像你给 CSS 一样，NodeList 包含所有匹配的元素。

仅供参考，有一个等效的 document.querySelector() 获取单个元素，因此您可以将其用于 ID：

document.querySelector("#<%=start.ClientID%>")

请注意#，就像您在开头使用 CSS 时一样。

【讨论】：

【解决方案2】：

ID 是一个唯一标识符，与类不同，因此在您的 DOM 中应该只有一个具有相同名称的标识符。

【讨论】：

【解决方案3】：

getElementById 旨在查找 DOM 中具有指定 ID 的一个元素。

如果您需要获取多个元素，那么可以多次调用 getElementById。

请参阅此处获取有关 getElementById 方法的文档，该方法表明它只接受一个 ID 参数：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

【讨论】：