【译文】如何操作Dom

Dom 操作            原文链接

主要对象是文档对象 ,它一次包含其他几个子节点。每个单独元素在DOM树里面都有对应的存在表示。 文档对象是内建对象,具有很多的属性和方法,可以让我们能够访问和编辑网站页面。

创建DOM 元素

为了创建DOM的一个新元素,可以用createElement() 方法,带一个HTML标签名称作为参数, 并且返回一个特定类型的DOM节点。

<!DOCTYPE html>
<html>
  <body>
    <p>Days:</p>
    <ul id="days">
      <li id="col1">Sunday</li>
      <li id="col2">Monday</li>
      <li id="col3">Tuesday</li>
      <li id="col3">Wednesday</li>
    </ul>
    <button onclick="doIt()">Create New</button>
    <script>
      function doIt() {
        var newNode=document.createElement("LI");
        var txt=document.createTextNode("Thursday");
        newNode.appendChild(txt);
        document.getElementById("days").appendChild(newNode);
      }
    </script>
  </body>
</html>

上面的JavaScript 程序,首先创建一个LI节点,并且创建一个文本节点用来显示文本,将其追加到LI元素的节点上,最后将这个新节点追加的“days”上。

insertBefore(element, targetNode)

Node.insertBefore() 方法在引用节点的前面插入一个节点,并成为指定父节点的子节点。如果给定的子节点是一个已经存在的文档节点,insertBefore() 将它从当前位置移动到新位置。

<!DOCTYPE html>
<html>
  <body>
    <p>Days:</p>
    <ul id="days">
      <li id="col2">Monday</li>
      <li id="col3">Tuesday</li>
      <li id="col3">Wednesday</li>
    </ul>
    <button onclick="doIt()">insertBefore</button>
    <script>
      function doIt() {
        var newItem = document.createElement("LI");
        var textnode = document.createTextNode("Sunday");
        newItem.appendChild(textnode);
        var list = document.getElementById("days");
        list.insertBefore(newItem, list.childNodes[0]);
      }
    </script>
  </body>
</html>

appendChild(element)

Node.appendChild() 方法在一个指定父节点的子节点序列的尾部增加一个节点。如果给定的子节点是已经存在文档节点的引用, appendChild()将它从当前位置移动到新位置。

<!DOCTYPE html>
<html>
  <body>
    <p>Days:</p>
    <ul id="days">
      <li id="col2">Sunday</li>
      <li id="col2">Monday</li>
      <li id="col3">Tuesday</li>
      <li id="col3">Wednesday</li>
    </ul>
    <button onclick="doIt()">appendChild</button>
    <script>
      function doIt() {
        var node = document.createElement("LI");
        var textnode = document.createTextNode("Thursday");
        node.appendChild(textnode);
        document.getElementById("days").appendChild(node);
      }
    </script>
  </body>
</html>

编辑节点

可以编辑DOM元素,包括改变它们的属性,内容,样式,甚至移动它们的位置。

编辑内容

元素属性innerHTML 用来获得或设置一个序列化的字符串表示,描述HTML元素内容。它不返回 HTML 标记。用这个方法设置内容的时候,将清除节点里的内容,并插入新的文本内容。

 
<!DOCTYPE html>
<html>
  <body>
    <p id="heading">这个将变化....</p>
    <button onclick="doIt()">编辑上面的文本</button>
    <script>
      function doIt() {
        var txt = document.getElementById('heading').innerHTML; alert(txt);
        document.getElementById('heading').innerHTML = "Its Changed.....";
      }
    </script>
  </body>
</html>

编辑样式

HTMLElement.style 属性获得一个元素内建的样式。当获取的时候,返回一个 CSSStyleDeclaration 对象,它包含这个元素全部样式属性的列表,包含内置的各个属性的值。

 
<!DOCTYPE html>
<html>
  <body>
    <h1 id="heading">这将变为红色...<h1>
    <button onclick="doIt()">编辑上面的文本</button>
    <script>
      function doIt() {
        var txt = document.getElementById('heading').style.color="red";
      }
    </script>
  </body>
</html>

移除节点

与编辑DOM类似, 可以删除目标节点。removeChild() 方法从父节点删除目标节点。

<!DOCTYPE html>
<html>
  <body>
    <p>Days:</p>
    <ul id="days">
      <li id="col2">Sunday</li>
      <li id="col2">Monday</li>
      <li id="col3">Tuesday</li>
      <li id="col3">Wednesday</li>
    </ul>
    <button onclick="doIt()">Remove</button>
    <script>
      function doIt() {
        var list = document.getElementById("days");
        list.removeChild(list.childNodes[0]);
      }
    </script>
  </body>
</html>



此条目发表在博客, 服务器, 程序开发, 计算机安全分类目录,贴了, , , , 标签。将固定链接加入收藏夹。