1.找元素
document.getElementById() //通过id查找元素,前边只能是document,不能是某个特定的父元素
document.getElementsByTagName() //通过标签名获取元素
document.getElementsByClassName() //ie9+支持
document.getElementsByName() //ie中只对表单元素的name有效
document.querySelector() //返回第一个元素,ie9+支持
document.querySelectorAll() //返回元素列表,ie9+支持
获取特殊元素对象
document.documentElement //获取html
document.body //获取body
document.head //获取head
获取子元素 属性:childNodes和children
document.getElementById("father").childNodes //返回父元素的所有子元素,包括文本元素、空格、回车等,不建议使用
document.getElementById("father").children //返回父元素的所有子DOM元素,不包含文本元素,建议使用
firstChild、lastChild 、nextSibling、previousSibling
注意:以上四个属性获取的元素,结果均和childNodes一样,均会包含代码中的文本元素,如空格、回车等,应谨慎使用。
document.getElementById("father").firstChild //获取第一个子元素
document.getElementById("father").lastChild //获取最后一个子元素
document.getElementById("father").nextSibling //获取下一个同胞元素
document.getElementById("father").previousSibling //获取上一个同胞元素
操作dom元素
//createElement:创建新元素
document.createElement("node");
//appendChild:在元素内部最后追加元素
var obj = document.getElementById("id");
var element = document.createElement("node");
obj.appendChild(element);
//insertBefore:在已有子节点前添加新节点
target.insertBefore(newChild,existingChild)
参数说明:
1.target:被添加节点和现有节点的父节点。
2.newChild:将要被插入的节点。
3.existingChild:现有的节点,新节点将会被插入到它的前面,此参数值可以为null。
//remove 删除元素
var obj = document.getElementById("id");
obj.remove();
//删除多个子元素
var re = document.getElementsByClassName('remove');
for (var i = re.length-1;i >=0;i--) {
re[i].remove();
console.log(i);
}
//注意:要删除多个连续元素时,要倒着删除,从元素索引值大的开始删除,不要从小向大删,不然会删不干净
设置/获取元素属性
//setAttribute:为元素设置属性并赋值
document.getElementsByTagName("input").setAttribute("type","button");
//getAttribute:获取元素的某个属性
document.getElementsByTagName("input").getAttribute("type");