JavaScript基础15——js的DOM对象

时间:2021-10-19 13:13:53
 <!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对象