js学习之操作DOM

回忆下今天的所学，操作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;