DOM选择器，即查找标签对象

Posted 2021-01-28 staff

一、查找元素

1、直接查找

document.getElementById(‘id1‘)         //根据ID返回单个标签
document.getElementsByName(‘n1‘)    //根据name属性获取标签集合
document.getElementsByClassName(‘c1‘)  //根据class属性获取标签集合
document.getElementsByTagName(‘div‘)   //根据标签名获取标签集合

2、间接查找

parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

   不常用：查找节点，节点包括：元素，文本，不包括属性

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点

查节点

二、操作标签

1、内容

innerText   //文本 
value       //值

 

2、属性

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性

 

3、class

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类