<!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. MyBatis知多少(4)MyBatis的优势

    MyBatis是一个混合型解决方案.它汲取了所有这些解决方案中最有价值的思想并将它们融会贯通.下表总结了MyBatis从我们之前讨论的那些方案中所汲取的思想. 方 案 相同的优点 解决的问题 存储过程 ...

  2. AppStore下载慢的真实原因

    今天有个朋友说他的app下载很慢,他说下载其他的不会,就他的会很慢很卡.我心想这东西苹果的我也没办法了呀,不过我心里也想我平时下载挺快的呀.于是就开始试试.搜索了几个app下载发现确实是有快有慢,并且 ...

  3. Tips10:你可以像写文档一样自由的复制粘贴游戏组件(Game Object Component)

    相对于添加组件后再进行调整和赋值,通过复制和粘贴已有游戏组件能够带来更高的效率.

  4. DBA需要掌握的shell知识

    每个中高级DBA都需要掌握一些简单脚本的编写,这样才能从繁杂重复的基础维护工作中解脱出来,才能有时间去研究更有价值的技术.VBird在讲shell script的时候,给出了几个经典的小范例练习,对于 ...

  5. sql server 随机读取数据

    --sql server 随机读取数据 * FROM [tablename] ORDER BY NEWID() pk from [tablename] ORDER BY NEWID()) --这两个方 ...

  6. Django--models连表构建

    需求 models多表(一对多.多对多.一对一)的构建 速查 1.一对多 1 2 3 class User(models.Model):     name = models.CharField(max ...

  7. C++中的静态绑定和动态绑定

    C++在面向对象编程中,存在着静态绑定和动态绑定的定义,本节即是主要讲述这两点区分.我是在一个类的继承体系中分析的,因此下面所说的对象一般就是指一个类的实例.首先我们需要明确几个名词定义: 静态类型: ...

  8. 阅读《深入理解JavaScript定时机制》

    鸟哥的这篇<深入理解JavaScript定时机制>从javascript线程角度分析了setTimeout和setInterval两个定时触发器的实现原理. 看完的体验就是主要要记住两点: ...

  9. IIS相关问题整理

    1.报错:请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理 解决方案地址:http://blog.csdn.net/canielau/article/details/7609613 2.报错: ...

  10. Scrum 1.0

    1.确定选题. 应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 项目:一个售书网站(O2O) 下面是NABCD模型: 1 ...