`
hanxinyu
  • 浏览: 127298 次
  • 来自: henan china
社区版块
存档分类
最新评论

关于document.getElementById的一些细节

阅读更多
[code]

document.getElementById 有时会抓name放过了id ,据说是IE的一个BUG;
http://community.csdn.net/Expert/topic/4223/4223888.xml?temp=.1947443

页面中有
<input type="hidden" id="hello8" name="category_id" value="2" />
<select id="category_id" onchange="al();">

一个是name="category_id" 一个是id="category_id"
用document.getElementById取第二个,可是,取到的却是第一个name=category_id
在IE中getElementById竟然不是先抓id而是先找name相同的物件...

兩個form,每個form有兩個textbox,兩個form中的textbox是相同的name,但id都不同...
這樣在Firefox是沒問題的...但在IE卻只抓得到第一個出現的name資料

下面这段代码可以验证这个结果
<HTML>
<HEAD>
<TITLE> getElementById </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function chkacc(){
alert(document.getElementById("tbxuid1").value);
alert(document.getElementById("tbxpwd1").value);
alert(document.getElementById("tbxuid").value);
alert(document.getElementById("tbxpwd").value);
}
//-->
</SCRIPT>
<BODY>
<FORM METHOD=POST ACTION="" name="frm1">
<INPUT TYPE="text" NAME="tbxuid" id="tbxuid1">
<INPUT TYPE="text" NAME="tbxpwd" id="tbxpwd1">
</FORM>
<FORM METHOD=POST ACTION="" name="frm2">
<INPUT TYPE="text" NAME="tbxuid" id="tbxuid">
<INPUT TYPE="text" NAME="tbxpwd" id="tbxpwd">
<INPUT TYPE="button" value="檢查" name="btnchk" onclick="chkacc();">
</FORM>
</BODY>
</HTML

② javascript中的getElementbyId使用
网页中的元素必须有id属性,才能通过这个方法得到,比如
<input type=text name="content" id="content">

③获取html标记主要有两种方法,一种是通过ID值,一种是通过name属性
name属性主要用于form表单内的input标记

[/code]
分享到:
评论

相关推荐

    document.getElementById的一些细节

    ① document.getElementById 有时会抓name放过了id ,据说是IE的一个BUG; http://community.csdn.net/Expert/topic/4223/4223888.xml?temp=.1947443 页面中有 程序代码 &lt;input type=”hidden” id=”hello8...

    iframe局部刷新.txt

    document.getElementById("1").style.backgroundColor = "#900"; document.getElementById("2").style.backgroundColor = "#999"; document.getElementById("3").style.backgroundColor = "#999"; document....

    html + css + js 实现省市县三级联动

    document.getElementById('province').addEventListener('change', function() { var province = this.value; var cities = regions[province]; // 清空城市和区县下拉框 document.getElementById('city')....

    关于datagrid的鼠标经过事件,显示datagrid中数据

    document.getElementById("td3").innerText = "地区:" + DicAreaFullName; document.getElementById("td4").innerText = "详细地址:" + FullAddress; document.getElementById("td5").innerText = "联系号码:...

    js+css实现增加表单可用性之提示文字.docx

    document.getElementById("description").style.display = "inline"; } }; document.getElementById("keyword").onfocus = function() { if (!document.getElementById("keyword").value) { document....

    鼠标移入图片放大

    document.getElementById('normal-img').addEventListener('mouseover', function() { var img = document.createElement('img'); img.src = this.src.replace('small', 'large'); // 假设大图文件名是small替换为...

    JS鼠标经过图片文字变化特效.zip

    在JavaScript的世界里,实现鼠标经过图片时文字变化的特效是一种...如果你想要了解更多关于这个特效的实现细节,或者探索更多的JavaScript交互特效,这个"JS鼠标经过图片文字变化特效.zip"文件将是一个很好的学习资源。

    纯小白开发js弹窗插件(纯js源码,不使用jQuery)

    document.getElementById('closeBtn').addEventListener('click', function() { document.getElementById('popup').style.display = 'none'; }); // 触发弹窗显示的逻辑,例如点击某个链接或按钮 document....

    JSP右下角弹出视频代码

    document.getElementById("eMeng").style.left=parseInt(document.body.scrollLeft,10)+docWidth-divWidth; document.getElementById("eMeng").style.visibility="visible"; ``` 在页面加载完成后,视频元素被设置为...

    html和javascript技术实现模式窗口传参数示例

    document.getElementById('openButton').addEventListener('click', function() { document.getElementById('modalWindow').style.display = 'block'; }); ``` 为了将表单内容传递给请求页面,我们可以使用...

    弹出图片代码

    document.getElementById('openPopup').addEventListener('click', function() { document.getElementById('popup').style.display = 'block'; document.getElementById('overlay').style.display = 'block'; }); ...

    html+js实现简洁的计算器代码(加减乘除)_.docx

    #### 一、项目概述 ...通过这个示例,我们不仅学会了如何使用HTML和JavaScript来创建一个功能完备的小工具,还了解了网页编程的一些核心概念和技术细节。希望本文能为你提供有价值的参考和启示。

    js模拟listbox

    document.getElementById('leftBtn').addEventListener('click', () =&gt; { const lb1 = document.getElementById('listBox1'); const lb2 = document.getElementById('listBox2'); if (lb2.children.length &gt; 0) {...

    JS浮动菜单是如何作出来的mouse事件

    document.getElementById('menu').style.display = 'block'; } function hideMenu() { document.getElementById('menu').style.display = 'none'; } ``` #### 进阶技巧 1. **动态位置调整**:为了使浮动...

    纯div+css实现的仿QQ音乐返回顶部和返回底部特效源码.zip

    document.getElementById('bottomBtn').addEventListener('click', function() { window.scrollTo(0, document.body.scrollHeight); }); ``` 以上就是使用纯HTML、CSS和JavaScript实现“返回顶部”和“返回底部”...

    网页选中文字实现弹出编辑框

    document.getElementById('editBtn').style.display = 'block'; } else { document.getElementById('editBtn').style.display = 'none'; } }); ``` 当用户点击编辑按钮时,弹出一个编辑框。这个编辑框可以是...

    js特效实现(弹出层)

    document.getElementById('close').addEventListener('click', function() { document.getElementById('mask').style.display = 'none'; document.getElementById('popup').style.display = 'none'; }); // ...

    js弹出对话框,其他灰屏,

    document.body.removeChild(document.getElementById('overlay')); } else { document.body.style.overflow = 'auto'; document.body.style.position = 'static'; document.body.style.backgroundColor = '...

Global site tag (gtag.js) - Google Analytics