DOM操作指令
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM操作指令相关的知识，希望对你有一定的参考价值。
查找元素：
document.getElementById 查找元素的id，由于id是唯一的，所以查找出的是一个单独的变量；
document.getElementsByClassName 利用类名查找拥有相同类名的所有元素，由于多个元素可以共用一个类名，所以get到的为一个数组，在利用循环语句进行操作时，不能忘记使用下标；
document.getElementsByTagName 标签名查找，数组；
document.getElementsByName 数组；
操作内容：
非表单元素时在其后或者为其创建的变量名后加 .innerhtml来获取元素中的内容；
表单元素加 .value获取其值；
利用等号=来修改获取的内容
x.innerHTML = xxx;
x.value = xxx;
操作属性：
getAttribute 获取元素中的某一项属性
x.getAttribute("class属性的名称/id名称/自定义属性名称")；
setAttribute 设置元素中的某一项属性
x.setAttribute("属性名称","需要修改的值")；
removeAttribute 移除元素中的某一项属性
x.removeAttribute("属性名称")；
操作样式：
元素名称.style.样式名称 = "需要修改或添加的样式";
x.style.width = "100px";
或者在style标签中设置好style样式，再利用setAttribute修改元素中属性来达到变换样式操作
1 <head> 2 <style> 3 #div1{ 4 width: 50px; 5 height: 50px; 6 background-color: aqua; 7 } 8 #div2{ 9 width: 50px; 10 height: 50px; 11 background-color: aqua; 12 } 13 </style> 14 </head> 15 16 <body> 17 <script> 18 function myFunction(){ 19 var a = document.getElementById("div1"); 20 a.setAttribute("div1","div2"); 21 } 22 </script> 23 <div id="div1" onClick="myFunction()"></div> 24 </body> 25 </script>
用js来创建元素：
createElement
document.createElement("标签名");
追加元素：
appendChild
被追加的元素名.appendChild(追加元素);
删除元素：
remove
元素对象.remove；
限时延迟：
timeout 一次性的限时，只执行一次
interval 延迟，循环，秒表什么的可以用这个
以上是关于DOM操作指令的主要内容，如果未能解决你的问题，请参考以下文章