第十章：DOM文档对象模型

最新推荐文章于 2024-11-12 11:19:19 发布

萧亦全

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量415

点赞数

分类专栏： javascript笔记文章标签：前端 javascript dom

本文链接：https://blog.csdn.net/a123456zabc/article/details/51026769

版权

javascript笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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="查看爱好" οnclick="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="动态的创建一个超链接" οnclick="test()"/>
		<input type="button" value="动态的删除一个超链接" οnclick="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"，来控制网页文档的任何一个元素的样式。