FMJ.me

FMJ.me

一个靠自学的菜鸟,只会html+css,JavaScript是什么鬼?vue.js?php?学不动学不动...

工作室 联系QQ

冯美杰就是我。单纯的个人博客,只做记录,别无其他。

鄂ICP备15002105号

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:
×
欢迎评论
冯美杰就是我。单纯的个人博客,只做记录,别无其他。

鄂ICP备15002105号

Powered By wordpress ,Theme By 天兴工作室

导航 关灯 背景 顶部

纯色背景

图片背景