当前位置：首页 > 软件开发 > Web开发 > JavaScript

javascript ＡＰＩ详解及案例解析（一）

来源：岁月联盟编辑：exp 时间：2012-02-25

方法返回类型说明 nodeName String 节点的名字 nodeValue String 节点的值 nodeType Number 节点的类型常量值 firstChild Node 指向在childNodes列表中的第一个节点
lastChild Node 指向在childNodes列表中的最后一个节点 childNodes NodeList 所有子节点的列表 previousSibling Node 指向前一个兄弟节点；如果这个节点就是第一个兄弟节
点，那么该值为null nextSibling Node 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节
点，那么该值为null hasChildNodes() Boolean 当childNodes包含一个或多个节点时，返回真 attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象；仅用于Element
节点 appendChild(node)
Node 将node添加到childNodes的末尾 removeChild(node)
Node 从childNodes中删除node replaceChild(newnode,oldnode) Node 将childNodes中的oldnode替换成newnode

１ getElementById()
说明：
         1、查询给定ID属性值的元素，返回该元素的元素节点。也称为元素对象。
         2、因为在一个html页面中id的值是唯一的，所以返回值也是唯一的。所以方法的名称为getElementById()而不是getElementsById()
         3、该方法只能用于document对象，类似与java的static关键字。
案例：
var inputDom=document.getElementById("uname")
//当前dom对象的属性值

alert(inputDom.type+inputDom.value+inputDom.id);
//元素节点名称标签的名称 value值为空元素节点类型值 1
alert(inputDom.nodeName+inputDom.nodeType+inputDom.nodeValue);
2．getElementsByName()
2.1说明：
         1、查找给定name属性的所有元素，这个方法将返回一个节点集合，也可以称为对象集合。
         2、这个集合可以作为数组来对待，length属性的值表示集合的个数。
         3、因为在html页面中，name不能唯一确定一个元素，所以方法的名称为getElementsByName而不是getElementByName
举例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>getElementsByName.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    
</head>

<body>
   <div align="center">
    <div id="head">
     用户名
     <input type="text" name="uname" id="uname" value="ee"/>
    </div>
    <div id="spr">
     你喜欢的春节节目有哪些</br>
     <hr color="red"/>
     <input type="checkbox" name="fav" value="111"/>111
     <input type="checkbox" name="fav" value="222"/>222
     <input type="checkbox" name="fav" value="333"/>333
     <input type="checkbox" name="fav" value="444"/>444
     <input type="checkbox" name="fav" value="555"/>555
     <input type="checkbox" name="fav" value="666"/>666
    </div>
    <div>


    </div>

   </div>
</body>
</html>
<script type="text/javascript" charset="utf-8">
window.onload=function(){
//查找给定name属性值的所有元素
var favs=document.getElementsByName("fav");
var msg="";
//alert(favs.length);
//writer
for(var i=0;i<favs.length;i++){
   //get
   var fav=favs[i];

   //alert(fav.value);

   //action
   fav.onclick=function(){
    //作业：弹出所有你选中的节目
    msg+=" "+this.value;
    alert("you like it "+msg);
   }



}
}

</script>

3。getElementsByTagName()
3.1说明
          1、查询给定标签名的所有元素
          2、因为在html页面中，标签名不是唯一的，所以返回值为节点的集合。
          3、这个集合可以当做数组来处理,length属性为集合里所有元素的个数
          4、可以有两种形式来执行这个方法：
                 1、var elements =document.getElementsByTagName(tagName);
                 2、var elements = element.getElementsByTagName(tagName);
          5、从这两种方法可以看出持有这个方法的对象并不一定是整个文档对象
                (document).也可以是某一个元素节点。
举例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>getElementsByName.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    
</head>

<body>
   <div align="center">
    <div id="head">
     用户名
     <input type="text" name="uname" id="uname" value="ee"/>
    </div>
    <div id="spr">
     你喜欢的春节节目有哪些</br>
     <hr color="red"/>
     <input type="checkbox" name="fav" value="111"/>111
     <input type="checkbox" name="fav" value="222"/>222
     <input type="checkbox" name="fav" value="333"/>333
     <input type="checkbox" name="fav" value="444"/>444
     <input type="checkbox" name="fav" value="555"/>555
     <input type="checkbox" name="fav" value="666"/>666
    </div>
    <div>
     <input type="button" value="提交"/>

    </div>

   </div>
</body>
</html>
<script type="text/javascript" charset="utf-8">
window.onload=function(){

//根据标签名称获取该标签名称的所有的节点对象
var inputnodes=document.getElementsByTagName("input");
//获取指定节点www.2cto.com
//alert(inputnodes.length);

var sprNode=document.getElementById("spr");
if(sprNode.nodeType==1){
var sprinputNode=sprNode.getElementsByTagName("input");
//alert(sprinputNode.length);

//spr 节点中的所有的input节点对象并且要求 type=“checkbok”
//遍历所有spr下的节点
   for(var i=0;i<sprinputNode.length;i++){
    //获取指定的节点
    var inputNode=sprinputNode[i];
    if(inputNode.type=="checkbox"){
     alert(inputNode.value);
    }
   }
}
var d=document.getElementsByTagName("*");

}

</script>

4hasChildNodes()
4.1说明
       1、该方法用来判断一个元素是否有子节点
       2、返回值为true或者false
       3、文本节点和属性节点不可能再包含子节点，所以对于这两类节点使用 ChildNodes()方法返回值永远为false.
       4、如果hasChildNodes()返回值为false,则childNodes,firstChild,lastChild将为空数组或者空字符串。
举例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>zuoye.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    
</head>

<body>
    This is my HTML page. <br>
</body>
</html>
<script type="text/javascript" charset="utf-8">
window.onload=function(){
//开始的节点
var rootNode=document.documentElement;
iteratorNodes(rootNode);
document.write(msg);

}
function iteratorNodes(node){
//遍历此文档

     //第一步：是否是元素节点---属性--子节点
     if(node.nodeType==1){
      //打印此节点

      display(node);
      //元素节点的属性节点

      for(var i=0;i<node.attributes.length;i++){
       //获取属性值
       var attr=node.attributes[i];
       //打印出属性节点
       if(attr.specified){
        display(attr);

       }
      }
      //元素节点子节点
      //判断是否有孩子节点
      if(node.hasChildNodes){
       var sonNodes=node.childNodes;
       for(var j=0;j<sonNodes.length;j++){
        var sonNode=sonNodes[j];
        iteratorNodes(sonNode);
       }

       //递归
      }
     }else{
       display(node);
     }
}
var msg="";
function display(node){
msg+="<br/>节点名称："+node.nodeName+node.nodeValue+node.nodeType;

}