DOM 总结（二）-优快云博客

本文详细介绍了DOM操作中的元素查找方法，包括getElementByName()和getElementById()等，并通过实例演示了如何利用parentNode、firstChild及lastChild属性遍历和操作文档结构。

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

DOM 总结（二）

查找元素的方法：

1，getElementByName()方法：

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

举例：

<form name="form1">

        <input type="text" name="tname" value="吃饭_1" /><br>

        <input type="text" name="tname" value="吃饭_2" /><br>

        <input type="text" name="tname" value="吃饭_3" /><br>

        <input type="button" name="ok" value="保存" id="ok"  onclick="test();">

 </form>  

function test(){

    // 获取属性的Name

     var tnameArray=document.getElementsByName("tname");

     //输出长度

     alert(tnameArray.length);

     //迭代输出获得的值

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

             window.alert(tnameArray[i].value);

      } 

  }

2，getElementById()方法：

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

var oElement = document.getElementById ( sID )

**该方法只能用于 document 对象

举例：

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

 <input type="text" value="吃饭" id="tid">

 function test(){

    //获取ID

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

    //获取元素的值

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

    //获取元素的类型 

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

}

这三个属性 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），这就是DOM父与子之间的关系；但是有的时候有的父节点不存在子节点那么就需要进行判断在读取，在判断是我们用到了一个方法hasChildNodes()方法

hasChildNodes()

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

var booleanValue = element.hasChildNodes();

文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。

在用元素子节点的属性读取时我们先要获得根节点：

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

document.documentElement

document.body

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

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

DOM的属性

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

1，DOM属性nodeName

nodeName 属性含有某个节点的名称。

var name = node.nodeName;

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

注:nodeName 是一个只读属性。

2，DOM属性nodeValue

nodeValue：返回给定节点的当前值（字符串）

如果给定节点是一个属性节点，返回值是这个属性的值。

如果给定节点是一个文本节点，返回值是这个文本节点的内容。

如果给定节点是一个元素节点，返回值是 null

nodeValue 是一个读/写属性，但不能对元素节点的 nodeValue 属性设置值，

但可以为文本节点的 nodeValue 属性设置一个值。

var li = document.getElementById(“li”);

if(li.firstChild.nodeType == 3)

li.firstChild.nodeValue = “国庆60年”;

3，DOM属性 nodeType

nodeType：返回一个整数，这个数值代表着给定节点的类型。

nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：

Node.ELEMENT_NODE ---1 -- 元素节点

Node.ATTRIBUTE_NODE ---2 -- 属性节点

Node.TEXT_NODE ---3 -- 文本节点

nodeType 是个只读属性

举例：

如下的html：请将select中的文本输出(用两种方法来写)

<body>

<div>

<form action="">

用户名:<input type="text" name="name" />

学历:<select id="edu" name="education">

           <option value="大专">大专生</option>

           <option value="本科">本科生</option>

           <option value="硕士">硕士生</option>

           <option value="博士">博士生</option>

</select>

<input type="submit" value="注册" />

</form>

</div> 

   用户的学历是：

   <div id="showMsg">   

   </div>

</body>

第一种（用getElementById()和getElnmentByNmae()方法读取）

<script type="text/javascript">

  window.onload = function() {

    //通过getElementById("edu")方法获取select的对象

var edus = document.getElementById("edu");

//通过select中options集合获取所有的option对象

var edus1  =   edus.options;

var msg ="";

//遍历所有的option对象的文本值

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

      msg+=edus1[i].innerHTML+",";

  }

 //把获取的msg信息写入到showMsg的div中

 document.getElementById("showMsg").innerHTML=msg;

}

 </script>

第二种（通过元素节点的属性来读取）

 <script type="text/javascript">

  window.onload = function() {

    //通过getElementById("edu")方法获取select的对象

 var edus = document.getElementById("edu");

     var edus1 = edus.childNodes;

     alert(edus1.length);

     var fc = edus.firstChild;

     alert(fc.nodeName);

     var lc = edus.lastChild;

     alert(lc.nodeName);

     var llc = lc.firstChild;

     alert(llc.nodeValue);     

      var msg="";

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

       if(edus1[i].nodeType==1)

         msg+=edus1[i].lastChild.nodeValue+",";

     }    

 document.getElementById("showMsg").innerHTML=msg;

}

</script>