JavaScript操作dom树

操作dom树

*appendChild方法

添加子节点到末尾   父节点 调用此方法

特点:类似于剪切的效果

代码:

                 

                             

  • first
  •                          

  • second
  •                          

  • third
  •                  

        

        

                 

        

        

        

JavaScript操作dom树_第1张图片

点击之后:

JavaScript操作dom树_第2张图片

*insertBefore(newNode,oldNode)方法

在某个节点之前插入一个新的节点,自己不能插入,需要父节点插入,所以这个方法有父节点调用

两个参数

要插入的节点

在谁之前插入

插入一个节点,节点不存在,就创建

  1. 创建标签
  2. 创建文本
  3. 把文本添加到标签下面

代码:

                 

                             

  • first
  •                          

  • second
  •                          

  • third
  •                  

        

 

        

        

JavaScript操作dom树_第3张图片

点击之后:

JavaScript操作dom树_第4张图片

*removeChild(子节点):删除节点

自己无法删除自己,只能通过父亲节点删除,所以这个方法时父节点调用的

 

代码:

                 

                             

  • first
  •                          

  • second
  •                          

  • hewfuiwefghuiew
  •                          

  • third
  •                  

        

 

        

        

JavaScript操作dom树_第5张图片

点击后:

 

JavaScript操作dom树_第6张图片

*replaceChild(newNode,oldNode):替换节点,也是由父节点调用

两个参数:

第一个参数:新节点

第二个参数:旧节点

代码:

        

                 

                             

  • first
  •                          

  • second
  •                          

  • third
  •                  

        

 

        

        

JavaScript操作dom树_第7张图片

点击后:

JavaScript操作dom树_第8张图片

 

*cloneNode(boolean):复制节点

代码:

                 

                             

  • first
  •                          

  • second
  •                          

  • third
  •                  

        

        

                 

        

 

        

        

JavaScript操作dom树_第9张图片

点击后:

JavaScript操作dom树_第10张图片

*innerHTML属性

这个属性不是dom的组成部分,但是大多数浏览器都支持的属性

第一个作用:获取文本内容

这是一个好孩子

        

        

第二个作用:向标签里面设置内容(可以是html代码)

 

        

这是一个好孩子

        

                 

        

 

        

        

JavaScript操作dom树_第11张图片

点击之后:

JavaScript操作dom树_第12张图片

案例 动态显示时间

*var date = new Date();

*date.toLocaleString();

需要页面每一秒获取一次时间

*setInterval()

显示到页面上:

每一秒向div里面写一次时间

代码:

function time()

                  {

                          var date = new Date();

                          var timeCN = date.toLocaleString();

                         

                           var div = document.getElementById("div1");

                          div.innerHTML = timeCN;

 

 

                  }

                  setInterval("time()",1000);

你可能感兴趣的:(JavaScript)