JS的DOM操作

最新推荐文章于 2023-03-08 08:32:28 发布
最新推荐文章于 2023-03-08 08:32:28 发布
阅读量178 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BowenXu11/article/details/105275316
版权
本文介绍了JavaScript中DOM的基本概念，讲解了如何通过getElementById方法获取HTML元素，并详细阐述了如何为元素动态注册事件，包括使用onclick属性设置点击事件处理函数。同时，针对JS代码在页面元素之前导致无法访问元素的问题，提出了利用window.onload事件确保代码在页面加载完成后执行的解决方案。
摘要由CSDN通过智能技术生成

DOM操作
1.什么是DOM，就是把HTML当成一个Document对象
2.如何获取元素
2.1直接通过window.ID ,就可以获取对象。（不推荐）。
2.2通过document.getElementById(‘ID’) 来获取（推荐）

JS为元素动态注册事件
1.获取元素对象 document.getElmementById（）
2.增加单击对象document.getElmementById（）.οnclick=function(){ // 这就是点击后执行的函数}；
3.如果JS代码写在页面元素代码之前，那么无法访问到页面元素。

解决办法：
JS页面加载完毕事件
1.window.οnlοad=function(){//放在这个里面的代码，都会等到页面加载完成后再执行};

例如

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" /
最低0.47元/天 解锁文章
BowenXu11
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
getElementById的用法
wjxbj的博客
03-13 8330
        getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法：        Element = document.getElementByIdx_x_x(“id”)        ...
getElementById( ) 方法
m0_57835615的博客
05-28 6505
1.getElementById( )方法 getElementById() 方法返回带有指定 ID 的元素 语法格式：
getElementById的使用方法
GongJoe的博客
03-08 9375
属性获取HTML文档中的元素。该方法接受一个字符串参数，即元素的。是JavaScript中的一个DOM方法，用于根据元素的。如果没有找到匹配的元素，则返回。属性值的第一个元素，如果有多个元素具有相同的。在JavaScript代码中，通过。属性值，则只会返回第一个匹配的元素。属性来修改它们的文本内容。以下是一个示例，演示如何使用。方法获取这两个元素，并使用。属性值，并返回具有该。方法只会返回具有指定。
JavaScript getElementById()方法介绍
热门推荐
路虽远，行则必至！
06-25 5万+
getElementById() 根据元素的 id 属性获取一个元素节点对象 getElementById()可以根据元素的 id 属性获取一个元素节点对象，该方法所有浏览器均可使用 返回带有指定 ID 的元素，如下图： 我们可以通过 innerHTML 属性(获取或者设置元素的内容(包含 HTML 标签 解析))，如下图： 我们可以通过 innerText 属性(获取或者设置元素的内容 ...
JS 文档数据模型1 querySelector getElementById
weixin_40746230的博客
05-24 164
querySelector querySelectorAll，getElementById getElementsByClassNamegetElementsByTagName
JavaScript dom操作 趣味案例
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
JavaScript DOM操作 示例代码
06-25
包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
JavaScript dom操作 dom元素查询 示例代码
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
JavaScript dom操作 删除元素 示例代码
最新发布
06-27
JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...
JavaScript基础知识介绍——DOM的getElementByid()方法
qq_37196494的博客
09-14 516
gerElementById()方法可返回对拥有指定ID的第一个对象的引用 document.getElementById(id) HTML DOM定义了多种查找元素的方法，除了getElementById()之外，还有getElementsByName()和getElementByTagName() 不过如果需要查找文档中的一个特定元素，最有效的方法是getElementById() ...
JS 获取元素下指定的子元素
BowenXu11的博客
04-09 8530
//获得li标签下的子元素div function GetLiChildDIV(liObj) { //获取li下的所有子元素 var children = liObj.children; //遍历子元素，当元素是DIV时，返回这个元素 ...
JS的字符串校验（正则表达式）
BowenXu11的博客
04-11 2200
var string = '110011';//待校验的字符串 var regexZipCode = /^\d{6}$/;//正则表达式 var b = regexZipCode.test(string);//正则表达式的test()方法，返回值Boolen alert(b);
JS自动判断文本框是否输入文字，如果没有文字，自动变红
BowenXu11的博客
04-07 1995
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"...
JS通过CHECKBOX来控制层的隐藏与显示
BowenXu11的博客
04-08 1274
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> ...
JS的键值对集合
BowenXu11的博客
03-23 1146
<script type="text/javascript"> //声明键值对集合 var arrayDict = new Array(); arrayDict['键1'] = '二郎神'; arrayDict['键2'] = '孙悟空'; arrayDict['键3'] = '猪八戒'; ...
JS 评分系统
BowenXu11的博客
04-07 945
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"...
JS提取电话和EMAIl
BowenXu11的博客
04-12 773
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> ...
JS的循环递归
BowenXu11的博客
04-17 765
因为js的变量不是强类型，存在变量被覆盖的可能。所以，建议递归用arguments.callee() <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>&...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值