关于ducument.getelementbysname对元素取值问题

最新推荐文章于 2024-08-26 17:50:05 发布
转载 最新推荐文章于 2024-08-26 17:50:05 发布 · 281 阅读 · 0

本文解析了在JavaScript中使用document.getElementsByName('name').value获取元素值的常见错误，并提供了正确的实现方式，强调了getElementById与getElementsByName的区别。

转自https://blog.youkuaiyun.com/s891104/article/details/50034919
document.getElementsByName(“name”).value;
像这样是获取不到值的，弹出的消息是 underfined：
原因
getElementById是element单数，
getElementsByName是elements复数。
正确方法：
var x=document.getElementsByName(“name”)[0].value;
或者：var x=document.getElementsById(“id”).value;

如何使用ducument
qq_41413211的博客
10-04 838
记录某个包里函数/属性的用法。
document.getElementById/Name/TagName
binzai325的专栏
09-15 3万+
document.getElementById   1、getElementById 作用：一般页面里ID是唯一的，用于准备定位一个元素 语法： document.getElementById(id) 参数：id :必选项为字符串(String) 返回值：对象; 返回相同id对象中的第一个，按在页面中出现的次序,如果无符合条件的对象，则返回 null exampl
16.Ducument的方法
越努力越幸运的博客
12-31 1367
文章目录Ducument的方法初始化save方法updateOneremovegetsetid或_idtoObject Ducument的方法 JS中的Document和MongoDB中的文档一一对应，Document是Model的实例，即通过Model查询到的结果都是Document。 废话少说，下面我们直接用代码解释。想看官网对Document的用法介绍点击这里。 初始化 首先，我们新建一个JS文件，名为document.js。 输入以下代码： const mongoose = require("mon
document.getElementById()方法使用
热门推荐
酣睡的熊㊣的技术博客
02-07 36万+
document.getElementById使用 语法：oElement = document .getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一
GetElementById,GetElementName
huangzhen222的专栏
01-18 1001
GetElementById方法（非常常用），根据元素Id获得对象，网页中Id不能重复，也可以直接通过元素的Id来引用元素，但是有有效范围之类的问题，因此不建议直接通过Id操作元素，而是通过GetElementById . GetElementById方法在VisualStudio2010中不能在Form中编写，否则有错误。                 functionbtnC
Edusoho-Ducument
05-20
EduSoho项目文档中心 EduSoho是杭州阔知网络科技有限公司推出的开源、免费的互联网教育产品，帮助企业、个人快速建立互联网教育网站。本开源软件简洁易用，定制性强，是开展互联网教学、销售、推广的最好的选择。...
获取ducument中的iframe
11-07
// 对iframe进行操作... } ``` 3. **访问属性或内容**：如果你想获取某个特定属性（如src、height、width等）或者iframe的内容，可以直接访问`iframe`对象的相应属性。 例如，获取第一个`iframe`的源URL： ```...
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body{ margin: 2% 5%; } .book-card{ transition: all 0.3s ease; } .book-card:hover{ transform:scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,0.1); } </style> </head> <body> <div> <h1>在线书店购物车</h1> <div id="book-list"></div> </div> <div> <h2>购物车</h2> <div id="cart-div"></div> </div> <script> var books = [{ id:1, title:"Javascript", price:99.99, cover:'https://picsum.photo/200/300?random=1' }, {id:2, title:"Python", price:79.99, cover:'https://picsum.photo/200/300?random=2' }, {id:3, title:"Html与Css", price:89.99, cover:'https://picsum.photo/200/300?random=3' } ]; var cartAdd=[] function enterDom(){ for (var i = 0;i < books.length;i++){ var book = books[i]; var bookCard = document.createElement('div'); bookCard.className = "book-card"; var htmlbiaoqianpingjie = '<img src = "'+book.cover +'" alt "'book.title + '">' + '<div>' + '<h3>' + book.title + '</h3>' + '<p>' + book.price.toFixed(2) + '</p>' + '<button class="add-to-cart-button" data-id="'+book.id +'">加入购物车</button> ' '</div>' bookCard.innerHTML = htmlbiaoqianpingjie; var bookList = document.getElementById('book-list'); boolList.appendChild(bookCard) } } function renderCart(){ console.log(cartAdd) } function addTom(bookId){ for(var i=0;i<books.length;i++){ if(bookId == books[i].id){ cartAdd.push(books[i]) } } renderCart() } ducument.addEventListener('click',function(e){ var target = e.target if(target.classList.contains("add-to-cart-button")){ var bookId =parseInt(target.getAttribute("data-id"),10) addTom(bookId) } }) enterDom(); </script> </body> </html> 为什么不能运行
最新发布
05-23
你的代码有几个问题，包括拼写错误、逻辑错误和一些语法上的小问题。以下是修正后的代码以及解释： ```html <!DOCTYPE html> 在线书店购物车 body { margin: 2% 5%; } .book-card { ...
document.getElementById
xx_yan的博客
03-28 2万+
var element = document.getElementById(id); 因为Id具有唯一性，所以这个方法用来查找页面中的某一个元素。 无Id元素的查找可以使用CSS选择器 querySelector() 参数 id 大小写敏感的字符串，指代被查找元素 返回值 elemnt 一个DOM中匹配id的Element对象。未查找到此id的Element时，返回null。 注意 get...
document.getElementByid、document.all和document.layers
aaaaatiger--寻路
08-17 1512
document.getElementById 是公共标准，被目前的所有主流浏览器支持document.all只有IE支持。document.all是IE 4.0及以上版本的专有属性，是一个表示当前文档的所有对象的娄组，不仅包括页面上可见的实体对象，还包括一些不可见的对象，比如html注释等等。在document.all数组里面，元素不分层次，是按照其在文档中出现的先后顺序，平行地罗列的。所以
JavaScript中的“直接操作文档”，document.getElementById(“id”)
qq_44760912的博客
10-21 760
直接操作文档 这是最佳的方式，尽量使用这种方式来与网页和用户交互。**使用JavaScript可以访获取用户输入的值，修改HTML或样式，更新网页的内容，全面控制页面。**这些都是利用浏览器的文档对象模型（后面将更详细地讨论）实现的。这是与用户交流的最佳方式。然而，要使用文档对象模型，你必须知道网页的结构，并熟悉用来读写网页的编程接口。 使用innerHTML写入到HTML元素。 学过HTML/C...
document.getElementById详解
我的成长之路
12-15 3万+
注意： document.getElementById(" ") 得到的是一个对象，用 alert 显示得到的是 “ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才 是具体的值！   参考资料： 1. document . getElementById 的用法和 DHTML.CHM 的下载地址 http://blog.sin...
document.getElementsByName和document.getElementById的区别
Divine Mind
02-20 1912
document.getElementsByName和document.getElementById的区别 在JavaScript中，如果想要取得一个元素的话，有document.getElementsByName和document.getElementById这两个方法这两个方法的区别如下：1.  getElementsByName     比如document.getElementsByNam
js中document.getElementById()用法
lyhmyway的专栏
03-03 6万+
dom标准里面的  获取当前文档中指定id的元素 if (document.getElementById("regjm").value != document.getElementById("regjm1").value ) {    alert("提示：请输入有效的认证码");    document.getElementById("regjm1").focus();    retur
通过document.getElementsById来实现 复选框的全选，全部选，反选
z . s . j
03-04 1万+
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档           发票     2013-02-12             旅馆     2013-02-13             乞讨
批量处理标签属性中document.getElementsByName()的替代方案
andou2860的博客
04-07 621
背景 今天在逛知乎时候，看到一个JavaScript方面的问题： 最近在学习JavaScript DOM，就好奇地查阅资料，以及请教学长，得到下面解答： http://www.w3help.org/zh-cn/causes/SD9012 http://www.w3help.org/zh-cn/causes/SD9001 document.getElementsByName(elemen...
document对象获取元素，创建元素
m0_70325779的博客
08-26 2450
但是，调用这三个方法创建的三个对象是各自独立存在的，当我们需要将它们组合在一起形成一个完整的标签时，就需要调用 appendChild 方法和 setAttributeNode 方法，此方法可以将节点文本对象和属性对象加入到标签之内从而形成一个完整的标签；该方法返回指定Id属性值的元素节点，由于各个Id值唯一，所以该方法返回值也只有一个，即指定的某个标签，而不会是多个，此外，该方法参数区分大小写。此外该方法返回匹配到的单个节点元素，如果匹配到多个，只会返回第一个，如果没有匹配到，则返回null；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值