JavaScript操作dom树

操作dom树

*appendChild方法

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

特点：类似于剪切的效果

代码：

<div id = "div1">

                  <ul id = "ulid">

                          <li>first</li>

                          <li>second</li>

                          <li>third</li>

                  </ul>

         </div>

         <div id = "div2">

                 

         </div>

         <input type="button" value="点击吧" οnclick="swap()">

         <script type="text/javascript">

                  function swap()

                  {

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

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

                          div2.appendChild(ul);

                  }

 

         </script>

点击之后：

*insertBefore(newNode,oldNode)方法

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

两个参数

要插入的节点

在谁之前插入

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

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

代码：

<div id = "div1">

                  <ul id = "ulid">

                          <li id = "li1">first</li>

                          <li id = "li2">second</li>

                          <li id = "li3">third</li>

                  </ul>

         </div>

 

         <input type="button" value="点击吧" οnclick="insert()">

         <script type="text/javascript">

                  function insert()

                  {

                          var insertli = document.createElement("li");

                          var text = document.createTextNode("okokok");

                          insertli.appendChild(text);

 

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

                         

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

                          ulid.insertBefore(insertli,li2);

                  }

 

         </script>

点击之后：

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

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

 

代码：

<div id = "div1">

                  <ul id = "ulid">

                          <li id = "li1">first</li>

                          <li id = "li2">second</li>

                          <li id = "haha">hewfuiwefghuiew</li>

                          <li id = "li3">third</li>

                  </ul>

         </div>

 

         <input type="button" value="点击吧" οnclick="remove()">

         <script type="text/javascript">

                  function remove()

                  {

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

                          var lihaha = document.getElementById("haha");

                          ul.removeChild(lihaha);

                  }

 

         </script>

点击后：

 

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

两个参数：

第一个参数：新节点

第二个参数：旧节点

代码：

         <div id = "div1">

                  <ul id = "ulid">

                          <li id = "li1">first</li>

                          <li id = "li2">second</li>

                          <li id = "li3">third</li>

                  </ul>

         </div>

 

         <input type="button" value="点击吧" οnclick="replace()">

         <script type="text/javascript">

                  function replace()

                  {

                          var newli = document.createElement("li");

                          var text = document.createTextNode("第一个");

                          newli.appendChild(text);

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

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

                          ulid.replaceChild(newli,li1);

                  }

 

         </script>

点击后：

 

*cloneNode(boolean)：复制节点

代码：

<div id = "div1">

                  <ul id = "ulid">

                          <li id = "li1">first</li>

                          <li id = "li2">second</li>

                          <li id = "li3">third</li>

                  </ul>

         </div>

         <div id = "div2">

                 

         </div>

 

         <input type="button" value="点击吧" οnclick="copy()">

         <script type="text/javascript">

                  function copy()

                  {

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

                          var ulcopy = ul.cloneNode(true);

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

                          div2.appendChild(ulcopy);

                  }

 

         </script>

点击后：

*innerHTML属性

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

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

<p id = "pid">这是一个好孩子</p>

         <input type="button" value="点击吧" οnclick="copy()">

         <script type="text/javascript">

                  function copy()

                  {

                          var p = document.getElementById("pid");

                          alert(p.innerHTML);

                  }

         </script>

第二个作用：向标签里面设置内容（可以是html代码）

 

         <p id = "pid">这是一个好孩子</p>

         <div id = "div1">

                 

         </div>

 

         <input type="button" value="点击吧" οnclick="copy()">

         <script type="text/javascript">

                  function copy()

                  {

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

                          div1.innerHTML = "<input type = 'text' value = '哈哈哈'>";

                  }

 

         </script>

点击之后：

案例 动态显示时间

*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);