请选择 进入手机版 | 继续访问电脑版
点击联系客服
客服QQ:509006671 客服微信:mengfeiseo

广州老站长门户

 找回密码
 立即注册
查看: 56|回复: 50

[js知识] DOM如何获取元素

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-4-7 21:38:19 | 显示全部楼层 |阅读模式
目录

一、通过元素类型的方法操作id获取getElementByIdclass获取getElementsByClassName标签名称获取getElementsByName属性获取getElementsByName选择器获取元素获取querySelector选择器元素组query  selector

一、通过元素类型的方法来操作 id获取 getElementById DIVID=' box  '/DIV

脚本(脚本)

letbox=document  . getelementbyid(' box  ');

/script  class获取 getElementsByClassName注意:此方法导入集合

Divclass='box'/div

Divclass='box'/div

脚本(脚本)

letbox  collection=document  . getelementsbyclassname(' box  ');

letbox  1=box  list[0];

letbox  2=box  list[1];

/script  标签名获取 getElementsByTagName注意:此方法导入集合

DIVID=' box  '

p第1/p段

P第2/p段

P第3/p段

P第4/p段

P第5/p段

P第6/p段

/div

脚本(脚本)

letp  collection=document  . getelementsbytagname(' p  ');

/script  name属性获取 getElementsByName注意:只有包含name属性的元素(表单元素)才能通过name属性获得

DIVID=' box  '

Inputtype='text'name='user'/

/div

脚本(脚本)

letuser  input=document  . getelementsbyname(' user  ');

/script  选择器获取一个元素 querySelector divid=' box  '/div

脚本(脚本)

letbox=document  . query  selector(' # box  ');

/script  选择器获取一组元素 querySelectorAll div  class=' box  ' box  1/div

Divclass='box'box2/div

Divclass='box'box3/div

Divclass='box'box4/div

Divclass='box'box5/div

脚本(脚本)

Letbox1=document.queryselector(' .BOX  ');

letboxes=document  . queryselectorall(' .BOX  ');

/script结果如下图所示。
FFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" alt="" style="margin:auto;" class="cto-img" />
注意:querySelector()和querySelectorAll()方法括号中的取值都是选择器,但从图中我们可以看出,两个方法是有区别的。当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。
获取html的方法 document.documentElementdocument.documentElement是专门获取html这个标签的
获取body的方法 document.bodydocument.body 是专门获取body这个标签的。
总结:所有获取DOM对象的方法中,只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身,可直接为其绑定事件。
getElementXXX类型的方法,除了通过Id获取元素,其他都返回一个集合,如果需要取到具体的DOM元素,需要加索引,如:document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。
querySelector()与querySelectorAll()两者的联系与区别:
联系: 两者括号中的取值都是选择器
区别: 当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。
参考原生js获取DOM对象的几种方法
js获取DOM节点的几种方式
二、根据关系树来选择(遍历节点树)parentNode//获取所选节点的父节点,最顶层的节点为#document
childNodes //获取所选节点的子节点们
firstChild //获取所选节点的第一个子节点
lastChild //获取所选节点的最后一个子节点
nextSibling //获取所选节点的后一个兄弟节点  列表中最后一个节点的nextSibling属性值为null
previousSibling //获取所选节点的前一兄弟节点   列表中第一个节点的previousSibling属性值为null
三、基于元素节点树的遍历(遍历元素节点树)parentElement //返回当前元素的父元素节点(IE9以下不兼容)
children  // 返回当前元素的元素子节点
firstElementChild //返回的是第一个元素子节点(IE9以下不兼容)
lastElementChild  //返回的是最后一个元素子节点(IE9以下不兼容)
nextElementSibling  //返回的是后一个兄弟元素节点(IE9以下不兼容)
previousElementSibling  //返回的是前一个兄弟元素节点(IE9以下不兼容)
四、获取元素内容innerHTML:可以设置和获取元素的标签+文本内容(jq:html())
innerText:可以设置和获取元素的文本内容(jq:text())
value:可以获取表单元素中的value值(jq:val())
setAttribute()
设置属性 .setAttribute("属性","值")
getAttribute()
获取属性 .getAttribute("属性")
removeAttribute()
删除属性,obj.removeAttribute('属性名')
回复

使用道具 举报

0

主题

625

帖子

-50

积分

限制会员

积分
-50
发表于 2021-4-7 21:39:44 | 显示全部楼层
找到好贴不容易,我顶你了,谢了
回复

使用道具 举报

0

主题

639

帖子

-76

积分

限制会员

积分
-76
发表于 2021-4-7 22:00:51 | 显示全部楼层
不错不错,楼主您辛苦了。。。
回复

使用道具 举报

1

主题

653

帖子

-98

积分

限制会员

积分
-98
发表于 2021-4-7 22:22:34 | 显示全部楼层
帮你顶下哈!!
回复

使用道具 举报

0

主题

630

帖子

-97

积分

限制会员

积分
-97
发表于 2021-4-7 22:44:32 | 显示全部楼层
不错不错,很好哦
回复

使用道具 举报

0

主题

684

帖子

-97

积分

限制会员

积分
-97
发表于 2021-4-7 23:08:54 | 显示全部楼层
帮帮顶顶!!
回复

使用道具 举报

0

主题

632

帖子

-66

积分

限制会员

积分
-66
发表于 2021-4-7 23:36:31 | 显示全部楼层
好好 学习了 确实不错
回复

使用道具 举报

1

主题

636

帖子

-78

积分

限制会员

积分
-78
发表于 7 天前 | 显示全部楼层
前排支持下
回复

使用道具 举报

1

主题

660

帖子

-90

积分

限制会员

积分
-90
发表于 7 天前 | 显示全部楼层
好帖,来顶下
回复

使用道具 举报

1

主题

679

帖子

-85

积分

限制会员

积分
-85
发表于 7 天前 | 显示全部楼层
不错不错,楼主您辛苦了。。。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|无图版|手机版|小黑屋|广州@IT精英团

GMT+8, 2021-4-15 03:27 , Processed in 0.146534 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表