第30天:DOM对象操作

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏静晴轩

精妙JS代码段搜集

现在到处都是JavaScript,倘若花点时间去体察,每次都能知道点新的东西。一旦你入了门,你总能从这里或是那里领悟到很多知识。一旦发现些许有意思的东西,总习惯...

35750
来自专栏前端说吧

vue-学习笔记(更新中...)

94760
来自专栏dotnet & java

jQuery.prop , jQuery.attr ,jQuery.data

jquery.prop 获取匹配的元素中第一个元素特定的属性值,或者是设置多个元素的属性值。

9320
来自专栏前端知识分享

第60天:js常用访问CSS属性的方法

点语法可以得到 width  属性  和 top属性  带有单位的。 100px

9410
来自专栏IT开发技术与工作效率

VBA函数与过程简洁教程

21530
来自专栏十月梦想

JS转义字符

65440
来自专栏Bingo的深度学习杂货店

Python3切片详解

本文通过一个简单的例子讲解切片的应用: 先构造一个list列表a: a = list(range(1,8)) # [1, 2, 3, 4, 5, 6, 7]...

38650
来自专栏web前端教室

JS基础知识之new操作符 | 前端卧谈会第9期

音频请点此进行收听 音频原文: new操作符是个啥? 就是你搞个 function abc(aa){ this.abc = aa } 然后 var xx = ...

19090
来自专栏coder修行路

Python爬虫从入门到放弃(十四)之 Scrapy框架中选择器的用法

Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpath或者CSS表达式来选择HTML文件的某个部分 Xpath是专门在X...

20580
来自专栏HTML5学堂

获取标签的那些事 之 动态集合

HTML5学堂:今天的内容从一道题开始,很简单,但是,你可能会“跪”得很惨。之后我们自然要挖一挖这个坑喽~所有学过JavaScript的人都知道获取标签,但是真...

27850

扫码关注云+社区

领取腾讯云代金券