document获取DOM节点的三种方法详解
来源:互联网 发布:阿里云邮箱地址前缀 编辑:程序博客网 时间:2024/05/21 13:58
最近转行做前端,刷js的时候看到document获取DOM元素的三种方法时懵逼了很久,自行研究一番后分享给大家。 我们通过Document对象至少有三种方式获取DOM元素,分别为:
document.getElementById(); document.getElementsByTagName(); document.getELementsByClassName();
document.getElementById():根据页面标签的唯一id来获取,返回的是一个对象,自然可以调用对象的方法,例如:children。 document.getElementsByTagName():看到elements就知道这个获取的是多个对象,所以返回的是对象的集合,哪怕只有一个一个对象,也会返回长度为1的数组,只能通过索引返回对象调用对象的方法。 document.getELementsByClassName('xxx'):这个跟上面一个类似,返回的也是数组,但是需要注意的是,它会返回所有包含xxx或者只有xxx的标签的数组。下面通过一个例子演示一下:
<div id="test-div"> <div class="c-red"> <p id="test-p">JavaScript</p> <p>Java</p> </div> <div class="c-red c-green"> <p>Python</p> <p>Ruby</p> <p>Swift</p> </div> <div class="c-green"> <p>Scheme</p> <p>Haskell</p> </div></div>
1 .选择<p>JavaScript</p>:
刚好这个p标签里就有id,那么就直接获取
document.getElementById('test-p');
2 . 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
①:var arr=document.getElementById(‘test-div’).getElementsByTagName(‘div’)[1].children;
②:var arr=document.getElementsByClassName(‘c-red’)[1].children;
3 .选择<p>Haskell</p>:
var x=document.getElementsByClassName(‘c-green’)[1].children[1]
阅读全文
0 0
- document获取DOM节点的三种方法详解
- document对象+获取节点三种方法演示:
- html dom获取节点的三种方式
- 获取元素的三种DOM方法
- DOM(document获取节点byId.byName.byTagName)
- 获取标签节点的三种方法
- Js 获取HTML DOM节点元素的几种方法
- 获取DOM节点的所有方法
- javascript获取dom的下一个节点方法
- 通过DOM获取外部样式表的方法document.styleSheets
- 【DOM】(1)通过document获取页面节点的三个属性(nodeName、nodeType、nodeValue)
- javascript三种获取dom对象的方法
- document获取对象三方法
- DOM(一)-11-(document获取节点byId)
- DOM(一)-12-(document获取节点byName)
- DOM(一)-13-(document获取节点byTagName)
- DOM(一)-14-(document获取节点byTagName_2)
- JavaScript对html获取节点的三种方法
- DiskDigger Pro(数据恢复软件园)官方中文注册版V1.17.14.2309下载 | diskdigger pro破解版
- 2017-12-11日周总结
- linux下io模型
- Python Django Mongodb
- Android 自动化测试经验
- document获取DOM节点的三种方法详解
- 简单工程模式
- 猜数字(线程)
- 设计模式-装饰者模式
- 用Oracle写分组计算数量后再合计,并得出百分数
- quartz(三):利用quartz定时执行运行环境检测
- matlab 彩色图和热力图叠加显示
- 三级联动
- css实现两边固定,中间自适应