第二章 DOM初识之概念、结构、类型和节点的查找

2.1 基本概念

DOM:DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件。
D:文档 – html 文档 或 xml 文档
O:对象 – document 对象的属性和方法
M:模型

DOM 是针对xml(html)的基于树的API。
DOM树:节点(node)的层次。
DOM 把一个文档表示为一棵家谱树(父,子,兄弟)。
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面。

2.2 DOM的结构

DOM的结构与家谱的结构及其类似。
DOM的家谱结构
DOM的结构

<html>
  <head>
  <title>HTML DOM</title>
  </head>
  <body>
  <h1>DOM的结构</h1>
  <p><a href=”href”>链接</a></p>
  </body>
</html>

它的DOM结构如下:
DOM结构

2.3 节点及其类型

节点

(1)由结构图中我们可以看到,整个文档就是一个文档节点。
(2)而每一个HMTL标签都是一个元素节点。
(3)标签中的文字则是文本节点。
(4)标签的属性是属性节点。
(5)一切都是节点……

节点树

节点树的概念从图中一目了然,最上面的就是“树根”了。节点之间有父子关系,祖先与子孙关系,兄妹关系。这些关系从图中也很好看出来,直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……

NODE接口的特性和方法

特性/方法类型/返回类型说明
nodeNameString节点的名字;根据节点的类型而定义
nodeValueString节点的值;根据节点的类型而定义
nodeTypeNumber节点的类型常量值之一
ownerDocumentDocument指向这个节点所属的文档
firstChildNode指向在childNodes列表中的第一个节点
lastChildNode指向在childNodes列表中的最后一个节点
childNodesNodeList所有子节点的列表
previousSiblingNode指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null
nextSiblingNode指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为null
hasChildNodes()Boolean当childNodes包含一个或多个节点时,返回真
attributesNamedNodeMap包含了代表一个元素的特性的Attr对象;仅用于Element节点
appendChild(node)Nodenode添加到childNodes的末尾
removeChild(node)Node从childNodes中删除node
replaceChild(newnode, oldnode)Node将childNodes中的oldnode替换成newnode
insertBefore(newnode, refnode)Node在childNodes中的refnode之前插入newnode

查找元素节点

(1)getElementById()
寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素,它返回 null.
var oElement = document.getElementById ( sID )
该方法只能用于 document 对象

<input type=”text” value=”康康" id="tid">
 function test(){
    var usernameElement=document.getElementById(“tid");
    //获取元素的值
    alert("usernameElement.value: "+usernameElement.value)
    //获取元素的类型 
    alert("usernameElement.type: "+usernameElement.type)
}

(2)getElementsByName()
寻找有着给定name属性的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。

<form name="form1">
        <input type="text" name="tname" value="国庆60年_1" /><br>
        <input type="text" name="tname" value="国庆60年_2" /><br>
        <input type="text" name="tname" value="国庆60年_3" /><br>
        <input type="button" name="ok" value="保存" id="ok"  onclick="test();">
 </form>  
function test(){
     var tnameArray=document.getElementsByName("tname");
     alert(tnameArray.length);
     for(var i=0;i<tnameArray.length;i++){
             window.alert(tnameArray[i].value);
      } 
  }
  <input type="text" name="username" value="国庆60年_1" /><br>
  <input type="text" name="username" value="国庆60年_2" /><br>
  <input type="text" name="username" value="国庆60年_3" /><br>
   <input type="button" name="ok" value="保存" id="ok"><br>
<script language="JavaScript">     
     //该方法返回是数组类型 
  var usernameElements=document.getElementsByName("username");
  for (var i = 0; i < usernameElements.length; i++) {
        //获取元素的类型
        //alert(usernameElements[i].type)
        //获取元素value的值
        //alert(usernameElements[i].value);
        //采用函数直接量的方法
       usernameElements[i].onchange = function(){
           alert(this.value);
       }
}
</script>

(3)getElementsByTagName()
寻找有着给定标签名的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
var elements = document.getElementsByTagName(tagName);
var elements = element.getElementsByTagName(tagName);
该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
var container = document.getElementById(“sid”);
var elements = container.getElementsByTagName(“p”);
alert(elements.length);

//   //处理input
// var inputElements=document.getElementsByTagName("input");
//     //输出input标签的长度
// //alert(inputElements.length);
//  for(var i=0;i<inputElements.length;i++){
//   if(inputElements[i].type!='button'){//submit
// alert(inputElements[i].value);
// }
//  }
//处理select
//   //获取select标签
//   var selectElements=document.getElementsByTagName("select");
//   //获取select下的子标签
//   for(var j=0;j<selectElements.length;j++){
//    var optionElements=selectElements[j].getElementsByTagName("option");
//   for(var i=0;i<optionElements.length;i++){
//   alert(optionElements[i].value);
//   }
//   }
  var textareaElements=document.getElementsByTagName("textarea");
  alert(textareaElements[0].value);
var inputElements=document.getElementsByTagName("input");
 for(var i=0;i<inputElements.length;i++){
 if (inputElements.type != 'submit') {
     inputElements[i].onchange = function(){
            alert(this.value)
     };
  }
    var selectElements=document.getElementsByTagName("select");
    for (var i = 0; i < selectElements.length; i++) {
          selectElements[i].onchange=function(){ 
               alert(this.value);
          }
     }
var textareaElements=document.getElementsByTagName("textarea");
 for (var i = 0; i < textareaElements.length; i++) {
     textareaElements[i].onchange = function(){
           alert(this.value);
    };
 }

查看是否存在子节点

hasChildNodes()
(1)该方法用来检查一个元素是否有子节点,返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
(2)文本节点和属性节点不可能再包含任何子节点,所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false;
(3)如果 hasChildNodes 方法的返回值是 false,则 childNodes,firstChild,lastChild 将是空数组和空字符串。

var selectElements=document.getElementsByTagName("select");
 alert(selectElements[0].hasChildNodes())
var inputElements=document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
     alert(inputElements[i].hasChildNodes());
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值