前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >document.getElementById详解

document.getElementById详解

作者头像
全栈程序员站长
发布于 2022-09-14 12:30:07
发布于 2022-09-14 12:30:07
2.9K02
代码可运行
举报
运行总次数:2
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

注意:

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

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

是具体的值!

参考资料:

1. document . getElementById 的用法和 DHTML.CHM 的下载地址

http://blog.sina.com.cn/u/4933092a010003k7

今天在网络上查找 document . getElementById 的用法,如下:

A : 语法: oElement = document . getElementById ( sID ) 参数: sID : 必选项。字符串 (String) 。

返回值: oElement : 对象 (Element) 。

说明: 根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象 ,则返回该组对象中的第一个。 如果无符合条件的对象,则返回 null 。

B :有一个例子可以很好的说明:

**************************************************************************** * * * 这个函数中最关键的地方是 document.getElementById ,他是什么呢? * * * * 关于 document.getElementById ,是这样的: * * * * 如: document.getElementById(‘hdrPageHeader_lblTitle’) * * * * 表示的意思是:获取 ID 为 :hdrPageHeader_lblTitle 的对象 * * * * <a id=”hdrPageHeader_lblTitle0″>aa</a> * * <a id=”hdrPageHeader_lblTitle”>bb</a> * * <a id=”hdrPageHeader_lblTitle1″>cc</a> * * <script language=”javascript”> * * <!– * * var idtext=document.getElementById(‘hdrPageHeader_lblTitle’) * * alert(idtext.innerText) * * //–> * * </script> * * * ****************************************************************************

C :另外还得到一个细节:

http://bbs.cnitn.cn/dispbbs.asp?boardid=20&id=12957 ,内容是:

① document.getElementById 有时会抓 name 放过了 id ,据说是 IE 的一个 BUG ; 页面中有 <input type=”hidden” id=”hello8″ name=”category_id” value=”2″ />

<select id=”category_id” οnchange=”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 資料

D :在得到答案后,同时也得到了两本好的手册工具,

1.DHTML.CHM —– 很全面的 DHTML 的参考手册

2.javascript 的参考手册

饮水思源,我还是不要把别人的成果直接放到这里,下面这个地址提供了下载连接:

http://www.xy72.com/bbs/dispbbs.asp?boardID=11&ID=71&page=1

2. document 对象

http://www.phpx.com/man/dhtmlcn/objects/obj_document.html

属性: title ; bgColor ; url; ( 使用: document.title)

方法:

focus

使得元素得到焦点并执行由 onfocus 事件指定的代码。

getElementById

获取对 ID 标签属性为指定值的第一个对象的引用。

getElementsByName

根据 NAME 标签属性的值获取对象的集合。

getElementsByTagName

获取基于指定元素名称的对象集合。

① 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” οnchange=”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資料

下面这段代码可以验证这个结果

document.getElementById详解

document.getElementById详解

document.getElementById详解<HTML>

document.getElementById详解<HEAD>

document.getElementById详解<TITLE> getElementById </TITLE>

document.getElementById详解</HEAD>

document.getElementById详解<SCRIPT LANGUAGE=”JavaScript”>

document.getElementById详解<!–

document.getElementById详解function chkacc(){

document.getElementById详解alert(document.getElementById(“tbxuid1”).value);

document.getElementById详解alert(document.getElementById(“tbxpwd1”).value);

document.getElementById详解alert(document.getElementById(“tbxuid”).value);

document.getElementById详解alert(document.getElementById(“tbxpwd”).value);

document.getElementById详解}

document.getElementById详解//–>

document.getElementById详解</SCRIPT>

document.getElementById详解<BODY>

document.getElementById详解<FORM METHOD=POST ACTION=”” name=”frm1″>

document.getElementById详解<INPUT TYPE=”text” NAME=”tbxuid” id=”tbxuid1″>

document.getElementById详解<INPUT TYPE=”text” NAME=”tbxpwd” id=”tbxpwd1″>

document.getElementById详解</FORM>

document.getElementById详解<FORM METHOD=POST ACTION=”” name=”frm2″>

document.getElementById详解<INPUT TYPE=”text” NAME=”tbxuid” id=”tbxuid”>

document.getElementById详解<INPUT TYPE=”text” NAME=”tbxpwd” id=”tbxpwd”>

document.getElementById详解<INPUT TYPE=”button” value=”檢查” name=”btnchk” οnclick=”chkacc();”>

document.getElementById详解</FORM>

document.getElementById详解</BODY>

document.getElementById详解</HTML

② javascript中的getElementbyId使用

<!– –>

网页中的元素必须有id属性,才能通过这个方法得到,比如

<input type=text name=”content” id=”content”>

③获取html标记主要有两种方法,一种是通过ID值,一种是通过name属性

name属性主要用于form表单内的input标记

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/159576.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Request请求库被废弃了! 我们该用什么替代?
可以看到, Request 在 2020.2.11 就被废弃了, 几乎接触过Node的人都接触过Request, 通过看到一个个库的废弃, 停止支持以及转手, 我们可以看到开源事业的艰辛
治电小白菜
2020/08/25
2.9K0
Request请求库被废弃了! 我们该用什么替代?
读Zepto源码之Ajax模块
Ajax 模块也是经常会用到的模块,Ajax 模块中包含了 jsonp 的现实,和 XMLHttpRequest 的封装。 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea
对角另一面
2017/12/27
3.6K0
INVALID_STATE_ERR: DOM Exception 11
在使用jQuery的ajax且网络很慢、设置了timeout的情况下,直接不判断ajax的readyState而直接取responseText将出会错(此时xhr对象可能只有两个属性可用:
meteoric
2018/11/15
8720
Ajax方式分页加载列表实现
  最近需要用到这个功能,所以这几天一直在研究这个,目前大致功能已实现,后续需要完善,但需要的功能点已完成,记录下;
JQ实验室
2022/02/09
3.5K0
第111天:Ajax之jQuery实现方法
由于jQuery中的Ajax方法是用了内置的deferred模块,是Promise模式的一种实现,而我们这里没有讲过,所以我们就不使用这一模式啦。
半指温柔乐
2018/09/11
6710
详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()
一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数。而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明。 1 $.get("data.php",$("#firstName.val()"),function(data){ 2 3
用户1214487
2018/01/24
4K0
全面分析前端的网络请求方式
这种交互的的缺陷是显而易见的,任何和服务器的交互都需要刷新页面,用户体验非常差, Ajax的出现解决了这个问题。 Ajax全称 AsynchronousJavaScript+XML(异步 JavaScript和 XML)
ConardLi
2019/05/23
1.9K0
Ajax的使用
纯JS原生实现Ajax我们不去讲解这里,直接使用jquery提供的,方便学习和使用,避免重复造轮子,有兴趣的同学可以去了解下JS原生XMLHttpRequest !
Rochester
2020/09/01
1.6K0
Django跨域验证及OPTIONS请求
最近做的一个需求是:有两个后端服务器,一个是老项目(django),一个是新项目(djangorestframework),老项目不能做大的改动,只能在新项目进行修改,并且前端只能使用老项目的。老项目的登录认证是最简单的方式:数据库保存账号密码,登录时发送账号密码,检测是否正常,即算是登录成功。新后端是使用jwt认证方式,使用Django用户模块保存用户信息。以上是需求的前提,现在要做的是在老项目登录成功后,在前端请求新项目接口也能通过用户认证。
星星在线
2020/05/22
3K0
如何在Java中识别和处理AJAX请求:全面解析与实战案例
今天我要给大家分享一些自己日常学习到的一些知识点,并以文字的形式跟大家一起交流,互相学习,一个人虽可以走的更快,但一群人可以走的更远。
喵手
2024/09/17
3280
如何在Java中识别和处理AJAX请求:全面解析与实战案例
JS 中的网络请求 AJAX, Fetch, WebSocket
AJAX 是 Asynchronous JavaScript And XML 的简称,它可以让页面在不刷新的情况下从服务器获取数据。
羽月
2022/10/08
4.2K0
HTTP实用指南 - 笔记
HTTP( Hyper Text Transfer Protocol ) 模型如下图所示,是一个应用层(见上图)的协议,基于 TCP 协议,它有如下特点:
TagBug
2023/03/17
8690
HTTP实用指南 - 笔记
Extjs4.0以上版本 Ext.Ajax.request请求的返回问题
Ext.Ajax.request({ url: posturl, method: 'POST', pa
GuZhenYin
2018/01/04
1.2K0
【JavaWeb】学习笔记——Ajax、Axios
AJAX(Asynchronous JavaScript And XML):异步的JavaScript 和 XML
鸡先生
2022/10/29
8720
【JavaWeb】学习笔记——Ajax、Axios
SpringMVC—Ajax使用
Ajax的核心是XMLHttpRequest对象(XHR){内置对象},XHR为服务器发送请求和解析服务器响应提供了接口,能够以异步方式从服务器获取新数据
Java架构师必看
2021/05/14
1.7K0
SpringMVC—Ajax使用
Ajax中Success中进行跳转问题
我在使用ajax的过程中,当返回成功信息的时候在success:function()跳转另一个页面使用了window.location(“url”)来跳转页面,出现了页面无法跳转的问题。
全栈程序员站长
2022/07/01
5880
代替ajax方法fetch()请求方法
fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能。它们之间的主要区别是,Fetch API 使用了 Promises,它让接口更简单、简洁,避免了回调的复杂性,省去了使用复杂的 XMLHttpRequest API。
IT工作者
2024/04/08
2130
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
AJAX(Asynchronous JavaScript and XML)是一种用于在网页上进行异步数据交互的技术。通过 AJAX,我们可以在不重新加载整个网页的情况下,与服务器进行数据交换并更新部分页面内容。在实现 AJAX 的过程中,创建一个 XMLHttpRequest 对象是必不可少的。
网络技术联盟站
2023/07/07
5980
Koa2开发入门
首先,我们创建一个名为koa2的工程目录,然后使用VS Code打开。然后,我们创建app.js,输入以下代码:
xiangzhihong
2022/11/30
8330
在 JS 中如何使用 Ajax 来进行请求
github 地址:https://github.com/qq44924588...
前端小智@大迁世界
2020/12/07
9.3K0
相关推荐
Request请求库被废弃了! 我们该用什么替代?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验