操作DOM

时间：2021-07-02 16:16:13 收藏：0 阅读：0

操作DOM节点，做常用的是document.getElementById() 和 document.getElementsByTagName() ，以及css选择器document.getElementsByClassName();

document.getElementsByTagName() 和 document.getElementsByClassName() 总是返回一组DOM节点。

 // 先定位ID为‘text-table‘ 的节点，再返回其内部所有tr节点
var trs = documet.getElementById(‘test-table‘).getElementsByTagName(‘tr‘);
// 先定位ID为‘test-table‘ 的节点，再返回其内部所有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() 和 querySelectorAll(),

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector(‘#q1‘);

// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll(‘div.highlighted > p‘);

更新DOM

innerText 和 textConent 的区别：

读取属性时，innerText 不会返回隐藏元素的文本，而textContent 返回所有文本。