zoukankan      html  css  js  c++  java

  • document,element,dom对象api详解

    Document对象：

    • 根元素的访问，也就是HTML标签的访问。使用document.documentElement访问根对象。
    • 使用Document对象查找对象
      • getElementById()：通过节点的id属性，查找对应节点。
      • getElementsByName()：通过节点的name属性，查找对应节点。
      • getElementsByTagName()：通过节点名称，查找对应节点。
    • 使用Document对象的方法创建节点：
      • crateElement(tagName)：创建元素节点。
      • createTextNode(data)：创建文本节点。
      • createAttirbute(name)：创建属性节点。(不使用)

    Element对象：

    • 操作Element对象的属性：
      • 获取属性：getAttribute(name);方法
      • 设置属性：setAttribute(name,value)方法。
      • 删除属性：removeAttribute(name);方法。
    • 在Element对象中查找Element对象：
      • 在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法。而该方法返回的是一个集合。

    Element对象的一个案例：

    • 在一个<ul></ul>标签下创建一个li标签
      [html] view plain copy
       
      1. <body>  
      2.     <ul id="city">  
      3.     <li id="bj" name="beijing">北京</li>  
      4.     <li id="tj" name="tianjin">天津</li>  
      5.    </ul>  
      6.         <script type="text/javascript">  
      7.             //创建一个标签元素  
      8.         var liElment = document.createElement("li");  
      9.         //创建一个文本节点  
      10.         var textElement = document.createTextNode("上海");  
      11.         //将文本节点加到标签元素下面  
      12.         liElment.appendChild(textElement);  
      13.         //为标签元素创建属性  
      14.         liElment.setAttribute("id","sh");  
      15.         liElment.setAttribute("name","Shanghai");  
      16.         //将标签元素加到ul标签下  
      17.         document.getElementById("city").appendChild(liElment);  
      18.         </script>  
      19.  </body>  

    Node对象包含：

    • 节点名称，值和类型。
    • 父节点，子节点和同辈节点。
    • 节点属性
    • 检测子节点和属性。
    • 操纵Dom节点树。
    • 复制和移动节点。

    节点名称，值和类型：

    • nodeName：其内容就是给节点的名称。
      • 如果是元素节点，nodeName返回这个元素的名称。
      • 如果是属性节点，nodeName返回这个属性的名称。
      • 如果是文本节点，nodeName返回这个内容为#text的字符串。
    • nodeType：返回一个整数，这个数值代表给点节点的类型。
      • Node.ELEMENT_NODE：1，元素节点。
      • Node.ATTRIBUTE_NODE：2，属性节点。
      • Node.TEXT_NODE：3，文本节点
    • nodeValue：返回给定节点的当前值(字符串)：
      • 如果给定节点是一个元素节点：返回null。
      • 如果给定节点是一个属性节点：返回属性的值。
      • 如果给定节点时一个文本节点：返回文本节点的内容。
    • 下面是使用的示例：
      [html] view plain copy
       
      1. <body>  
      2.     <ul id="city">  
      3.         <li id="bj" name="beijing">北京</li>  
      4.         <li id="tj" name="tianjin">天津</li>  
      5.     </ul>  
      6.     <p>  
      7.         你好        
      8.     </p>  
      9.     <script type="text/javascript">  
      10.         var bj = document.getElementById("bj");  
      11.         //元素节点  
      12. //      alert(bj.nodeName);//li  
      13. //      alert(bj.nodeType);//1  
      14. //      alert(bj.nodeValue);//null  
      15.           
      16.         //属性节点  
      17. //      var name = bj.getAttributeNode("name")  
      18. //      alert(name.nodeName); //name  
      19. //      alert(name.nodeType); //2  
      20. //      alert(name.nodeValue); //beijing  
      21.           
      22.         var p = document.getElementsByTagName("p")[0];  
      23.         var text = p.childNodes[0];  
      24.           
      25.         alert(text.nodeName);//#text  
      26.         alert(text.nodeType);//3  
      27.         alert(text.nodeValue);//你好  
      28.           
      29.     </script>  
      30.   </body>  

    父节点，子节点和同辈节点：

    • 父节点：parentNode:
      • parentNode返回的永远都是一个节点，因为只有元素节点才有可能包含子节点。
      • document节点没有父节点。也就是文档节点没有父节点，也就是HTML
    • 子节点：childNode：
      • childNodes，获取指定节点的所有子节点。其实上个例子已经使用了。
      • firstChild：指定第一个子节点。
      • lastChild：指定最后一个子节点。
    • 同辈节点：
      • nextSibling：返回一个给定节点的下一个兄弟节点。
      • previousSibling：返回一个节点的上一个兄弟节点。
    • 示例如下：
      [html] view plain copy
       
      1. <body>  
      2.     <ul id="city">  
      3.     <li id="bj" name="beijing">北京</li>  
      4.     <li id="tj" name="tianjin">天津</li>  
      5.    </ul>  
      6. <p>你好</p><input type="text">  
      7. <script type="text/javascript">  
      8.     //获取p标签的父，子，兄节点  
      9.     var p = document.getElementsByTagName("P")[0];  
      10.     alert(p.parentNode);//body  
      11.     alert(p.childNodes[0].nodeValue)//你好  
      12.     alert(p.previousSibling.nodeValue)//空格，说明空格也会作为一个节点  
      13.     alert(p.nextSibling.nodeName);//input。这里就没出现空格，就是input节点  
      14. </script>  
      15.  </body>  

    节点属性：

    • 节点属性attributes是Node接口定义的属性。
    • 节点属性attributes就是节点的属性(特别是元素节点)的属性。
    • 事实上，attributes中包含的是一个节点所有属性的集合。
    • attributes.getNameItem()和Element元素的getAttribute()方法很相似。
      [html] view plain copy
       
      1. <body>  
      2.      <ul id="city">  
      3.         <li id="bj" name="beijing">北京</li>  
      4.         <li id="tj" name="tianjin">天津</li>  
      5.     </ul>  
      6.     <script type="text/javascript">  
      7.         var bj = document.getElementById("bj");  
      8.         alert(bj.attributes[1].nodeValue);        
      9.     </script>  
      10.   </body>  

    检测子节点和属性

    • 查看是否有子节点：hasChildNodes();
    • 查看是存在属性：hasAttributes();
      • 即使节点中没有定义属性，其attributes属性还是有效的，而且长度是0。同样childNodes属性也是如此。
    • 当你想知道某个节点是否包含子节点或属性时，使用hasChildNodes(),hasAttributes()。如果想知道包含多少个：attributes和childNodes属性。
    • 在IE中不存在hasAttributes();方法。(不使用)
    • 示例如下：
      [html] view plain copy
       
      1. <body>  
      2.     <input type="text" id="username" value="username">  
      3.     <p>  
      4.         明天休息  
      5.     </p>  
      6.     <script type="text/javascript">  
      7. //      var username = document.getElementById("username");  
      8. //      alert(username.hasChildNodes());//false  
      9. //      alert(username.hasAttribute());//无效果      
      10.           
      11.         var p = document.getElementsByTagName("p")[0];  
      12.         alert(p.hasChildNodes());//true  
      13.           
      14.     </script>  
      15.   </body>  

    操作Dom节点数：

    • 插入节点：
      • appendChild()方法。
      • insertBefore()方法。
      • 没有insertAfter()方法。
    • 删除节点：
      • removeChild()方法。
    • 替换节点：
      • replaceChild()
    • 示例
      [html] view plain copy
       
      1. <body>  
      2.     <ul id="city">  
      3.         <!--注意这里不要回车-->  
      4.         <li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li>  
      5.     </ul>  
      6.     <script type="text/javascript">  
      7.     //创建<li id="sh" name="shanghai">上海</li>节点，增加到天津节点的前面  
      8. //      var liElement = document.createElement("li");  
      9. //      liElement.appendChild(document.createTextNode("上海"));  
      10. //      liElement.setAttribute("id","sh");  
      11. //      liElement.setAttribute("name","shanghai");  
      12. //      liElement.insertBefore(document.getElementById("tj"));  
      13. //      document.getElementById("city").appendChild(liElement);  
      14.           
      15.         //<li id="sh" name="shanghai">上海</li>节点插入北京节点的后面，没有insertAfter()方法。  
      16.           
      17.         var liElement = document.createElement("li");  
      18.         liElement.appendChild(document.createTextNode("上海"));  
      19.         liElement.setAttribute("id","sh");  
      20.         liElement.setAttribute("name","shanghai");  
      21.           
      22.         var bjElement = document.getElementById("bj")  
      23.         //得到兄弟节点  
      24.         var nextElement = bjElement.nextSibling;  
      25.         liElement.insertBefore(nextElement);  
      26.         //添加到city下面  
      27.         document.getElementById("city").appendChild(liElement);  
      28.           
      29.           
      30.           
      31.     </script>  
      32.   </body>  

    复制和移动节点：

    • 复制节点：cloneNode(boolean)方法，其中boolean参数是判读是否复制子节点。
    • 移动节点：由三种方法组合完成：
      • 查找节点：
        • getElementById();通过节点id属性，查找对应节点。
        • getElementsByName();通过节点名称，查找对应节点。
        • getElementsByTagName();通过节点名称，查找对应节点。
      • 插入节点：
        • insertBefore()方法
        • appendChild()方法。
      • 替换节点：
        • replaceChild()方法。
    • 示例代码如下：
      [html] view plain copy
       
      1. <body>  
      2.     <ul id="city">  
      3.     <li id="bj" name="beijing">北京</li>  
      4. <li id="tj" name="tianjin">天津</li>  
      5.   </ul>  
      6. lt;ul id="game">  
      7.     <li id="fk" name="fankong">反恐精英</li>  
      8. <li id="xj" name="xingji">星际</li>  
      9.   </ul>  
      10. lt;script type="text/javascript">  
      11. //当点击北京节点，就和反恐精英替换  
      12. document.getElementById("bj").onclick = function(){  
      13.     //得到北京节点  
      14.     var bjElement = document.getElementById("bj");  
      15.     //得到反恐精英  
      16.     var fkElemet = document.getElementById("fk");  
      17.     //这里也可以:this.parentNode.replaceChild(fkElemet,bjElement);  
      18.     bjElement.parentNode.replaceChild(fkElemet,bjElement);  
      19. }         
      20. lt;/script>  
      21. </body>  
      复制案例：
      [html] view plain copy
       
      1. <body>  
      2.         <input type="button" id="login" value="登陆">  
      3.         <p>  
      4.             按钮来这：  
      5.         </p>  
      6.         <script type="text/javascript">  
      7.             document.getElementById("login").onclick = function(){  
      8.                   
      9.                 var loginElement = document.getElementById("login");  
      10.                   
      11.                 //也可以写成:var copy = this.cloneNode(true);  
      12.                 var copy = loginElement.cloneNode(true);  
      13.                   
      14.                 var pElemet = document.getElementsByTagName("p")[0];  
      15.                 pElemet.appendChild(copy);  
      16.             }  
      17.         </script>  
      18.   </body>  
  • 相关阅读:
    vivim （十一）：文本重排
    vivim （十）：接出（复制）
    python的函数
    从oracle11g向oracle9i导数据遇到的一些问题
    vivim (十二）：中介字元正则表达式
    DataList如何实现横向排列数据交替行变色!
    跳出率对百度排名的影响越来越大
    asp.net 服务器端控件使用服务器端变量
    .net .用户控件和页面的加载顺序、生命周期
    网站如何让被DOMZ收录
  • 原文地址：https://www.cnblogs.com/vervin/p/6594058.html
Copyright © 2011-2022 走看看