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>  
posted @ 2017-03-21 14:11  vervin  阅读(2271)  评论(0)  编辑  收藏  举报