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

最新推荐文章于 2021-10-21 19:07:20 发布

码农康康

最新推荐文章于 2021-10-21 19:07:20 发布

阅读量3.2k

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript xml html 基础结点查找

本文链接：https://blog.csdn.net/ChiXueZhiHun/article/details/50736106

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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结构如下：

2.3 节点及其类型

节点

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

节点树

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

NODE接口的特性和方法

特性/方法	类型/返回类型	说明
nodeName	String	节点的名字；根据节点的类型而定义
nodeValue	String	节点的值；根据节点的类型而定义
nodeType	Number	节点的类型常量值之一
ownerDocument	Document	指向这个节点所属的文档
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
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());
}