getelementbyid 相关问题

getElementById是浏览器中JavaScript常用的一种基本方法，用于通过ID检索HTML或XML文档中的特定元素节点。

如何使用 document.getElementById 在 iframe 中选取元素

我有一个像这样的iframe <html> <head></head> <frameset name="myframe2" cols="0%,...</desc> <question vote="92"> <p>我有一个像这样的<pre><code>iframe</code></pre></p> <pre><code><iframe name="myframe1" id="myframe1" width="100%" height="100%" src="a.html"> <html> <head></head> <frameset name="myframe2" cols="0%, 100%" border="0" frameBorder="0" frameSpacing="0"> <frame name="page1" src="c.html" scrolling="no"></frame> <frame name="page2" src="d.html" > <html> <head></head> <body id="top"> <div id="div1"> <div id="div2"> <div id="div3"> <ul id="x"> <li>a</li> <li>b</li> </ul> </div> </div> </div> </body> </html> </frame> </frameset> </html> </iframe> </code></pre> <p>我想引用元素“x”。我尝试了多种方法，但找不到解决方案。 </p> </question> <answer tick="true" vote="211"> <pre><code>document.getElementById('myframe1').contentWindow.document.getElementById('x') </code></pre> <p><a href="http://jsfiddle.net/qfRYQ/" rel="noreferrer"><strong>小提琴</strong></a></p> <p><a href="http://help.dottoro.com/ljctglqj.php" rel="noreferrer"><pre><code>contentWindow</code></pre></a> 所有浏览器都支持，包括旧版本的 IE。</p> <p>请注意，如果 <pre><code>iframe</code></pre> 的 <pre><code>src</code></pre> 来自其他域，则由于 <a href="http://en.wikipedia.org/wiki/Same_origin_policy" rel="noreferrer">同源策略</a>，您将无法访问其内容。</p> </answer> <answer tick="false" vote="25"> <p>使用 <a href="http://www.w3schools.com/jsref/prop_frame_contentdocument.asp" rel="noreferrer"><pre><code>contentDocument</code></pre></a> 来实现这一点</p> <pre><code>var iframe = document.getElementById('iframeId'); var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document; var ulObj = innerDoc.getElementById("ID_TO_SEARCH"); </code></pre> </answer> <answer tick="false" vote="8"> <p>（这是添加到所选答案中）</p> <p>确保 <pre><code>iframe</code></pre> 在您之前加载</p> <pre><code>contentWindow.document </code></pre> <p>否则，你的<pre><code>getElementById</code></pre>将是<pre><code>null</code></pre>。</p> <p>PS：无法发表评论，评论声誉仍然很低，但这是所选答案的后续，因为我花了一些很好的调试时间试图弄清楚我应该在选择内部之前强制加载<pre><code>iframe</code></pre> -iframe 元素。</p> </answer> <answer tick="false" vote="3"> <p>您需要确保框架已满载最好的方法是使用 onload:</p> <pre><code><iframe id="nesgt" src="" onload="custom()"></iframe> function custom(){ document.getElementById("nesgt").contentWindow.document; } </code></pre> <p>当 iframe 完全加载时，此功能将自动运行。</p> </answer> <answer tick="false" vote="2"> <p>就我而言，我试图抓取 <strong>pdfTron</strong> 工具栏，但不幸的是，每次刷新页面时，它的 <strong>ID</strong> 都会发生变化。</p> <p>所以，我最终用这句话抓住了它：</p> <p><pre><code>const pdfToolbar = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('HeaderItems');</code></pre></p> <p>正如在 tagName 写入的数组中一样，您的应用程序中将始终拥有 iFrame 的固定索引。</p> </answer> <answer tick="false" vote="0"> <p>抱歉，我没有足够的声誉来添加评论，但在这种情况下也许写一个答案是可以的。我一直在寻找更改 Iframe 中某些 html 的 css。我有一个在 iframe 之外工作的书签代码，所以我就快到了：</p> <pre><code>javascript:(function(){ var style = document.createElement('style'), styleContent = document.createTextNode('.notifications-list--cMVsqVbKkaXV4SQ {zoom: 0.8!important;}'); style.appendChild(styleContent); var caput = document.getElementsByTagName('head'); caput[0].appendChild(style); })(); </code></pre> <p>我的 iframe 名为 <pre><code>xm-feed-iframe</code></pre></p> <p>所以我猜你会将代码更改为</p> <pre><code>document.getElementById('xm-feed-iframe').contentWindow.document.getElementById('x') </code></pre> <p>但是我需要使用一个类来更改 css 样式。所以我想这可能就像改变一样简单</p> <pre><code>var caput = document.getElementsByTagName('head') </code></pre> <p>到</p> <pre><code>var caput = document.getElementById('xm-feed-iframe').contentWindow.document.getElementsByTagName('head') </code></pre> <p>所以最终的代码是</p> <pre><code>javascript:(function(){ var style = document.createElement('style'), styleContent = document.createTextNode('.notifications-list--cMVsqVbKkaXV4SQ {zoom: 0.8!important;}'); style.appendChild(styleContent); var caput = document.getElementById('xm-feed-iframe').contentWindow.document.getElementsByTagName('head'); caput[0].appendChild(style); })(); </code></pre> <p>嘿，很快就成功了。我现在可以更深入地研究一下，并希望将一些计数器添加到 iframe 中出现的列表中！ :)</p> <p>任何有关代码的评论将不胜感激，因为我是自学的！</p> <p>希望这对其他人有帮助</p> <p>谢谢</p> <p>更新：我们在这里 - 我知道有一个使用书签的编号列表。我的生活现在将变得更加轻松，因为我将不再丢失我需要下载的所有项目。：D</p> <p><a href="https://i.stack.imgur.com/tDVm0.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3REVm0wLnBuZw==" alt=""/></a></p> </answer> <answer tick="false" vote="0"> <p>我通过使用 .contentDocument 而不是 .contentWindow 解决了这个问题</p> </answer> </body></html>

javascript html iframe getelementbyid frameset

回答 0 投票 0

当没有“ID”可用时，使用“名称”访问表单元素

我是脚本编写新手。我正在尝试自动化一些网络表单填写任务。我能够完成分配了 HTML“ID”标签的大部分部分。例如，如果表格中有这样的内容：我是脚本新手。我正在尝试自动化一些网络表单填写任务。我能够完成分配了 HTML“ID”标签的大部分部分。举个例子，如果表格有这样的内容： <input type="text" maxlength="30" size="30" value=" " name="desc" id ="id1"></input> 我使用了类似下面的代码来为文本框分配一个值。 oIE.Document.All.Item("id1").Value = "MESSIAH1" 但是，我正在处理的一些表格具有（代码如下）： <input type="text" maxlength="30" size="30" value=" " name="desc"></input> 没有“ID”，只有“名字” 我们在这里做什么？有什么指点吗？一般来说，我的问题是，当我没有关联的 HTML“ID”而只有“名称”时，如何填写/访问表单（元素）。感谢所有帮助 *如果重要的话，我在 IE8 上运行 VBSCRIPT。 getElementsByName 返回 HTMLCollection。您可以像这样访问第一项的值： document.getElementsByName("desc").item(0).value 或者像这样： document.getElementsByName("desc")[0].value 更多信息： https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection 字体：使用 document.getElementsByName() 不起作用？

html forms getelementbyid getelementsbyname

回答 1 投票 0

如何在使用 document.getElementById 时在图像 src 中写入变量的内容？

我有以下代码文档.write(""); 文档.write(" 我有以下代码 document.write("<img src=./", i, ".png width='100px' height='100px'>"); document.write("<img src=./", x, ".png width='100px' height='100px'>"); document.write("<img src=./", y, ".png width='100px' height='100px'>");` 并且我想在 src 中使用 getElementById(myImg).InnerHTML。我试过这个 document.getElementById("myImg").innerHTML.src = "./", i, ".png width='100px' height='100px'>"; 但是它不起作用正确的写法是什么？更改 src，而不是 InnerHTML.src。您可以在这个问题中看到答案。并且您需要设置 width height 的 style document.getElementById("myImg").src=`./${i}.png`; document.getElementById("myImg").style.width="100px"; document.getElementById("myImg").style.height="100px"; 您的代码中有语法错误。试试这个 const img = document.getElementById("myImg"); const i = 'some_string_or_number' img.src = "./"+i+".png"; img.width='100px'; img.height='100px';

javascript getelementbyid

回答 2 投票 0

querySelector() 和 getElementBy[Id/ClassName/TagName] 有什么区别？

我不明白使用 querySelector() 和 getElementById() 之间的区别。我知道 querySelector 通过使用任何选择器来检索元素，这使得它更加通用......

javascript dom getelementbyid queryselector

回答 1 投票 0

为什么相同的 getElementById 代码适用于一个部分，但不适用于第二部分？

我有 2 个字段（机器和工厂）需要根据用户在输入字段中选择的选项自动生成。 “机器”有一个用于下拉选择的数组，而“植物”有

html user-input getelementbyid

回答 1 投票 0

在pokedex项目中调用数组

我最近设计了一个神奇宝贝图鉴，并创建了一个包含所有神奇宝贝 ID 和类别的数组，如下所示。常量图鉴 = [ { 神奇宝贝：（'妙蛙种子'）， dex信息：[ { dexName: ('妙蛙种子...

javascript arrays function variables getelementbyid

回答 1 投票 0

有没有办法通过文本内容获取元素？

我有一个问题困扰了一段时间，抱歉在论坛上发了一些垃圾邮件。有什么方法可以通过元素的文本内容获取元素吗？这是一个例子：我有一个问题困扰了一段时间，很抱歉在论坛上发了一些垃圾邮件。有什么方法可以通过元素的文本内容获取元素吗？这是一个例子： <span id="result_5_name" class="market_listing_item_name" style="color: #FFD700;">Item | Anodized Navy</span> 我试图通过文本内容“Item | ”来获取元素阳极氧化海军蓝'。是否可以做类似的事情： function getelem { var item = document.getElementsByTextContent('Item | Anodized Navy'); item[0].click(); } 我知道这并不存在，但这只是为了让你明白这个想法。另外，我无法通过 Id 或类名使用，并且无法更改元素的 HTML 代码，因此必须使用文本内容来完成，我没有看到其他方法。我非常感谢任何反馈，谢谢！尽管 jQuery 公开了 :contains 伪选择器，但明智的做法是首先在可能的情况下使用类来限制结果： $('.market_listing_item_name:contains("Item | Anodized Navy")') 缩小要搜索的初始标签集可以提高性能，否则将考虑所有标签；此外，重叠的标签也会匹配。在更现代的浏览器上，您可以考虑这一点，基于这个答案： function contains(selector, text) { var elements = document.querySelectorAll(selector); return [].filter.call(elements, function(element) { var contents = element.textContent || element.innerText || ''; return contents.indexOf(text) != -1; }); } var items = contains('.market_listing_item_name', 'Item | Anodized Navy') items[0] && items[0].click(); 好吧，既然您用 jquery 标记了问题，您可以使用 :contains 选择器： var item = $(':contains(Item | Anodized Navy)'); 但请注意，这将返回包含该文本的 every 元素，包括 span 和跨度的所有父元素。如果您只想获取最里面的元素（假设只有一个），只需获取最后一项，如下所示： var item = $(':contains(Item | Anodized Navy)').last(); 要使用 jQuery 实现等效的 without，你必须实现这样的函数： function getElementsByText(text) { var spans = document.getElementsByTagName('span'), results = []; for(var i = 0; i < spans.length; i++) { var content = spans[i].textContent || spans[i].innerText || ''; if (content.indexOf(text) != -1) results.push(spans[i]); } return results; } 或者可能像这样，具体取决于您需要什么： function getElementsByText(text) { function rec(ele, arr) { if (ele.childNodes.length > 0) for (var i = 0; i < ele.childNodes.length; i++) rec(ele.childNodes[i], arr); else if (ele.nodeType == Node.TEXT_NODE && ele.nodeValue.indexOf(text) != -1) arr.push(ele.parentNode); return arr; } return rec(document.body, []); } 然后像这样调用这个函数： var item = getElementsByText('Item | Anodized Navy'); 另请注意，在您的代码中，getelem需要在函数名称后面有()，如下所示： function getelem() { var item = getElementsByText('Item | Anodized Navy'); ... } 也许我回答这个问题晚了，但我没有看到用 JQuery 标记的问题，所以这里有一个纯 JavaScript 解决方案： var myID = getElementsByTextContent('Item | Anodized Navy'); function getElementsByTextContent (elText){ var spanID; var allSpans = document.getElementsByTagName("span"); for (var i = 0; i < allSpans.length; i++) { var spanText = allSpans[i].innerHTML; if(spanText == elText ){ spanID = allSpans[i].id; } } return spanID; } 你想要这样的东西 HTML <span id="result_5_name" class="market_listing_item_name" style="color: #FFD700;">Item | Anodized Blue</span> <span id="result_6_name" class="market_listing_item_name" style="color: #FFD700;">Item | Anodized Navy</span> <span id="result_7_name" class="market_listing_item_name" style="color: #FFD700;">Item | Anodized Red</span> <span id="result_8_name" class="market_listing_item_name" style="color: #FFD700;">Item | Anodized Green</span> <span id="result_9_name" class="market_listing_item_name" style="color: #FFD700;">Item | Anodized Navy</span> Javascript function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { walkTheDOM(node, func); node = node.nextSibling; } } function getElementsByText(node, text) { var results = []; walkTheDOM(node, function (currentNode) { if (currentNode.nodeType === 3 && currentNode.nodeValue === text) { results.push(currentNode.parentNode); } }); return results; } console.log(getElementsByText(document, 'Item | Anodized Navy')); 输出 [span#result_6_name.market_listing_item_name, span#result_9_name.market_listing_item_name] 在 jsFiddle 额外 1，正如我们所讨论的 treeWalker function getElementsByText(node, text) { var results = [], treeWalker = document.createTreeWalker( node, NodeFilter.SHOW_TEXT, { acceptNode: function (node) { return NodeFilter.FILTER_ACCEPT; } }, false); while (treeWalker.nextNode()) { if (treeWalker.currentNode.nodeValue === text) { results.push(treeWalker.currentNode.parentNode); } } return results; } console.log(getElementsByText(document, 'Item | Anodized Navy')); 在 jsFiddle 另外 2，正如我们所讨论的 getElementsByTagName('*') function getElementsByText(node, text) { var results = [], tags = node.getElementsByTagName('*'), tagsLength = tags.length, tagsIndex, currentTag, childNodes, childNodesLength, ChildNodesIndex, currentChildNode; for (tagsIndex = 0; tagsIndex < tagsLength; tagsIndex += 1) { currentTag = tags[tagsIndex]; childNodes = currentTag.childNodes; childNodesLength = childNodes.length; for (ChildNodesIndex = 0; ChildNodesIndex < childNodesLength; ChildNodesIndex += 1) { currentChildNode = childNodes[ChildNodesIndex]; if (currentChildNode.nodeType === 3 && currentChildNode.nodeValue === text) { results.push(currentTag); } } } return results; } console.log(getElementsByText(document, 'Item | Anodized Navy')); 在 jsFiddle 请注意，这些解决方案是相同的，但与此处给出的所有 contains 解决方案不同。因为这些解决方案实际上为您提供了具有匹配文本节点作为子节点的节点。我使用的简单标记并未证明这一点，但当标记高度嵌套时，您很快就会注意到差异。最后这是这 3 个解决方案的 jsPerf。您可以简单地使用Jquery的:contains() 如果要选择包含文本“mytext”的所有范围，请使用 var elements=$('span:contains("mytext")); 如果对您有帮助，请标记为答案。谢谢你:) 对于我的用例，我编写了一些简单的版本。 :not(has(*))对于防止父母的出现很有用。 function getElementsByText(root, text, selector = 'div:not(:has(*))') { const els = [...root.querySelectorAll(selector)]; return els.filter(el => el.innerText == text); }

javascript click getelementbyid tampermonkey

回答 6 投票 0

如何在 javascript 中访问父元素中的类

查看“类似问题”列表，发现一个几乎是我需要的，但不完全...... 我需要的是修改 3 个不同元素内的类的属性。谢谢你

javascript getelementbyid

回答 2 投票 0

使用 HTML 和 JavaScript 创建温度转换器

简而言之，我在一个网站上有两个输入框，分别是“摄氏度”和“华氏度”。基本功能是能够将“F 到 C”和“C 到 F”转换。这听起来...

javascript html addeventlistener getelementbyid parsefloat

回答 1 投票 0

playerSelection() 没有返回，但它传递了一个字符串值？【石头剪刀布游戏】

你好，我目前正在重新审视 html/css/javascript 中的剪刀石头布游戏。现在我正在尝试制作一个相应的网站，您可以在其中单击按钮，它会将您的玩家选择记录在...

javascript html css onclick getelementbyid

回答 1 投票 0

不能在函数之外使用 const/var

这是一个在 Tampermonkey 上运行的 javascript 脚本我无法在定时函数之外使用 const idElement 。我需要在 sendEmail 函数中使用 get 的值。我无法使用 getElementbyId...

javascript html timer getelementbyid mailto

回答 1 投票 0

在 Nightmare evaluate() 中使用时将参数传递给 document.getElementById

我正在尝试使用传入的参数运行我的 checkPrice 函数： const 噩梦 = require('噩梦')() 让 url =“https://www.amazon.co.uk/Guards-Discworld-City-Watch-Collection/dp/

javascript getelementbyid nightmare

回答 1 投票 0

将参数传递给 document.getElementById

我正在尝试使用传入的参数运行我的 checkPrice 函数： const 噩梦 = require('噩梦')() 让 url =“https://www.amazon.co.uk/Guards-Discworld-City-Watch-Collection/dp/

javascript getelementbyid nightmare

回答 1 投票 0

如何使用 DOM getElementById 返回数组

code.js（js文件）让冬天= [“苹果”，“橙子”，“葡萄”]; 控制台.log(冬天); document.getElementById("水果").innerHTML = 冬天; 水果摊为什么我...

javascript arrays dom getelementbyid

回答 1 投票 0

在 Javascript 中使用切换开关时返回值 null 时出错

<div class="form-group col-3"> <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success"> <input type="checkbox" class="custom-control-input" name= "abonnement_apres_essai" id="abonnement_apres_essai" onclick="myFunction()" > <label class="custom-control-label" for="abonnement_apres_essai">Abonnement après essai</label> </div> </div> <script> window.onload = function myFunction() { const val1 = 1; const val2 = 0; var abonnementapresessai = document.getElementById("abonnement_apres_essai"); var afficher_menu_abonnment = document.getElementById("afficher_menu_abonnement"); if (abonnementapresessai.checked == true){ afficher_menu_abonnement.style.display = "block"; document.getElementById("abonnement_apres_essai").value = val1; } else if (abonnementapresessai.checked == false){ afficher_menu_abonnement.style.display = "none"; document.getElementById("abonnement_apres_essai").value = val2; } } </script> 大家好，当启用复选框（切换开关）时，返回值为 1 并保存在数据库中，另一方面，如果禁用该复选框，则该值为空而不是值 0，并在 MySQL 中显示错误。目标是在复选框期间返回值1或0，默认情况下复选框被禁用返回值0，而复选框被启用返回值1 大家有没有办法解决这个问题？谢谢，感谢您的反馈，我使用了数据库的控制器功能： public function store(Request $request) { // $abonnement= new Abonnement; $abonnement->client_id = request('abonnement_select_utilisateur'); $abonnement->forfait_id = request('abonnement_select_forfait'); $abonnement->debut_periode_essai_date = request('abonnement_debut_periode_essai_date'); $abonnement->fin_periode_essai_date = request('abonnement_fin_periode_essai_date'); $abonnement->abonnement_apres_essai = request('abonnement_apres_essai'); $abonnement->date_abonnement = request('abonnement_date'); $abonnement->date_fin_abonnement = request('abonnement_fin_date'); $abonnement->date_desabonnement = request('abonnement_desabonnement_date'); $abonnement->save(); return redirect("/afficher_abonnement"); } 我使用带有 POST 方法的路由

javascript getelementbyid toggleswitch

回答 1 投票 0

getElementById 返回未定义

我创建了下面的 HTML 文件来解决 getElementById 不起作用的原因。我肯定做错了什么，但是什么？ .is-hidden { 显示：否...</desc> <question vote="-1"> <p>我创建了下面的 HTML 文件来解决 getElementById 不起作用的原因。我肯定做错了什么，但是什么？</p> <pre><code><!doctype html> <html> <style> .is-hidden { display: none; } </style> <body> <h1>test this</h1> <p>&nbsp;</p> <a onclick="enableSearch()" >Enable Search</a> <p>&nbsp;</p> <div id="search" class="is-hidden"> <p>This is the Search area</p> </div> <div id="keydates"> <p>This is the Data area</p> </div> <script> function enableSearch() { console.log("Enable Search clicked"); var searchArea = document.getElementById("search"); searchArea.classlist.remove("is-hidden"); } </script> </body> </html> </code></pre> <p>当我单击“启用搜索”时，我希望看到“搜索区域”行出现。这种情况不会发生，因为在 Javascript 控制台日志中我看到“TypeError: undefined is not an object (evaluating 'searchArea.classlist.remove')”</p> <p>“console.log”只是为了确认 onclick 正在工作。</p> <p>我必须补充一点，这是在 Safari 中访问的本地文件。我有许多 Javascript 函数可以毫无问题地操作 Safari 中本地文件中的 HTML DOM，但这是我第一次使用 getElementById。在 Safari 的“开发”菜单中勾选“禁用本地文件限制”没有什么区别。</p> <p>非常感谢。</p> </question> <answer tick="false" vote="0"> <p>这可能只是因为你有类列表而不是类列表。 DOM 属性区分大小写。</p> </answer> </body></html>

getelementbyid

回答 0 投票 0

无法使用 appium 2.0 在浏览器堆栈上通过 id 使用查找元素

我正在使用以下：代码是 C# 的 Appium 2.0 设备或环境浏览器堆栈当我尝试使用我的代码按上面的 id 查找元素时，我无法按 id 查找元素，但是当我使用 sam...

c# getelementbyid browserstack findelement

回答 0 投票 0

在 VBA 中调用多个 java 脚本语句时出现语法错误

在 VBA 宏中，我试图调用 java 脚本语句。下面是 VBA 脚本：昏暗的网址昏暗的 objShell 将文档调暗为 HTMLDocument 子TVA() 网址 = "https://testApp.com 设置 objShel...

excel vba getelementbyid

回答 0 投票 0

我无法正确访问 IFRAME 标签内的元素

遇到这样的问题。我正在为一项服务的后端创建扩展。需要将一页的信息整合到另一页。我决定使用 IFRAME 标签访问...