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、孩子节点

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>孩子节点</title>

     <script>

         window.onload=function(){

             //childNodes用法

             /*var ul=document.getElementById("ul");

             var childrens=ul.childNodes;//选择全部孩子

             //alert(childrens.length);//7

             for(var i=0;i<childrens.length;i++){

                 if(childrens[i].nodeType==1){

                     childrens[i].style.backgroundColor="blue";

                 }

             }*/

             //children用法

             var ul=document.getElementById("ul");

             var childrens=ul.children;//选择所有孩子，只有元素节点

             alert(childrens.length);



         }

     </script>

 </head>

 <body>

 <ul id="ul">

     <li>123456</li>

     <li>123456</li>

     <li>123456</li>

 </ul>

 </body>

 </html>

2、DOM节点操作

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>DOM节点操作</title>

     <script>

         window.onload=function(){

             var demo=document.getElementById("demo");

             var childrens=demo.children;

             //创建节点

             var firstDiv=document.createElement("div");

             //添加节点

             demo.appendChild(firstDiv);

             var test =document.createElement("div");

             //children[0]就是xiongda

             demo.insertBefore(test,childrens[0]);

             //demo.insertBefore(test,null);//若无参照点，则为null,新添加的放到最后面

             //移除节点

             var da=document.getElementById("xiongda");

             demo.removeChild(da);

             //复制节点

             var last= childrens[0].cloneNode();

             demo.appendChild(last);

             demo.parentNode.appendChild(demo.cloneNode(true));

         }

     </script>

 </head>

 <body>

     <div id="demo">

         <div id="one"></div>

         <div id="xiongda"></div>

     </div>

 <!--<nav></nav>-->

 </body>

 </html>

第30天：DOM对象操作的更多相关文章

  1. 原生JS中常用的Window和DOM对象操作汇总

    一.常用的Window对象操作 Window对象中又包含了document.history.location.Navigator和screen几个对象,每个对象又有自己的属性方法,这里window可以 ...

  2. PHP原生DOM对象操作XML'代码'

    对于操作XML类型文件,PHP内置有一套DOM对象可以进行处理.对XML的操作,从创建.添加到修改.删除都可以使用DOM对象中的函数来进行. 创建 创建一个新的XML文件,并且写入一些数据到这个XML ...

  3. dom对象操作Html,Css

    HTML: 1.不要再文档加载完使用document.write,这样会创建新的dom对象,原来的元素将被覆盖. 2.获取元素,通过getElementbyID; getElementbyTag(&q ...

  4. PHP原生DOM对象操作XML的方法解答

    创建一个新的XML文件,并且写入一些数据到这个XML文件中. /** 创建xml文件*/ $info = array(array('obj' => 'power','info' => 'p ...

  5. jQuery Dom对象操作 增、删、改、复制、包裹

    1. 增(插入) 内部插入 //向每个匹配的元素内部追加内容,为最后一个子元素$('.violet').append('<div></div>'); //把所有匹配的元素追加到 ...

  6. Js：DOM对象操作常用的方法和属性

  7. DOM对象操作html元素1

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. 锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)

    1.jQuery对象就是通过jQuery包装DOM对象后产生的对象.   2.jQuery对象和DOM对象的相互转换.   良好的书写风格: var $input=$("input" ...

  9. DOM、Window对象操作

    一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 一.基本语法: 数据类型(字符串,小数,整数,布尔,时间) var, v ...

随机推荐

  1. GeekOS课程设计-project1

    参考:https://blog.csdn.net/qq_35008279/article/details/78984561?tdsourcetag=s_pcqq_aiomsg 补充:如果按照参考博客还 ...

  2. SAP Odata実行命令(2)

    前言 $ skiptokenは.アプリケーションに送信されるエントリ数を制限するために使用されます. 膨大な数のエントリが要求された場合.これはパフォーマンスの向上にも役立ちます.次のリンクがアプリケ ...

  3. xshell5连接虚拟机的小问题处理

    1.首先确保虚拟机是桥接状态,然后在虚拟机下用ifconfig查看ip地址(当然是默认你虚拟机下是linux) 2.确保虚拟机安装了ssh...安装openssh-server: 对应的sudo ap ...

  4. MongoDB入门---文档查询之$type操作符&limit方法&skip方法&简单排序（sort）操作

    上一篇文章呢,已经分享过了一部分查询操作了,这篇文章呢?就来继续分享哈.接下来呢我们直接看MongoDB中的$type操作符哈.它呢是基于BSON类型来检索集合中匹配的数据类型,并且返回结果,在Mon ...

  5. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  6. angularjs transitions

    http://angular-transitions.mgechev.com/#/view/page1 https://scotch.io/tutorials http://stackoverflow ...

  7. Hive支持行级update、delete时遇到的问题

    Hive从0.14版本开始支持事务和行级更新,但缺省是不支持的,需要一些附加的配置.要想支持行级insert.update.delete,需要配置Hive支持事务.(行级的insert好像不配置也能运 ...

  8. SSM-最新pom.xml

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  9. pycharm 3.4 亲测可使用到2019年2月的注册码，要用者从速

    注册码: D87IQPUU3Q-eyJsaWNlbnNlSWQiOiJEODdJUVBVVTNRIiwibGljZW5zZWVOYW1lIjoiTnNzIEltIiwiYXNzaWduZWVOYW1l ...

  10. Python列表操作大全（非常全）

    Python列表操作大全(非常全!!!) 对于python列表的理解可以和C语言里面的数组进行比较性的记忆与对照,它们比较相似,对于python里面列表的定义可以直接用方括号里加所包含对象的方法,并且 ...