js中document.getElementById(id)的具体用法

本文主要介绍了js中document.getElementById(id)的具体用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1.document.getElementById(id)是javascript中访问某个元素的方法。

2.括号中的id是用来标识某个元素的。

3.具体用法:

例如:通过指定的id获取某个元素,并改变其内容

    

这是一个网图

 

我的第一个段落

   

这段代码的操作为获取id为:demo的元素,并修改他为:我的有单javascript代码 

document.getElementById()报错处理

在Microsoft Edge和Google Chrome报错:

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

在Firefox报错:

Uncaught TypeError: document.getElementById(...) is null

  测试 

保存文件名为:错误发生.html

用Microsoft Edge或Google Chrome浏览器打开运行后,再按下F12键可查看到报错信息用浏览器打开,就会看到错误:

用Firefox浏览器打开运行后,再按下F12键可查看到报错信息用浏览器打开,就会看到错误:

document.getElementById()失效的原因分析原因

浏览器加载HTML文档时,会将HTML文档解析为一个树形结构,称为DOM树,代码的执行顺序是自上而下依次执行,当执行到innerHTML这一行代码时,他并没有加载到下面的DOM结构,就会报错无法读取HTML。

简单地说,就是body还没有加载,无法获取DOM元素,  获取不到节点所在的节点。

解决方法

法一、 document.getElementById()需要放在你这个id位置的后面,如果你把

简要说明,参见下图:

保存 文件名为:错误修改.html,用浏览器打开,正常运行显示如下:

法二、还可以如下修改

将document.getElementById()放到函数中,再调用函数。

这里使用HTML onload 事件调用这个函数,源码如下:

  测试 

简要说明,参见下图:

 用浏览器运行显示效果和前面的一样。

附、document的getElementById 方法(method) document.getElementById - Web API 接口参考 | MDN

到此这篇关于js中document.getElementById(id)的具体用法的文章就介绍到这了,更多相关document.getElementById(id)用法内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站!

以上就是js中document.getElementById(id)的具体用法的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程