`
zpx138332
  • 浏览: 46132 次
  • 性别: Icon_minigender_1
  • 来自: 河北
社区版块
存档分类

Javascript中的DOM应用

阅读更多
[color=orange]          Javascript中的DOM应用
  DOM:
      DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。有一点很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言.
D:文档 – html 文档 或 xml 文档O:对象 – document 对象的属性和方法
M:模型
DOM 是针对xml(html)的基于树的API。
DOM树:节点(node)的层次。
DOM 把一个文档表示为一棵家谱树(父,子,兄弟)
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
节点:
    根据 DOM,HTML 文档中的每个成分都是一个节点。DOM 是这样规定的:
    整个文档是一个文档节点
    每个 HTML 标签是一个元素节点
    包含在 HTML 元素中的文本是文本节点
    每一个 HTML 属性是一个属性节点
注释属于注释节点  
节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。
节点及其类型
   *  由结构图中我们可以看到,整个文档就是一个文档节点。
   *  而每一个HMTL标签都是一个元素节点。
   *  标签中的文字则是文本节点。
   *  标签的属性是属性节点。
   *  一切都是节点……

节点树
     节点树的概念从图中一目了然,最上面的就是“树根”了。节点之间有父子关系,祖先与子孙关系,兄妹关系。这些关系从图中也很好看出来,直接连线的就是父子关系了。而有一个而父亲的就是兄妹关系……
                         
查找并访问节点
   你可通过若干种方法来查找您希望操作的元素:
通过使用 getElementById() 和 getElementsByTagName() 方法
通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
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>
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);          }
     }

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 将是空数组和空字符串

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> 标签的直接访问


DOM节点信息:
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
DOM属性---nodeName
nodeName 属性含有某个节点的名称。
var name = node.nodeName;
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释:nodeName 所包含的 XML 元素的标签名称永远是大写的

nodeValue:返回给定节点的当前值(字符串)
如果给定节点是一个属性节点,返回值是这个属性的值。
如果给定节点是一个文本节点,返回值是这个文本节点的内容。
如果给定节点是一个元素节点,返回值是 null
nodeValue 是一个 读/写 属性,但不能对元素节点的 nodeValue 属性设置值,
但可以为文本节点的 nodeValue 属性设置一个值。
   var li = document.getElementById(“li”);
   if(li.firstChild.nodeType == 3)
li.firstChild.nodeValue = “国庆60年”;



nodeType:返回一个整数,这个数值代表着给定节点的类型。
nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种:
Node.ELEMENT_NODE    ---1    -- 元素节点
Node.ATTRIBUTE_NODE  ---2    -- 属性节点
Node.TEXT_NODE       ---3    -- 文本节点
nodeType 是个只读属性


下面我門用个简单的案例说明:

<h1 id="h1">明天休息</h>


问题:
   打印 ”明天休息”  (利用两种方法)
           提示:使用(firstChild lastChild childNodes)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Demo01.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script>
     window.onload = function(){
          
 
  
         //通过docuemnt.documentElement获取根节点 ==>html
         var root = document.documentElement;
         alert(root.nodeName);//打印节点名称 HTML 大写
        
         //获取body标签节点
         var body = document.body;
         alert(body.nodeName); //body节点的名称  也是大写的
         //获取body标签中的第一个子节点
         var h1 = body.firstChild;
         alert(h1.nodeType); //字节点的类型 所有的标签都是元素节点
         alert(h1.nodeValue);//元素节点的类型值是1

         //获取body标签中的最后一个节点
         var h1 = body.lastChild;
         //节点的名称 大写
         alert(h1.nodeName);
         //节点中的值,
         //如果是元素节点(1)的值是Null
         //文本节点(3)是文本内容
         //属性节点(2)是属性值
         alert(h1.nodeValue);
        
        
  
    
  

       /* 
         //直接获取body节点
          var body = document.body;
         //获取body节点的第一个子节点
          var h1 = body.firstChild;
         //通过id获取节点对象
          var str = document.getElementById("h1");
         //hasChildNodes()判断此节点是否有字节点 如果有则为true否则
                              为false
          var flag = str.hasChildNodes();
          alert(flag);
          //childNodes:获取该节点的所有字节点的集合
          var arr = str.childNodes;
          //通过length属性打印节点集合的大小
          alert(arr.length);
          //通过lastChild获取str节点中的最后一个子节点
          var txt = str.lastChild;
         //nodeValue节点中的值,
         //如果是元素节点(1)的值是null
         //文本节点(3)是文本内容
         //属性节点(2)是属性值
          alert(txt.nodeValue);
        */
        
       
       
        /* 标签是元素节点  元素节点的nodeValue值是null
       那么可以通过以下方式简单获取 元素节点中的内容:   
       通过innerHtml获取元素节点的内容===>原样内容 是什么就是什                                
       么
       通过innerText获取元素节点的内容===>去掉标签的内容
           alert(str.innerHTML);
           alert(str.innerText);
          */
       
        //  Node  nodeName  nodeValue  nodeType  hasChildNodes  childNodes
        // lastChild  firstChild
        //理解了DOM的层次关系
     }

</script>
  </head>
 
  <body>
      <h1 id="h1">您好 redarmy</h1>
  </body>
</html>

[/color]
分享到:
评论

相关推荐

    JavaScript_DOM编程艺术第二版(中文)

    总的来说,"JavaScript DOM编程艺术第二版"是一本全面介绍JavaScript与DOM结合的实践指南,它将帮助读者从初级到高级,系统地掌握JavaScript在网页动态化中的应用,提升Web开发技能。通过阅读这本书,开发者不仅能...

    JavaScript.DOM编程艺术(第2版)附录及源码.rar

    附录通常包括对书中概念的补充解释、技术参考或实用工具,而源码则展示了实际应用中的编程技巧。对于JavaScript初学者和进阶开发者来说,这些都是非常宝贵的资源。以下是几个主要的知识点: 1. **JavaScript基础**...

    JavaScript DOM编程艺术.pdf

    他通过这本书深入浅出地讲解了JavaScript和DOM编程,并通过实际的代码示例,如创建图片库页面的脚本、动画效果的脚本以及丰富页面元素呈现效果的脚本,展示了这些编程原则和最佳实践的应用。读者可以通过这些示例...

    JavaScript DOM编程艺术(第2版pdf)+源代码

    JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍,专注于讲解如何使用JavaScript与...通过阅读和实践书中的内容,读者将能够熟练掌握JavaScript在网页上的应用,从而提升自己的前端开发技能。

    javascript_DOM操作.rar

    JavaScript DOM(Document Object Model...文档“javascript_DOM操作.docx”很可能深入探讨了这些概念,并通过实例代码展示如何在实践中应用它们。学习并掌握这些DOM操作技巧,对于成为一名优秀的前端开发者至关重要。

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    这种技术被广泛应用于现代Web应用中,提高了用户体验。 #### 3.3 CSS样式控制 除了控制DOM结构外,JavaScript还可以通过操作CSS类名或直接设置样式属性来改变元素的外观。这对于实现复杂的动画效果或响应式布局非常...

    javascript Dom 编程艺术

    JavaScript是Web开发中最重要的一门语言,它强大而优美。无论是桌面开发,还是移动应用。JavaScript都是必须掌握的技术。W3C的DOM标准是开发Web应用的基石。已经得到所有现代浏览器的支持,这使得跨平台Web开发成了...

    经典之作javascript dom编程艺术源码

    通过学习并实践《JavaScript DOM编程艺术》中的源码,开发者能够掌握原生JavaScript对DOM的精细控制,从而提升网页交互的灵活性和性能。同时,理解并熟练运用这些知识点,对于开发高效、响应式的Web应用至关重要。在...

    Javascript+DOM编程艺术(完整版).pdf

    《Javascript+DOM编程艺术(完整版)》是Jeremy Keith所著的一本关于前端开发技术的书籍,专注于Web设计中的JavaScript和DOM编程。本书被认为是前端开发者必读的经典之作,其清晰的文笔、遵循优秀的编程原则和严格的...

    javascript_DOM操作

    **DOM与JavaScript的结合应用** 1. **表单验证**: 利用DOM操作,可以实时检查用户输入并显示错误提示。 2. **AJAX请求**: 在异步请求数据后,使用DOM更新页面内容。 3. **动画效果**: 通过改变元素的位置、大小等...

    随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip

    JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍,主要涵盖了JavaScript语言在Web前端开发中的应用,特别是关于DOM(Document Object Model)的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...

    javaScript-DOM编程艺术

    DOM编程中,DHTML(Dynamic HTML)是HTML、CSS和JavaScript结合的结果,使得网页可以动态更新和交互。通过JavaScript,我们可以找到页面上的特定元素,改变它们的属性,添加新的元素,甚至删除现有元素。例如,使用`...

    JavaScript & DOM Enlightenment

    JavaScript和DOM Enlightenment是关于Web开发中的核心技术的深入学习资源,主要涵盖了JavaScript编程语言以及文档对象模型(Document Object Model)的应用。这两个概念对于任何希望成为前端开发者的人来说都是至关...

    Beginning JavaScript with DOM Scripting and Ajax

    JSON由于其简洁性和易读性,已经成为现代Web应用中最常用的Ajax数据交换格式。 六、跨域问题与解决 在实际开发中,Ajax请求可能会遇到同源策略限制,导致跨域问题。理解CORS(Cross-Origin Resource Sharing)机制...

    JavaScript_DOM编程艺术第二版(中文).pdf

    JavaScript是Web开发中最重要的一门语言,它强大而优美。无论是桌面开发,还是移动应用。JavaScript都是必须掌握的技术。W3C的DOM标准是开发Web应用的基石。已经得到所有现代浏览器的支持,这使得跨平台Web开发成了...

    javascriptDom编程艺术+源码

    此外,书中还涉及了一些高级话题,如异步编程(AJAX)、DOM遍历优化和性能考虑,以及如何避免常见的JavaScript和DOM相关的陷阱。这些章节有助于读者在实践中提高代码质量和效率,为开发高性能的Web应用做好准备。 ...

    javascript+dom书籍

    JavaScript 是一种轻量级的解释型编程语言,广泛应用于网页和网络应用的客户端脚本,而 DOM 则是 W3C 标准,它定义了HTML和XML文档的结构,并提供了与这些文档进行交互的方法。 **JavaScript 基础** JavaScript 是...

    JavaScript+DOM编程艺术

    这本书旨在为读者提供JavaScript语言基础以及DOM操作的核心技能,同时强调了在前端Web开发中至关重要的设计理念,如预留退路、循序渐进和以用户为中心。 首先,JavaScript是一种广泛应用于网页和网络应用的脚本语言...

    [JavaScript.DOM编程艺术(第2版)-高清扫描

    在Web浏览器环境中,JavaScript与DOM紧密协作,提供了动态更新页面、响应用户交互、处理数据和构建复杂应用的能力。书中详细介绍了如何利用JavaScript来创建、修改、遍历和操作DOM元素,以实现丰富的用户界面和交互...

Global site tag (gtag.js) - Google Analytics