<!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. 为什么要提倡“Design Pattern呢

    为什么要提倡“Design Pattern呢?根本原因是为了代码复用,增加可维护性. 那么怎么才能实现代码复用呢?面向对象有几个原则:开闭原则(Open Closed Principle,OCP).里 ...

  2. win7 or win8 系统访问2003系统上的数据库很慢

    解决方式, 执行当前命令即可  netsh interface tcp set global autotuninglevel=disabled 

  3. Android版Ftp服务端软件

    分享一款开发的Android版Ftp服务端软件,支持Android4.0及以上版本,可以实现局域网无线传输文件到手机,或者把手机上的多媒体文件分享到iPad等设备来扩展这些设备的存储空间,详情请见软件 ...

  4. 线程安全集合 ConcurrentDictionary<TKey, TValue> 类

    ConcurrentDictionary<TKey, TValue> 类 [表示可由多个线程同时访问的键/值对的线程安全集合.] 支持 .NET Framework 4.0 及以上. 示例 ...

  5. TypeScript札记：初体验

    1.简介 TypeScript 是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeScript是一种 ...

  6. 性能测试类，让你写法代码养成经常测试的好习惯 -ASP.NET C#

    介绍: 可以很方便的在代码里循环执行 需要测试的函数  自动统计出执行时间,支持多线程. 使用方法: PerformanceTest p = new PerformanceTest(); p.SetC ...

  7. [Bootstrap]7天深入Bootstrap(4)CSS组件

    Bootstrap框架的三大核心之二:组件. 组件也是最核心的地方,因为绝大部分的网页都必须利用组件才能构建出绚丽的页面. 组件包括:Icon图标(Glyphicon). 下拉菜单(Dropdown) ...

  8. error LNK1281: 无法生成 SAFESEH 映像 LNK2026 模块对于 SAFESEH 映像是不安全的 VS2015 /win10

    平台 VS2015 /win10 错误 LNK1281 无法生成 SAFESEH 映像. 错误 LNK2026 模块对于 SAFESEH 映像是不安全的. 将 release 改成 debug

  9. Unity烂笔头1-自定义INSPECTOR属性窗口节点项

    1.添加输入框和标签 LevelScript: using UnityEngine; using System.Collections; public class LevelScript : Mono ...

  10. Weex中文文档

    这里整理当前已译出的Weex中文文档,如需查阅完整Weex文档,请访问http://alibaba.github.io/weex/doc/ . 同时也欢迎大家参与Weex中文文档翻译 [Guide] ...