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

最新推荐文章于 2023-12-04 19:20:17 发布

原创最新推荐文章于 2023-12-04 19:20:17 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #input #stylesheet #html #function #div

本文详细介绍了DOM操作中的核心方法，包括getElementById(), getElementsByName(), getElementsByTagName()等，并通过实例展示了如何利用这些方法进行元素的选择与操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法	返回类型	说明
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).也可以是某一个元素节点。

举例：

</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");
  //获取指定节点
  //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;


}

</script>