<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>js的DOM对象</title>

         <script type="text/javascript">

             // DOM：Document Object Model 文档对象模型

             /*

                 文档：超文本文档html、xml

                 对象：提供了属性和方法

                 模型：使用属性和方法操作超文本标记型文档

                 可以使用js的DOM提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

                 需要把HTML里面的标签、属性、文本内容都封装成对象

              */

              /*

                 DOM模型有三种

                     DOM level 1：将HTML文档封装成对象

                     DOM level 2：在level 1的基础上添加新的功能，例如：对于事件和CSS样式的支持

                     DOM level 3：支持XML 1.0的一些新特性

              */

              /*

                 解析过程

                     根据HTMl的层级结构，在内存中分配一个树形结构，需要把HTML中的每部分封装成对象

                 document：整个HTML文档

                 element：标签对象

                 属性对象

                 文本对象

                 Node节点对象：是这些对象的父对象

              */

              /*

                 常用属性

                     all[]提供对文档中所有HTML元素的访问，FF不支持

                     forms[]返回对文档中所有Form对象引用

                     body提供对<body>元素的直接访问

                 常用方法

                     getElementById()返回对拥有指定id的第一个对象的引用

                     getElementsByName()返回带有指定名称的对象集合

                     getElementsByTagName()返回带有指定标签名的对象集合

                     write()向文档写HTML代码或JavaScript代码

              */

              window.onload = function() {

                 var spans = document.getElementsByTagName("span")[1];

                 //for (var i = 0; i < spans.length; i++)

                 //{

                     //var span = spans[i];

                     document.write("<br />span:" + spans.innerHTML);

                 //}

              }

         </script>

     </head>

     <body>

         <br /><br /><br />

         <span>AAAAA</span>

         <span>BBBBB</span>

         <span>CCCCC</span>

         <span>DDDDD</span>

     </body>

 </html>

JavaScript基础15——js的DOM对象的更多相关文章

  1. JavaScript基础17——js的Date对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. JavaScript基础18——js的Array对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. JavaScript基础16——js的BOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. JavaScript基础14——js的Math对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JavaScript基础13——js的string对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 前端之JavaScript：JS之DOM对象三

    js之DOM对象三   一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for ...

  7. 前端之JavaScript：JS之DOM对象二

    继续JS之DOM对象二 前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement(' ...

  8. 前端之JavaScript：JS之DOM对象一

    js之DOM对象一 一.什么是HTML  DOM HTML  Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 ...

  9. js的dom对象（带实例超详细全解）

    js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...

随机推荐

  1. asp.net mvc 利用过滤器进行网站Meta设置

    过去几年都是用asp.net webform进行开发东西,最近听说过时了,同时webform会产生ViewState(虽然我已经不用ruanat=server的控件好久了 :)),对企业应用无所谓,但 ...

  2. Can't get WebApplicationContext object from ContextRegistry.GetContext(): Resource handler for the 'web' protocol is not defined

    I'm stucked in configuring my web.config file under a web forms project in order to get an instance ...

  3. 数据结构 - 归并排序(merging sort)

    归并排序(merging sort): 包含2-路归并排序, 把数组拆分成两段, 使用递归, 将两个有序表合成一个新的有序表. 归并排序(merge sort)的时间复杂度是O(nlogn), 实际效 ...

  4. js深拷贝和浅拷贝

    一.数组的深浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致 ...

  5. Legolas工业自动化平台案例 —— 水源地自动化监控系统

    天津港爆炸事件后,除了安置群众.追究事故责任外,人们最关心的莫过于爆炸污染物对于周边环境的影响,其中最重要的一块就是饮用水的安全.所幸的是,水源的安全监测是实实在在有据可依的.环保单位和供水企业在建设 ...

  6. udp穿透简单讲解和实现(Java)

    在上一小节中了解到了通过浏览器自带的Webrtc功能来实现P2P视频聊天.在HTML5还没有普及和制定Webrtc标准的前提下,如果要在手机里进行视频实时对话等包括其他功能的话,还是要自己实现,还比较 ...

  7. 移动安全时代，如何保护你的app

    Android系统的安全性历来备受诟病,在强大的反编译工具下,APK中的代码逻辑一览无余:重打包技术使得各种盗版软件层出不穷,充斥着Android市场,特别是对于金融.电商.游戏等产品的盗版应用,严重 ...

  8. 这些年你需要注意的SQL

    [20141114]这些年你需要注意的SQL *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bot ...

  9. DDD：谈谈数据模型、领域模型、视图模型和命令模型

    背景 一个类型可以充当多个角色,这个角色可以是显式的(实现了某个接口或基类),也可以是隐式的(承担的具体职责和上下文决定),本文就讨论四个角色:数据模型.领域模型.视图模型和命令模型. 四个角色 数据 ...

  10. Robot Framework自动化测试（五）--- 开发系统关键字

    最近一直在用robot framework 做自动化测试项目,老实说对于习惯直接使用python的情况下,被框在这个工具里各种不爽,当然,使用工具的好处也很多,降低了使用成本与难度:当然,在享受工具带 ...