冯美杰就是我。单纯的个人博客,只做记录,别无其他。
Powered By wordpress ,Theme By 天兴工作室
js学习之操作DOM
fmj 发布于 2016年09月28日 64 浏览 0 评论
回忆下今天的所学,操作DOM一共有四种方式:
更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容;
遍历:遍历该DOM节点下的子节点,以便进行进一步操作;
添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点;
删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点。
js操作DOM的语法汇总如下:
// 返回ID为'test'的节点: var test = document.getElementById('test'); // 先定位ID为'test-table'的节点,再返回其内部所有tr节点: var trs = document.getElementById('test-table').getElementsByTagName('tr'); // 先定位ID为'test-div'的节点,再返回其内部所有class包含red的节点: var reds = document.getElementById('test-div').getElementsByClassName('red'); // 获取节点test下的所有直属子节点: var cs = test.children; // 获取节点test下第一个、最后一个子节点: var first = test.firstElementChild; var last = test.lastElementChild; / 通过querySelector获取ID为q1的节点: var q1 = document.querySelector('#q1'); // 通过querySelectorAll获取q1节点内的符合条件的所有节点: var ps = q1.querySelectorAll('div.highlighted > p');
然后汇总下踩的坑:
当一个div有两个class属性的时候,js获取可以这么搞:.class1.class2
;
获取某个元素下指定第几个子元素的时候可以这么干:document.getElementsByClassName('c-green')[1].lastElementChild;
Tags:
#DOM
上一篇: 逗鸟外传:萌宝满天飞和豆瓣的水军
下一篇: js实操之赋值比较判断
猜你喜欢
- 05-29 好日子还在后头
- 05-24 新路线!
- 03-27 采蘑菇
- 03-14 部队锅??
- 03-11 油菜花
- 03-04 换wordpress了
- 12-30 第一本书
- 12-27 2021网易云年度个人歌曲
- 12-13 秘制酱料
- 11-20 谁特么买小米...
×
欢迎评论
冯美杰就是我。单纯的个人博客,只做记录,别无其他。
Powered By wordpress ,Theme By 天兴工作室