js关于dom的操作

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");

猜你喜欢