首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第30天:DOM对象操作

第30天:DOM对象操作

作者头像
半指温柔乐
发布2018-09-11 14:55:59
3520
发布2018-09-11 14:55:59
举报
文章被收录于专栏:前端知识分享前端知识分享

JS包括三部分:ECMAscript、DOM(文档对象)、BOM(浏览器对象)

一、DOM(文档对象) DOM树 节点(元素、属性、标签、标记等都是节点)

二、访问节点

documment.getElementById() documment.getElementsByTagName() documment.getElementsByClassName() //主流浏览器支持,IE6、7、8不兼容

三、节点访问关系 1、父节点parentNode 2、兄弟节点: 下一个兄弟: nextSibling  //IE6、7、8认识 nextElementSibling  //其他浏览器认识 同理: 上一个兄弟 previousSibling  //IE6、7、8认识 previousElementSibling  //其他浏览器认识

兼容写法 var one=document.getElementById("one"); var div=one.nextElementSibling||one.nextSibling;//先普通浏览器再IE div.style.backgroundColor="red";

3、子节点 firstChild firstElementChild 兼容:one.firstElementChild||one.firstChild lastChild lastElementChild  同上

4、孩子节点 childNodes 选出全部的孩子嫡出) childNodes:标准属性,返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点 火狐、谷歌高版本会把换行也看作是子节点

利用 nodeType==1 时才是元素节点,通过这个来获取元素节点

5、children 选取所有的孩子,只包括元素节点(庶出) IE6、7、8包含注释节点,这个要避免开,去掉注释

四、DOM节点操作 新建、插入、删除、克隆节点等等

1、创建节点 var div document.creatElement("li");//生成一个新的li标签

2、插入节点 (1)appendChild();添加孩子到某个盒子的最后面 (2)insertBefore(插入的节点,参照节点);两个参数必写 demo.insertBefore(test,childrens[0]);//放到第一个孩子的前面 如果第二个参数为null,则默认新生成的盒子放到最后面 demo.insertBefore(test,null);

3、移除节点 removeChild() ; //孩子节点 demo.removeChild(da);

4、克隆节点 cloneNode(); 也就是复制节点 括号里面可以加参数,如果里面是true,深层复制,除了复制本盒子,还复制子节点 如果为false,浅层复制,只复制本节点,不复制子节点

案例:

1、孩子节点

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>孩子节点</title>
 6     <script>
 7         window.onload=function(){
 8             //childNodes用法
 9             /*var ul=document.getElementById("ul");
10             var childrens=ul.childNodes;//选择全部孩子
11             //alert(childrens.length);//7
12             for(var i=0;i<childrens.length;i++){
13                 if(childrens[i].nodeType==1){
14                     childrens[i].style.backgroundColor="blue";
15                 }
16             }*/
17             
18             //children用法
19             var ul=document.getElementById("ul");
20             var childrens=ul.children;//选择所有孩子,只有元素节点
21             alert(childrens.length);
22 
23         }
24     </script>
25 </head>
26 <body>
27 <ul id="ul">
28     <li>123456</li>
29     <li>123456</li>
30     <li>123456</li>
31 </ul>
32 </body>
33 </html>

2、DOM节点操作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM节点操作</title>
 6     <script>
 7         window.onload=function(){
 8             var demo=document.getElementById("demo");
 9             var childrens=demo.children;
10             //创建节点
11             var firstDiv=document.createElement("div");
12             //添加节点
13             demo.appendChild(firstDiv);
14             var test =document.createElement("div");
15             //children[0]就是xiongda
16             demo.insertBefore(test,childrens[0]);
17             //demo.insertBefore(test,null);//若无参照点,则为null,新添加的放到最后面
18 
19             //移除节点
20             var da=document.getElementById("xiongda");
21             demo.removeChild(da);
22 
23             //复制节点
24             var last= childrens[0].cloneNode();
25             demo.appendChild(last);
26             demo.parentNode.appendChild(demo.cloneNode(true));
27         }
28     </script>
29 </head>
30 <body>
31 
32     <div id="demo">
33         <div id="one"></div>
34         <div id="xiongda"></div>
35     </div>
36 <!--<nav></nav>-->
37 </body>
38 </html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-09-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档