Javascript脚本语言简介、查找元素节点、查看是否存在子节点、根节点

Javascript脚本语言简介、查找元素节点、查看是否存在子节点、根节点

1、Js中的的dom的元素节点和文本节点

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件

       D：文档 – html 文档 或 xml 文档 

       O：对象 – 把document里的所有节点都看成对象

       M：模型（用于建立从文档到对象的模型）

       DOM 是针对xml(html)的基于树的API。

       DOM树:节点（node）的层次。

       DOM 把一个文档表示一个树模型

       DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

  从结构图可以看出，整个html称为dom树。而dom的引用为document，也称为一个节点

     每一个HTML标签都为一个元素节点

      标签中的文字则是文本节点

      标签中的属性则是属性节点

      dom中元素、文本、属性都是节点

      dom树是由节点构成的

      每个节点都代表一个对象

建立从HTML代码到DOM文档的对应关系

方法	返回类型	说明
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() 和 getElementsByTagName() 方法 

通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性 

getElementById() 

       寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.

var oElement = document.getElementById ( sID )

     该方法只能用于 document 对象

<input type="text" value="国庆60周年" id="tid">

 function test(){

    var usernameElement=document.getElementById(“tid");

    //获取元素的值

    alert("usernameElement.value: "+usernameElement.value)

    //获取元素的类型 

    alert("usernameElement.type: "+usernameElement.type)

}

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"  οnclick="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);

      } 

  }

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);

 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].οnchange=function(){ 

               alert(this.value);

          }

     }

parentNode、firstChild以及lastChild

这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。

请看下面这个 HTML 片段：

<table> 

     <tr>

        <td>John</td> 

        <td>Doe</td>

       <td>Alaska</td> 

     </tr>

 </table>

在上面的HTML代码中，第一个 <td> 是 <tr> 元素的首个子元素（firstChild），而最后一个 <td> 是 <tr>元素的最后一个子元素（lastChild）。

此外，<tr> 是每个 <td>元 素的父节点（parentNode）。

var textareaElements=document.getElementsByTagName("textarea");

 for (var i = 0; i < textareaElements.length; i++) {

     textareaElements[i].onchange = function(){

           alert(this.value);

    };

 }

查看是否存在子节点

hasChildNodes()

该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

  var booleanValue = element.hasChildNodes();

文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.

如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。

hasChildNodes()

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());

}

根节点

有两种特殊的文档属性可用来访问根节点：

document.documentElement 

document.body 

第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

第二个属性是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。