<!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. 在unity5中减少Draw Calls(SetPass Calls)[转]

    在unity5中减少Draw Calls(SetPass Calls)   我一直工作于unity5支持的Standard Shader(标准着色器)上,并且做了一些关于如何有效地减少draw cal ...

  2. 【转载】Solr4+IKAnalyzer的安装配置

    转载:http://www.cnblogs.com/madyina/p/4131751.html 一.下载Solr4.10.2 我们以Windows版本为例,solr-4.10.2.zip是目前最新版 ...

  3. Struts2知多少(1) Struts2 MVC架构

    模型视图控制器(Model View Controller)或MVC,MVC是俗称,是一种软件设计模式,用于开发Web应用程序.模型 - 视图 - 控制器模式是由以下三个部分组成: Model - 模 ...

  4. JavaScript面试库

    1.将一段字符串转成驼峰命名法. var str = "web-kit-index"; function to(str){ var j = str.split("-&qu ...

  5. ruby -- 进阶学习(九)定制错误跳转404和500

    在开发阶段,如果发生错误时,都会出现错误提示页面,比如:RecordNotFound之类的,虽然这些错误方便开发进行debug,但是等产品上线时,如果还是出现这些页面,对于用户来说是很不友好的. 所以 ...

  6. Django的是如何工作的

    如果你看过我之前所写的关于django的文章的话,你会发现每一篇都具有可操作性,都是从创建项目开始的,虽然中间之加了一些要讲解的重点.这也是我博文的特点,我希望在你看到我这一篇文章的时候是可操作的,不 ...

  7. Java魔法堂:深入正则表达式API

    目录 一.前言 二.正则表达式的使用诉求 三.java.util.regex包 四.java.lang.String实例 五.最短路径实现诉求 六.Java支持的正则表达式功能语法 七.总结 八.参考 ...

  8. 理解SQL Server的查询内存授予(译)

    此文描述查询内存授予(query memory grant)在SQL Server上是如何工作的,适用于SQL 2005 到2008. 查询内存授予(下文缩写为QMG)是用于存储当数据进行排序和连接时 ...

  9. Linq专题之Lambda表达式

    这一节我们讲的Lambda表达式跟匿名函数有关.Lambda表达式就是一个匿名函数,它可以包含表达式和语句,并且可以创建委托和表达式树. Lambda表达式的组成: 输入参数.Lambda运算符(=& ...

  10. sql分页存储过程

    ALTER PROCEDURE [dbo].[P_SplitPagesQuery] @TablesName NVARCHAR(MAX),--表名或视图名(只能传单一表名) @PK NVARCHAR(M ...