`
javawangli
  • 浏览: 224367 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DOM 总结(二)

阅读更多

DOM 总结(二)

   

查找元素的方法:

1getElementByName()方法:

寻找有着给定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);

      } 

  }

 

   2getElementById()方法:

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

 var oElement = document.getElementById ( sID )

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

    举例:

 

3,通过使用一个元素节点的 parentNodefirstChild 以及 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)

}

 

  这三个属性 parentNodefirstChild 以及 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>

 

2
4
分享到:
评论

相关推荐

    JavaScript_——DOM总结.txt

    #### 二、DOM 与 DHTML 的关系 **DHTML**(Dynamic HTML)是动态 HTML 的简称,它是 HTML、CSS、DOM 和 JavaScript 结合的结果。DOM 在 DHTML 中扮演着核心的角色,因为它提供了对页面元素的访问能力,使得页面能够在...

    javascript 常用DomAPI总结

    ### JavaScript DOM API 总结 #### 一、概述 JavaScript 的 Document Object Model (DOM) API 是一种用于 HTML 和 XML 文档的标准编程接口。通过 DOM API,开发者能够动态地访问、更新文档的内容、结构和样式。...

    JavaScript获取HTML DOM节点元素的方法的总结

    以下是对“JavaScript获取HTML DOM节点元素的方法的总结”的详细阐述,旨在帮助开发者更好地理解和应用DOM操作。 ### 一、通过`document`对象获取DOM节点 #### 1. `document.getElementById(elementId)` 这个方法...

    dom4j-2.0.3.zip

    总结,DOM4J作为Java处理XML的首选工具之一,其易用性、灵活性和高效性为XML操作带来了极大的便利。了解并掌握DOM4J,对于提升XML相关项目的开发效率至关重要。通过阅读DOM4J的API文档(如`dom4j-2.0.3-javadoc.jar`...

    dom4j基础入门文档(SAX,DOM,XPATH)

    总结,dom4j是一个强大且灵活的XML处理库,提供了丰富的API来读取、操作和生成XML文档。通过利用XPath的支持,可以高效地定位和提取XML数据,极大地简化了XML编程。在实际开发中,根据项目需求选择合适的解析器...

    simple_html_dom,php下的html文件DOM解析库

    总结,PHP Simple HTML DOM解析库为PHP开发者提供了一种高效、灵活的HTML处理方式,无论是简单的数据提取还是复杂的页面重构,都能得心应手。只要熟悉了它的API,就能轻松地驾驭HTML文档,让Web开发变得更便捷。

    dom4j-2.1.1.jar

    总结,DOM4J-2.1.1.jar作为一款强大的XML处理工具,不仅具备了基本的XML操作能力,还提供了XPath支持、事件驱动处理等功能,使得在处理XML文档时更加便捷高效。在实际开发中,无论是简单的XML解析,还是复杂的XML...

    javascriptDom编程艺术+源码

    总结一下,本书《JavaScript DOM编程艺术》主要涵盖了以下知识点: 1. JavaScript基础:包括语法、变量、数据类型、函数等。 2. DOM基础:解释了DOM的概念,如何选择、遍历、创建和修改DOM元素。 3. 事件处理:学习...

    dom4j 简单教程

    #### 二、环境搭建与准备工作 在开始使用DOM4j之前,首先需要下载DOM4j库并将其添加到项目的类路径中。可以通过访问DOM4j官网或通过Maven等构建工具来获取最新的DOM4j库。 **步骤1:下载DOM4j库** - 访问DOM4j...

    dom4j2

    标题 "dom4j2" 指的是DOM4J的第二个主要版本,这是一个流行的Java库,专门用于处理XML文档。DOM4J是一个灵活且功能强大的API,它提供了丰富的功能来读取、写入、修改以及操作XML文件。在这个场景中,我们可能会探讨...

    根据DOM将html转为canvas图片格式

    总结,"根据DOM将html转为canvas图片格式"这个主题涉及了DOM操作、Canvas绘图、HTML5新特性以及前端兼容性问题。在实际应用中,我们需要结合HTML2Canvas等工具,遵循一定的步骤和最佳实践,才能实现将HTML页面转换...

    .遍历DOM元素

    在前端开发中,DOM(Document Object Model)是...总结,遍历DOM元素是前端开发中的常见任务,掌握不同的遍历方法及其应用场景,能有效提高代码质量和性能。理解DOM遍历的原理并合理运用,是提升前端开发能力的关键。

    dom手册

    总结,DOM手册作为中文参考资源,涵盖了DOM的基本概念、节点操作、事件处理、与JavaScript的结合使用等多个方面,对Web开发者来说是一份宝贵的教程。通过深入学习和实践,开发者可以更有效地操纵网页内容,创建出...

    dom4j使用教程+dom4j.jar

    总结来说,DOM4J是Java开发中处理XML文档的强大工具,无论是在解析、创建、修改还是查询XML文档上,都能提供简洁的API和高效的操作。通过理解并熟练运用DOM4J,开发者可以更高效地进行XML相关的开发工作。

    dom4j-1.6.1

    总结,DOM4J-1.6.1版本是一个强大且易用的XML处理工具,它简化了XML文档的操作,提供了高效、灵活的解决方案,使得开发者能够更好地处理XML数据。无论是新手还是经验丰富的开发者,都能从中受益。

    张龙 Schema DOM笔记

    通过以上总结,我们了解到Schema和DOM在XML文档验证和处理中的重要作用。Schema不仅提供了强大的数据类型验证功能,还支持自定义数据类型,使得XML文档的定义更加灵活多样。而DOM则为开发者提供了一种便捷的方式去...

Global site tag (gtag.js) - Google Analytics