首页 > 其他 > 详细

DOM操作指令

时间:2017-10-17 13:24:18      阅读:259      评论:0      收藏:0      [点我收藏+]

查找元素:

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操作指令

原文:http://www.cnblogs.com/wangqun1234/p/7680654.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!