第七周周记-CSDN博客

本文链接：https://blog.csdn.net/Michael681/article/details/117934807

第七周周记

前言
一、HTML DOM 简介
- 1、查找 HTML 元素
二、改变 HTML
三、使用DOM改变CSS
- 1、改变 HTML 样式
四、DOM 事件
*练习题*
- 1、下拉列表左右选择

前言

本周学习了JavaScript HTML DOM

一、HTML DOM 简介

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：
在这里插入图片描述
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

1、查找 HTML 元素

（1）通过 id 查找 HTML 元素
（2）通过标签名查找 HTML 元素

<body>

<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>

</body>

在这里插入图片描述
（3）通过类名找到 HTML 元素

<body>

<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>

在这里插入图片描述

二、改变 HTML

1、改变 HTML 输出流

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

2、改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
语法：document.getElementById(id).innerHTML=新的 HTML

3、改变 HTML 属性

语法：document.getElementById(id).attribute=新属性值

三、使用DOM改变CSS

1、改变 HTML 样式

语法：document.getElementById(id).style.property=新样式

四、DOM 事件

1、对事件做出反应

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

可以改变文本内容

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

或者从事件处理器调用一个函数

<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">点击文本!</h1>

2、onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

3、onchange 事件

onchange 事件常结合对输入字段的验证来使用。

4、onmouseover 和 onmouseout 事件与onmousedown、onmouseup 以及 onclick 事件

练习题

1、下拉列表左右选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.center{
				float:left;
				margin-left: 100px ;
			}
		</style>
	</head>
	<body>
		<div class="center">
			<select id="select1" multiple style="width:100px;height: 200px;" ondblclick="sel()">
				<option value="选项1">选项1</option>
				<option value="选项2">选项2</option>
				<option value="选项3">选项3</option>
				<option value="选项4">选项4</option>
				<option value="选项5">选项5</option>
				
			</select>
			<input type="button" onclick="sel()" value="将左边选中的选项添加到右边" />
		</div>
		<div class="center">
			<select id="select2" multiple style="width:100px;height: 200px;"  ondblclick="cancel_sel()">
				
			</select>
			<input type="button" onclick="cancel_sel()" value="将右边选中的选项添加到左边" />
		</div>
	</body>
	<script type="text/javascript">
		function sel(){
			var select1 = document.getElementById("select1");
			var select2 = document.getElementById("select2");
			
			var select1_options = select1.getElementsByTagName("option");
			for(var i = 0; i < select1_options.length; i++){
				var opt = select1_options[i];
				if(opt.selected){
					select2.appendChild(opt);
				}
			}
			
		}
		//取消选中
		function cancel_sel(){
			var select1 = document.getElementById("select1");
			var select2 = document.getElementById("select2");
			
			var select2_options = select2.getElementsByTagName("option");
			for(var i = 0; i < select2_options.length; i++){
				var opt = select2_options[i];
				if(opt.selected){
					select1.appendChild(opt);
				}
			}
			
		}
	</script>
</html>