第十章：DOM文档对象模型

来源：互联网发布：福利狗电视直播软件编辑：程序博客网时间：2024/06/05 13:31

1.DOM简介

DOM（Document Object Model）文档对象模型，根据W3Cdom规范，dom是HTML和XML的应用程序编程接口，dom将HTML或XML映射成由层次节点组成的模型，根据规范的严格程度，分为1、2、3级；dom的核心是提供了一套访问结构化文档的API，核心是对节点的各种操作。JS把浏览器、网页文本和网页文档中的HTML元素都用相应的内置对象来表示，这些内置对象就是dom对象，编程人员通过访问dom对象，就可以实现对浏览器本身、网页文档、网页文档中元素的操作，从而控制浏览器和网页元素的行为和外观。

dom的层次关系如下图：

2.document对象

document对象代表整个HTML文档，可用来访问页面中的所有元素，它的常用函数如下：

write()//向文档写文本或HTML表达式或JavaScript代码writeln()//等同于write()方法，不同的是在每一个表达式之后会写一个换行符open()//打开一个新文档，并删除当前文档内容close()//关闭open文档流getElementById()//通过HTML控件的id得到该控件，如果有相同的id则只去第一个getElementsByName()//通过HTML控件的名字返回对象集合getElementsByTagName()//通过HTML标签名返回对象集合createElement()//创建一个指定标签名的元素

getElementByName()应用举例：

<html><head><script type="text/javascript">function test(){var hobbies=document.getElementsByName("hobby");for (var i = 0; i<hobbies.length; i++) {            if(hobbies[i].checked){            window.alert(hobbies[i].value);            }}}</script></head><body>请选择你的爱好<input type="checkbox" value="足球" name="hobby"/>足球<input type="checkbox" value="旅游" name="hobby"/>旅游<input type="checkbox" value="音乐" name="hobby"/>音乐<input type="button" value="查看爱好" onclick="test()"/></body></html>

3.动态的创建、添加和删除元素

<html><head><script type="text/javascript">function test(){var myElement=document.createElement("a");myElement.href="http://www.hao123.com";myElement.innerText="连接到hao123";myElement.id="idOne";document.getElementById("divOne").appendChild(myElement);}function testTwo(){//删除一个元素的前提是获得父节点//下面是第一种删除方式，不太灵活document.getElementById("divOne").removeChild(document.getElementById("idOne"));//下面是第二种删除方式比较灵活document.getElementById("idOne").parentNode.removeChild(document.getElementById("idOne"));}</script></head><body><input type="button" value="动态的创建一个超链接" onclick="test()"/><input type="button" value="动态的删除一个超链接" onclick="testTwo()"/><div id="divOne" style="width:200px;height:400px;border:1px solid red;">divOne</div></body></html>

4.body对象

body对象常用的方法和属性如下：

appendChild()    //添加元素removeChild()//删除元素getElementsByTagName()   //通过HTML元素名称，得到对象数组bgColor//文档背景颜色background//文档背景图片innerText//某个元素间的文本innerHtml//某个元素间的HTML代码onload事件//文档加载时触发onunload事件//文档关闭时触发onbeforeload事件//文档关闭前触发onselectstart事件//用户选中文档的body体的内容时触发onscroll事件//用户拉动滚动条时触发

5.style对象

style对象和document对象下的集合对象styleSheet有关系，styleSheet是文档中所有style对象的集合，Style 对象代表一个单独的样式声明，可从应用样式的文档或元素访问 Style 对象，style对象不是针对某一个HTML元素，而是针对所有的HTML元素而言的，也就是说，我们可以通过document.getElementById("id").style.property="value"，来控制网页文档的任何一个元素的样式。

6.form对象

forms对象按照表单在文档中的顺序得到form对象，forms对象集合中包含了当前文档中的所有form对象，form对象代表一个HTML表单，在HTML 文档中<form>每出现一次，form对象就会被创建。

7.img对象

images对象，按照img在文档中的顺序得到img对象，images对象集合包含了当前文档中的所有img对象，img对象代表一个图片，在HTML文档中<img>每出现一次，就会创建一个img对象。

8.其它对象

其它对象大部分同上。

0 0