第4章 JavaScript文档对象模型-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_35450260/article/details/143458866

JavaScript交互式网页设计-T4（JavaScript文档对象模型）

一、文档对象模型概述

1、概述

文档对象模型是 Document Object Model，简称 DOM，是对浏览器页面内容进行操作的编程接口。

整个HTML文档在DOM 中是一个 document 对象。DOM把HTML文档看成由元素（标签）、属性和文本（内容）组成的一棵倒立的树。

获取标签（元素）

标签操作：

属性

文本

样式

2、document 对象常用属性

2.1 title

设置页面标题

2.2 bgColor

设置页面背景颜色

2.3 fgColor

设置文本颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>Hello JavaScript</h1>
		<script>
			// 设置页面标题
			document.title = "document对象常用属性测试";
			// 设置页面背景颜色
			document.bgColor = "red";
			// 设置文本颜色
			document.fgColor = "white";
		</script>
	</body>
</html>

二、document 对象查找 HTML 元素

1、通过 id 查找 HTML 元素

document.getElementById("id属性值");

2、通过 name 查找 HTML 元素

document.getElementsByName("name属性值");

3、通过标签名查找 HTML 元素

document.getElementsByTagName("标签名");

4、通过 class 查找 HTML 元素

document.getElementsByClassName("class属性值");

【案例】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="account" id="name" class="sname">
		
		<script>
			var object_name;
			// 1、通过 id 查找 HTML 元素
			// object_name = document.getElementById("name");
			
			// 2、通过 name 查找 HTML 元素
			// object_name = document.getElementsByName("account");
			
			// 3、通过 标签名 查找 HTML 元素
			// object_name = document.getElementsByTagName("input");
			
			// 4、通过 class 查找 HTML 元素
			object_name = document.getElementsByClassName("sname");
			
			// 输出对象
			document.write(object_name);
		</script>
	</body>
</html>

三、使用 HTML 对象操作 HTML 元素

通过【二】中方法可以获得HTML对象，使用HTML对象可以操作HTML元素：

获取或设置 HTML元素的属性值

获取或设置 HTML元素的文本值

设置 HTML元素的文本值的样式

1、获取或设置 HTML元素的属性值

获取
```
HTML对象名.属性名
```
设置
```
HTML对象名.属性名 = 属性值;
```

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

第4章 JavaScript文档对象模型

JavaScript交互式网页设计-T4（JavaScript文档对象模型）

一、文档对象模型概述

1、概述

2、document 对象常用属性

2.1 title

2.2 bgColor

2.3 fgColor

二、document 对象查找 HTML 元素

1、通过 id 查找 HTML 元素

2、通过 name 查找 HTML 元素

3、通过 标签名 查找 HTML 元素

4、通过 class 查找 HTML 元素

三、使用 HTML 对象操作 HTML 元素

1、获取或设置 HTML元素的属性值

3、通过标签名查找 HTML 元素