`

document.getElementById 你真正了解了吗?

阅读更多
text1:
    <input name="textName1" type="text" id="textName2" />
<br>
  text2:
    <input name="textName2" type="text" id="textName1" />
<br>
  <input type="button" name="Submit" value="text1"  onclick=alert(document.getElementById('textName2').value) />
  <input type="button" name="Submit2" value="text2"  onclick=alert(document.getElementById('textName1').value) />

我在IE中测试了上面的代码,在第一个文本框中输入1,在第二个文本框中输入2,然后点下面的两个按钮,猜一下结果是什么?

我本意是按钮1返回第一个文本框的值,按钮2返回个文本框的值。

结果是两个按钮都返回了第一个文本框的值。

说明ie执行document.getElementById(elementName)的时候,返回的是第一个name或者id等于elementName的对象,并不是按照ID来查找的。

在fireFox中不存在这样的问题,fireFox执行document.getElementById(elementName)的时候只查找id等于elementName的对象,如果不存在则返回null。

可能IE是考虑的兼容性的问题才这么做的.

注意:

document.getElementById(" ") 得到的是一个对象,用 alert 显示得到的是

“ object ”,而不是具体的值,它有 value 和 length 等属性,加上 .value 得到的才

是具体的值!



分享到:
评论

相关推荐

    JavaScript HTML DOM.docx

    - 使用 `document.getElementById("id")` 方法可以获取指定 ID 的元素。 ```javascript var x = document.getElementById("intro"); ``` 2. **通过标签名找到 HTML 元素** - 使用 `element....

    js做的上传文件的加载条

    document.getElementById("up").style.display = "inline"; bar = bar + 2; amount = amount + line; document.getElementById("chart").value = amount; document.getElementById("percent").value = bar + "%...

    JavaScript的基础知识点和简单案例.pdf

    通过本节介绍的基础知识点和简单案例,你已经了解了如何使用 JavaScript 创建一个简单的登录页面,并掌握了如何处理表单验证、DOM 操作、事件处理以及基本的异步编程技巧。随着进一步的学习,你将能够运用更多的高级...

    js获取HTML DOM节点详解

    - **高级应用**:如 Prototype 和 MooTools 这样的 JavaScript 框架扩展了 JavaScript,提供了更简洁的语法 `$` 来替代 `document.getElementById()`。例如 `$('id')` 使得获取元素更加方便快捷。 2. **`document....

    js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

    这段代码首先检查`document.getElementById`是否存在,这是所有现代浏览器都支持的特性。然后,它尝试通过`contentDocument`或`Document`属性获取`iframe`的内容,并分别计算`body.offsetHeight`和`body....

    JavaScript特效代码大全,想成为js高手吗?还不快来

    学习如何选择、添加、删除或修改DOM节点是基础,例如使用`document.getElementById()`、`querySelector()`和`querySelectorAll()`等方法。 2. **事件处理**:了解如何绑定和触发事件,如点击(click)、鼠标移动...

    仿真进度条下载(单文件.修改下载文件为指定名字).

    let progressBar = document.getElementById('progressBar'); response.body.onprogress = (event) =&gt; { if (event.lengthComputable) { received = event.loaded; let percent = (received / total) * 100; ...

    真正好用的弹窗图片顠浮代码带关闭安钮一看就会

    标题"真正好用的弹窗图片顠浮代码带关闭安钮一看就会"暗示我们将讨论一种实现此类功能的代码实例,而描述中的重复内容似乎是为了强调其易用性和实用性。 弹窗图片浮动代码通常基于HTML、CSS和JavaScript来创建。...

    IE和FF兼容问题

    - **IE**:支持`document.idname`与`document.getElementById("idName")`两种方法。 **解决方案**:为了兼容性考虑,建议统一使用`document.getElementById("idName")`。 ##### 3. 常量定义 - **IE**:只支持使用...

    prototype介绍和使用方法

    它等同于document.getElementById(),但更加灵活,可以接受多个ID作为参数,一次性返回所有匹配元素的数组。例如: ```javascript var element = $('myDiv'); // 获取id为'myDiv'的元素 var elements = $('myDiv'...

    TaoBaoBuy.zip

    browser.ExecuteScriptAsync("document.getElementById('myButton').innerText = '新文本';"); ``` 在项目“TaoBaoBuy”中,可能涉及到模拟用户登录淘宝的过程,这可能包括填充表单、点击按钮等操作。可以使用...

    JavaScript Table行定位效果

    alert(document.getElementById("t2").offsetWidth); 只要给table设置width(style或本身的width属性),不管设置padding和border是多少,offsetWidth都等于width的值。 经测量offsetWidth是没错的,那就是说是...

    光标停止输入触发事件 js

    - 通过 `document.getElementById()` 方法获取页面中的元素。 - 使用 `value` 属性读取或设置文本框的值。 - 示例中,当确认用户已停止输入时,将第一个输入框 (`myInput`) 的值复制到第二个输入框 (`myInput2`)...

    js模拟点击事件实现代码

    var sub = document.getElementById("subbtn"); var btn = document.getElementById("btn"); btn.onclick = function() { // 这里调用提交按钮的点击方法 sub.click(); } ``` 但是,当我们在不同浏览器(如...

    JS查看对象功能代码

    - 对于非DOM元素,`document.all`也会包含,因此仅依靠`typeof`检查可能不足以过滤出真正的DOM元素。 - 循环中直接使用`o[i]`可能会导致类型错误,因为`i`可能是字符串形式的属性名而非数字索引。 ### 更好的实现...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

     第一:XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解,等待只会让你失去机会;  第二:新知识肯定会有很多新概念,尝试理解和接受,您才可能提高。不要害怕和逃避,毕竟我们...

    js小应用之设定当前系统时间

    document.getElementById('timeDisplay').innerHTML = date.toLocaleString(); } // 使用示例 var customDate = new Date('2022-01-01T00:00:00'); setDisplayTime(customDate); ``` 在这个例子中,我们假设页面上...

    网页不能使用右键的代码

    通过上述代码,你可以了解如何使用JavaScript实现网页上的右键禁用功能。在提供的压缩包文件中,"不能使用鼠标右键1.html"和"不能使用鼠标右键.html"可能是两个演示此功能的实例文件,你可以打开它们查看具体实现。

    JavaScript入门

    例如,通过`document.getElementById()`、`document.querySelector()`和`document.querySelectorAll()`等方法选择元素,再用`.innerHTML`、`.style`属性改变元素的内容和样式。 3. **事件处理**:JavaScript允许...

    当当网上书城

    1. **DOM操作**:JavaScript可以操作文档对象模型(DOM),通过`document.getElementById`、`document.querySelector`或`document.querySelectorAll`等方法获取HTML元素,然后修改其内容、样式或属性。 2. **事件...

Global site tag (gtag.js) - Google Analytics