JavaScript之BOM与DOM操作

JavaScript之BOM与DOM操作

一、事件

1.事件基础

作用：

​ （1）验证用户输入的数据。

​ （2）增加页面的动感效果。

​ （3）增强用户的体验度

事件中的几个名词：

​ 事件源: 谁触发的事件

​ 事件名: 触发了什么事件

​ 事件监听: 谁管这个事情，谁监视？

​ 事件处理:发生了怎么办

load加载事件：

​ 当页面加载完毕后执行的事件

常用事件：

​ onload：当页面或图像加载完后立即触发

​ onblur：元素失去焦点

​ onfocus：元素获得焦点

​ onclick：鼠标点击某个对象

​ onchange：用户改变域的内容

​ onmouseover：鼠标移动到某个元素上

​ onmouseout：鼠标从某个元素上离开

​ onkeyup：某个键盘的键被松开

​ onkeydown：某个键盘的键被按下

事件流：
接收事件的顺序

事件流的顺序：事件冒泡和事件捕获

​ 事件冒泡（从小到大）

​ 事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）

​ 事件捕获（从大到小）

​ 事件开始时由document对象接受，然后逐级向下传播到具体的节点

<body onload="loadWindows()">
		
	</body>
	<script type="text/javascript">
		
		function loadWindows(){
			console.log("加载...");
		}
		
	</script>

2.事件处理程序

响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头

document.getElementById(“id属性值”); 通过id属性值获取元素对象

HTML事件处理程序

某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的应该是能够执行的JavaScript代码：

<button type="button" onclick="alert('Hello')" onmouseout="test()">按钮</button>

DOM 0级事件处理程序

​ 将一个函数赋值给一个事件处理程序属性

​ 只能为同一个元素的同一个事件设定一个事件程序（覆盖）

<button type="button" id="btn">DOM 0级事件处理程序</button>

/**
	 	 * 加载事件
	 	 * 	当页面上的标签和引入的资源加载完毕后，才会执行的方法
	 	 */
	 	window.onload = function(){
	 		// 通过id属性值获取按钮对象
	 		var btn = document.getElementById("btn");
	 		console.log(btn);
	 		// 给指定元素绑定点击事件
	 		btn.onclick = function(){
	 			console.log("DOM 0级事件处理程序...");
	 		}
	 		btn.onclick = function(){
	 			console.log("test...");
	 		}
	 	}

DOM 2级事件处理程序

​ addEventListener() 和 removeEventListener()

​ 有三个参数：

​ 参数1：事件名

​ 参数2：处理事件的函数

​ 参数3：事件冒泡（false）或捕获（true）

​ 可以为同一个元素的同一个事件设定多个事件程序

// DOM 2级事件
		var btn2 = document.getElementById("btn2");
		// 给按钮绑定事件监听
		btn2.addEventListener('click',function(){
			console.log("DOM 2级事件...");
		});
		btn2.addEventListener('click',fn);
		function fn(){
			console.log("按钮被点击了...");
		}
		// 移除事件
		btn2.removeEventListener("click",fn);
	 		

3.常用事件

​ onload：当页面或图像加载完后立即触发

​ onblur：元素失去焦点

​ onfocus：元素获得焦点

​ onclick：鼠标点击某个对象

​ onchange：用户改变域的内容

​ onmouseover：鼠标移动到某个元素上

​ onmouseout：鼠标从某个元素上离开

​ onkeyup：某个键盘的键被松开

​ onkeydown：某个键盘的键被按下

<body>
		姓名：<input type="text" id="uname" >
		<button type="button" οnclick="clickBtn()">按钮</button>
		<hr >
		城市：<select id="city">
			<option>请选择城市</option>
			<option>上海</option>
			<option>北京</option>
		</select>
		<hr >
		<div id="div1">
			这是一个div
		</div>
	</body>

 <script type="text/javascript">
	 	// onload：当页面或图像加载完后立即触发
		window.onload = function(){
			console.log("页面加载完毕...");
		}
		var uname = document.getElementById("uname");
		// onblur：元素失去焦点
		uname.onblur = function(){
			console.log("文本框失去焦点...");
		}
		// onfocus：元素获得焦点
		uname.onfocus = function(){
			console.log("文本框获得焦点...");
		}
		// onclick：鼠标点击某个对象
		function clickBtn(){
			console.log("按钮被点击了...");
		}
		// onchange：用户改变域的内容
		document.getElementById("city").onchange = function(){
			console.log("下拉框的值改变了...");
		}
		
		var div1 = document.getElementById("div1");
		// onmouseover：鼠标移动到某个元素上
		div1.onmouseover = function(){
			console.log("鼠标悬停...");
		}
		// onmouseout：鼠标从某个元素上离开
		div1.onmouseout = function(){
			console.log("鼠标移开...");
		}
		
		// 	onkeyup：某个键盘的键被松开
		uname.onkeydown = function(){
			console.log("按键按下...");
		}
		// 	onkeydown：某个键盘的键被按下
		uname.onkeyup = function(){
			console.log("按键弹起...");
		}
	 </script>

二、Bom对象

1.系统对话框

​ 系统对话框

​ （1）消息框:alert， 常用。

​ alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

​ （2）输入框:prompt，返回提示框中的值。

​ prompt() 方法用于显示可提示用户进行输入的对话框。

​ 参数（可选）：

​ 第一个参数：要在对话框中显示的纯文本。

​ 第二个参数：默认的输入文本。

​ （3）确认框:confirm，返回 true/false.

​ confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

		<button type="button" onclick="testAlert()">消息框</button>
		<button type="button" onclick="testPrompt()">输入框</button>
		<button type="button" onclick="testConfirm()">确认框</button>

// 1）消息框:alert， 常用。
		function testAlert(){
			window.alert("Hello");
			console.log("你好...");
		}
		
		// 2）输入框:prompt，返回提示框中的值
		function testPrompt(){
			var uname = window.prompt("请输入用户名：","");
			console.log(uname);
		}
		
		// 3）确认框:confirm，返回 true/false.
		function testConfirm() {
			var flag = confirm("您确认要删除该记录吗？");
			if (flag) {
				alert("删除成功！");
			} else {
				alert("没事别瞎点...");
			}
		}

2.打开窗口

window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口

<button type="button" id="btn1">打开窗口</button>

document.getElementById("btn1").onclick = function(){
			// 打开空白窗口
			// window.open();
			// 打开指定页面
			// window.open("01-系统对话框.html");
			// 打开百度
			// window.open("http://www.baidu.com");
			// 指定方式打开页面
			// window.open("http://www.baidu.com","_self");
			// 打开页面
			window.open("03-关闭窗口.html");

3.关闭窗口

window.close()：关闭窗口。

<button type="button" onclick="test()">关闭窗口</button>

function test(){
			window.close();
		}

4.时间函数

setTimeout()

​ setTimeout() : 在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识；

​ 也可以通过返回的标识cliearTimeout(id)： 来清除指定函数的执行。

​ var id = setTimeout(function,times);

​ 参数1：执行的函数

​ 参数2：时间，单位毫秒

setInteval()

​ setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。

​ 该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

​ var id = setInteval(function,times);

​ 参数1：执行的函数

​ 参数2：时间，单位毫秒

		<button type="button" onclick="toBaidu()">3秒钟后跳转到百度</button>
		<hr >
		<button type="button" onclick="init()">开始</button>
		<button type="button" onclick="stop()">暂停</button>
		<h2 id="time"></h2>
		<hr >
		<button type="button" onclick="hello()">定时执行</button>

	/* setTimeout(function(){
			console.log("3秒钟后执行的程序...");
		},3000); */
		
		// 3秒钟后跳转到百度
		function toBaidu(){
			setTimeout(test,3000);
		}
		function test(){
			// 打开百度
			window.open("http://www.baidu.com");
		}
		
		console.log(new Date().toLocaleTimeString());
		
		var id;
		function init() {
			
			var time = new Date().toLocaleTimeString();
			
			// 将时间赋值给h2标签
			document.getElementById("time").innerHTML = time;
			
			// 每一秒钟调用一下
			id = setTimeout(init,1000);
		}
		
		function stop(){
			clearTimeout(id);
		}
		// 定时执行
		function hello() {
			setInterval(function(){
				console.log("你好...");
			},1000);
		}

5.history对象

history对象的属性：length，返回浏览器历史列表中的 URL 数量。

history对象的方法：

​ back()：

​ 加载 history 列表中的前一个 URL。

​ forward()：

​ 加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。

​ go(number|URL):

​ URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面

1

<body>
		<h2>页面1</h2>
		<a href="05-history对象-2.html">页面2</a>
		<hr >
		<button type="button" onclick="window.history.go(2)">前进2</button>
	</body>
	<script type="text/javascript">
	 	console.log(window.history.length);
		
	 </script>

2

<body>
		<h2>页面2</h2>
		<a href="05-history对象-3.html">页面3</a>
		<hr />
		<button type="button" onclick="window.history.forward();">前进</button>
		<button type="button" onclick="window.history.back()">后退</button>
	</body>

3

<body>
		<h2>页面3</h2>
		<button type="button" onclick="window.history.back()">后退</button>
	</body>
	<script type="text/javascript">
	 	console.log(window.history.length);
	 		
	 </script>

6.location对象

location 对象的属性

​ href：设置或返回完整的 URL

location对象的方法

​ reload()：重新加载当前文档。

​ replace()：用新的文档替换当前文档。(不能后退)

	<body>
		<button type="button" onclick="test()">跳转</button>
		<button type="button" onclick="test1()">replace</button>
		<button type="button" onclick="test2()">reload</button>
	</body>
	<script type="text/javascript">
	 	
		// 获取当前访问的URL
		var url = window.location.href;
		console.log(url);
		
		function test(){
			// 设置URL  页面跳转
			// window.location.href = "01-系统对话框.html";
			window.location.href = "http://www.baidu.com";
		}
		
		/**
		 * replace()：用新的文档替换当前文档。(不能后退)
		 */
		function test1(){
			window.location.replace("01-系统对话框.html");
		}
		/**
		 * reload()：重新加载当前文档。
		 */
		function test2(){
			window.location.reload();
		}
		
	 </script>

三、DOM对象

1.节点

​ 文档节点 文档本身整个文档 document

​ 元素节点 所有的HTML元素 、

、

​ 属性节点 HTML元素内的属性 id、href、name、class

​ 文本节点 元素内的文本 hello

​ 注释节点 HTML中的注释 <!-- – >

2.获取节点

注意：操作 dom 必须等节点初始化完毕后，才能执行。

处理方式两种:

​ （1）把 script 调用标签移到html末尾即可；

​ （2）使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。

​

			<p id="p1" class="para">这是一个段落<span>文本</span></p>
		 	<p id="p1" class="para">这又是一个段落</p>
		 	<input type="text" name="txt" />
		 	<input type="checkbox" name="hobby" value="游泳" />游泳
		 	<input type="checkbox" name="hobby" value="篮球" />篮球
		 	<input type="checkbox" name="hobby" value="足球" />足球
		 	<hr />
		 	<a href="javascript:void(0)" onclick="testById()">按照id获取</a>
		 	<a href="javascript:void(0)" onclick="testByName()">按照name获取</a>
		 	<a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取</a>
		 	<a href="javascript:void(0);" onclick="testByClass();">按照class获取</a>

		/**
		 * 按照id获取
		 *  如果获取元素时，id有多个，则以第一个为准
		 */
		function testById(){
			var p = document.getElementById("p1");
			console.log(p);
		}
		
		/**
		 * 按照name获取
		 */
		function testByName(){
			var hobbys = document.getElementsByName("hobby");
			console.log(hobbys[0]);
		}
		
		/**
		 * 按照标签名获取
		 */
		function testByTagName() {
			var inputs = document.getElementsByTagName("input");
			console.log(inputs);
			// 获取元素类型
			for(var i = 0; i < inputs.length; i++){
				console.log(inputs[i].type); // input的类型
				console.log(inputs[i].value); // input的值
				if (inputs[i].type == "checkbox") {
					console.log(inputs[i].checked); // 单选框或复选框是否选中
				}
			}
		}
		
		/**
		 * 按照class获取
		 */
		function testByClass(){
			var clas = document.getElementsByClassName("para");
			console.log(clas.length);
		}

3.创建节点和插入节点

创建节点

插入节点

		<button onclick="addPara();">添加段落</button>
		<button onclick="addImg();">添加图片</button>
		<button onclick="addTxt();">添加文本框</button>
		<button onclick="addOptions()">添加选项</button> 
		<select name="music">
			<option value="-1">你心内的一首歌</option>
			<option value="0">南山南</option>
			<option value="1">喜欢你</option>
		</select>
		<hr />
		<div id = "container">
			
		</div>

/**
	 * 添加段落
	 */
	function addPara(){
		
		// 获取容器
		var div = document.getElementById("container");
		
		/* 方式一 */
		/* // 创建p元素
		var p = document.createElement("p");
		// 创建文本节点
		var txt = document.createTextNode("这是一段文本");
		// 将文本节点追加到元素节点中
		p.appendChild(txt);
		console.log(p);
		// 将p标签设置到div中
		div.appendChild(p); */
		
		/* 方式二 */
		/* // 创建p元素
		var p = document.createElement("p");
		// 给p元素赋值
		p.innerHTML = "这是一段文本";
		console.log(p);
		// 将p标签设置到div中
		div.appendChild(p); */
		
		
		/* 方式三 */
		var p = "<p>这是文本</p>";
		div.innerHTML += p;
		
	}	
		
	/**
	 * 添加图片
	 */
	function addImg(){
		// 获取容器
		var div = document.getElementById("container");
		
		/* 方式一 */
		/* // 创建img元素
		var img = document.createElement("img");
		// 设置属性
		img.src = "img/img1.jpg";
		console.log(img);
		// 设置宽高属性
		img.width = 100;
		img.height = 100;
		// 将图片设置到div容器中
		div.appendChild(img); */
		
		/* 方式二 */
		/* // 创建img元素
		var img = document.createElement("img");
		// 设置属性
		img.setAttribute("src","img/img1.jpg");
		// 将图片设置到div容器中
		div.appendChild(img); */
		
		/* 方式三*/
		var img = "<img src='img/img1.jpg' />";
		div.innerHTML += img;
		
		
	}
	
	/**
	 * 添加文本框
	 */
	function addTxt(){
		
		// 得到容器元素
		var div = document.getElementById("container");
		
		/* // 创建input元素
		var inp = document.createElement("input");
		// 指定input元素的类型
		inp.type = "text"; // input类型：文本框
		inp.value = "今天天气不错"; // 文本框的值
		// 将input元素设置到容器中
		div.appendChild(inp);
		 */
		
		
		/* // 创建input元素
		var inp = document.createElement("input");
		// 设置属性
		inp.setAttribute("type","text");
		inp.setAttribute("value","你好");
		// 将input元素设置到容器中
		div.appendChild(inp); */
		
		
		var inp = "<input type='text' value='hello' />";
		div.innerHTML += inp;
	}	
		
	
	/**
	 * 添加下拉框
	 */
	function addOptions(){
		// 通过name属性值获取下拉框对象
		var music = document.getElementsByName("music")[0];
		
		/* // 创建下拉选项
		var opt = document.createElement("option");
		// 设置文本和值
		opt.value="2";
		opt.text= "晴天";
		// 给下拉框添加下拉选项
		music.appendChild(opt); */
		
		
		/* // 创建下拉选项
		var opt = document.createElement("option");
		// 设置文本和值
		opt.value="2";
		opt.text= "青花瓷";
		// 将option添加到下拉列表中
		console.log(music.options);
		music.options.add(opt); */
		
		
		var opt = '<option value="2">千里之外</option>';
		music.innerHTML += opt;
		
		
	}

插入节点

		<ul>
			<li id="red">红色</li>
			<li>绿色</li>
		</ul>

		// write()		将任意的字符串插入到文档中
		document.write("<h2>你好</h2>");
		document.write("<h2>Hello</h2>");
		
		// insertBefore()	向指定的已有的节点之前插入新的节点
		var li = document.createElement("li");
		var txt = document.createTextNode("粉色");
		li.appendChild(txt);
		document.getElementById("red").parentElement.insertBefore(li,document.getElementById("red"))
		

4.间接查找节点

	childNodes 		返回元素的一个子节点的数组
	children 		返回元素的所有的子元素数组
	firstChild 		返回元素的第一个子节点
	firstElementChild
	lastChild 		返回元素的最后一个子节点
	lastElementChild
	nextSibling 	返回元素的下一个兄弟节点
	nextElementSibling
	previousSibling 返回元素的上一个兄弟节点
	previousElementSibling
	parentNode 		返回元素的父节点
	parentElement

		<ul>
			<li id="red">红色</li><li>绿色</li>
		</ul>

// 得到ul
var ul = document.getElementsByTagName(“ul”)[0];
// childNodes 返回元素的一个子节点的数组
console.log(ul.childNodes);
// children 返回元素的所有的子元素数组
console.log(ul.children);

	// firstChild 		返回元素的第一个子节点
	console.log(ul.firstChild);
	console.log(ul.firstElementChild);
	// lastChild 		返回元素的最后一个子节点
	console.log(ul.lastChild);
	console.log(ul.lastElementChild);
	
	// nextSibling 	返回元素的下一个兄弟节点
	console.log(document.getElementById("red").nextSibling);
	console.log(document.getElementById("red").nextElementSibling);
	// previousSibling 返回元素的上一个兄弟节点
	console.log(document.getElementById("red").previousSibling);
	console.log(document.getElementById("red").previousElementSibling);
	
	// parentNode 		返回元素的父节点
	console.log(ul.parentNode);
	//  parentElement
	console.log(ul.parentElement);

5.删除节点

删除节点
removeChild()从元素中移除子节点

		<span id="programmer">程序猿</span>
		<a href="javascript:void(0)" onclick="delNode();">删除</a>

			function delNode() {
			// 得到被删除的对象
			var span = document.getElementById("programmer");
			// 得到被删除的对象的父元素
			var parent = span.parentElement;
			// 删除元素
			parent.removeChild(span);
		}

四、表单

1.获取表单

1、document.表单名称

2、document.getElementById(表单 id);

3、document.forms[表单名称]

4、document.forms[索引]; //从 0 开始

		<form id="form1" name="form1" method="get" action="">
			
		</form>
		
		<form id="form2" name="form2" method="get" action="">
			
		</form>

		// 1、document.表单名称
		var form1 = document.form1;
		console.log(form1);
		// 2、document.getElementById(表单 id);
		var form2 = document.getElementById("form2");
		console.log(form2);
		
		// 得到当前文档中的表单集合
		var forms = document.forms;
		console.log(forms);
		
		// 3、document.forms[表单名称]
		var form3 = forms['form1'];
		console.log(form3);
		
		// 4、document.forms[索引]; //从 0 开始
		var form4 = forms[0];
		console.log(form4);

2.获取input元素

​ 1)、通过 id 获取：document.getElementById(元素 id);

​ 2)、通过 form.名称形式获取: myform.元素名称; name属性值

​ 3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始

​ 4)、通过 tagName 数组 :document.getElementsByTagName(‘input’)[索引] // 从0开始

		<form id='myform' name="myform" action="" method="get">		
			姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
			密码:<input type="password" id="upwd" name="upwd" value="1234"/><br />
			<input type="hidden" id="uno" name="uno" value="隐藏域" />
			个人说明:<textarea name="intro"></textarea>
			<button type="button" onclick="getTxt();" >获取元素内容</button>
		</form>

function getTxt(){
			// 1)、通过 id 获取：document.getElementById(元素 id);
			var uname = document.getElementById("uname").value;
			console.log(uname);
			
			// 2)、通过 form.名称形式获取: myform.元素名称;    name属性值
			var myform = document.getElementById("myform");
			var upwd = myform.upwd.value;
			console.log(upwd);
			
			// 3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
			var uno = document.getElementsByName("uno")[0].value;
			console.log(uno);
			
			// 4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
			var intro = document.getElementsByTagName("textarea")[0].value;
			console.log(intro);
			
		}

3.获取单选按钮

前提：将一组单选按钮设置相同的name属性值

(1)获取单选按钮组：

​ document.getElementsByName(“name属性值”);

(2)遍历每个单选按钮，并查看单选按钮元素的checked属性

​ 若属性值为true表示被选中，否则未被选中

​ 选中状态设定： checked=‘checked’ 或 checked=‘true’ 或 checked

​ 未选中状态设定： 没有checked属性 或 checked=‘false’

<input type="radio" name="rad" value="1" />	1
		<input type="radio" name="rad" value="2"  /> 2
		<button type="button" onclick="getRadio()">获取</button>

	 	function getRadio(){
			// (1)获取单选按钮组
			var radios = document.getElementsByName("rad");
			// (2)遍历每个单选按钮，并查看单选按钮元素的checked属性
			for (var i = 0; i < radios.length; i++) {
				console.log(radios[i].checked);
				if (radios[i].checked) {
					// 获取值
					console.log(radios[i].value);
				}
			}
		}

4.获取多选按钮

(1)获取多选按钮组

​ document.getElementsByName(“name属性值”);

(2)遍历每个多选按钮，并查看多选按钮元素的checked属性
选中状态： checked=‘checked’ checked cheked=true

​ 未选中状态： 未设置checked属性或checked=false

<input type="checkbox" name="hobby" value="sing" />  唱歌
		<input type="checkbox" name="hobby" value="dance" />  跳舞
		<input type="checkbox" name="hobby" value="rap" />  说唱
		<button type="button" onclick="getCheckbox()">获取</button>

function getCheckbox(){
			// (1)获取多选按钮组
			var checkboxs = document.getElementsByName("hobby");
			var str = '';
			// (2)遍历每个多选按钮，并查看多选按钮元素的checked属性
			for(var i = 0; i < checkboxs.length; i++){
				// 如果被选中，则获取对应的值
				if (checkboxs[i].checked) {
					str += checkboxs[i].value + ",";
				}
			}
			// 通过截取，去除最后一个多余的问号
			str = str.substring(0,str.length-1);
			console.log(str);
		}

5.获取下拉选项

获取下拉选项

1. 获取下拉框（id属性值、name属性值、class属性值、元素）

2. 获取下拉框的所有下拉选项

   下拉框对象.options

3. 获取下拉框被选中项的索引

   下拉框对象.selectedindex

4. 获取被选中项的值

   注意：当通过options获取选中项的value属性值时，

   ​ 若没有value属性，则取option标签的内容

   ​ 若存在value属性，则取value属性的值

5. 获取被选中项的文本

     选中状态设定：selected='selected'、selected=true、selected
     	未选中状态设定：不设selected属性 
   

来自:
				<select id="ufrom" name="ufrom">
					<option value="" >请选择</option>
					<option value="beijing" selected="selected">北京</option>
					<option value="shanghai">上海</option>
					<option >深圳</option>
				</select><br />
				<button type="button" id="sub" >获取</button>

document.getElementById("sub").onclick = function(){
			// 1. 获取下拉框（id属性值、name属性值、class属性值、元素）
			var ufrom = document.getElementById("ufrom");
			// 2. 获取下拉框的所有下拉选项
			var selectoptions = ufrom.options;
			console.log(selectoptions);
			// 3. 获取下拉框被选中项的索引
			var index = ufrom.selectedIndex;
			console.log(index);
			// 4. 获取被选中项的值
			var val = selectoptions[index].value;
			console.log(val);
			// 5. 获取被选中项的文本
			var txt = selectoptions[index].text;
			console.log(txt);
			
			// 获取当前被选中项的值
			var selectedvalue = ufrom.value;
			console.log(selectedvalue);
			
			// 设置下拉选项被选中
			selectoptions[2].selected = true;
			
		}

6.提交表单

（1）使用普通button按钮+onclick事件+事件中编写代码:

​ 获取表单.submit();

（2）使用submit按钮 + οnclick=“return 函数()” +函数编写代码:

​ 最后必须返回：return true|false;

（3）使用submit按钮/图片提交按钮 + 表单οnsubmit=“return 函数();” +函数编写代码:

​ 最后必须返回：return true|false;

trim()
去除字符串前后空格（不去除字符串中间的空格）

<form id='myform1' name="myform2" action="http://www.baidu.com" method="get" >	
			姓名：<input  type="text"  id="uname"/>
			<input type="button" value="提交表单" onclick="submitForm()" />
		</form>
		<hr >
		<form id='myform2' action="http://www.baidu.com" method="get" >
			姓名：<input  type="text"  id="uname2"/>
			<input type="submit" value="提交表单" onclick="return submitForm2();" />
		</form>
		
		<hr >
		<form id='myform2' action="http://www.baidu.com" method="get" onsubmit="return submitForm3();">
			姓名：<input  type="text"  id="uname3"/>
			<input type="submit" value="提交表单"  />
		</form>

/* 
			（1）使用普通button按钮+onclick事件+事件中编写代码:
		 	 获取表单.submit();
		 */
		function submitForm(){
			// 获取姓名文本框的值
			var uname = document.getElementById("uname").value;
			if (uname == null || uname.trim() == "") {
				// 结束
				return;
			}
			// 提交表单
			document.getElementById("myform1").submit();
		}
		
		/* 
			（2）使用submit按钮 + οnclick="return 函数()" +函数编写代码:
				最后必须返回：return true|false;
		 */
		function submitForm2(){
			// 获取姓名文本框的值
			var uname = document.getElementById("uname2").value;
			if (uname == null || uname.trim() == "") {
				// 结束
				return false;
			}
			// 提交
			return true;
		}
		
		/* 
			（3）使用submit按钮/图片提交按钮 + 表单οnsubmit="return 函数();" +函数编写代码:
		​		最后必须返回：return true|false; 
		 */
		function submitForm3(){
			// 获取姓名文本框的值
			var uname = document.getElementById("uname3").value;
			if (uname == null || uname.trim() == "") {
				// 结束
				return false;
			}
			// 提交
			return true;
		}

7.表单校验

<form id='myform' name="myform">
		 姓名:<input type="text" id="uname" name="uname" /><br />
		 密码:<input type="password" id="upwd" name="upwd" /><br />
		 年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
		      <input type="radio" name="uage" value="1"/>你懂得 <br />
		 爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
		      <input type="checkbox" name="ufav" value="爬床"/>爬床
		      <input type="checkbox" name="ufav" value="代码"/>代码<br />
		 来自:<select id="ufrom" name="ufrom">
		          <option value="-1" selected="selected">请选择</option>
		          <option value="0">北京</option>
		          <option value="1">上海</option>
		      </select><br />
		      <div id="validate" style="color: red;"></div>
		      <button type="button" onclick="checkForm();">提交</button>
		      <button type="reset" onclick="resetForm();">重置</button>
		</form>

/**
		 * 通过 id通过id参数，返回dom对象
		 * @param {Object}
		 */
		function $(id) {
			return document.getElementById(id);
		}
	
		/**
		 * 重置表单
		 */
		function resetForm() {
			$("myform").reset();
		}
		
		/**
		  要求：
		    1、验证用户名
		      1)不能为空
		      2)长度为 6-12 位
		    2、验证密码
		      1)不能为空 *
		      2)长度为 6-12 位
		      3)不能包含用户名
		    3、年龄: 必须选择 你懂得
		    4、爱好: 必须选择一项
		    5、来自: 必须选择一项
		    满足以上条件
		     	1、弹出所有的内容
		     	2、提交表单
		    否则
		    	1、说明错误原因
		    	2、不能提交表单
		*/
		function checkForm() {
			// 获取用户名
			var uname = $("uname").value;
			if (isEmpty(uname)) {
				// 通过innerHTML赋值
				$("validate").innerHTML = '用户名不能为空！';
				return;
			}
			if (uname.length < 6 || uname.length > 12) {
				$("validate").innerHTML = '用户名长度在6-12位之间！';
				return;
			}
			
			// 获取密码
			var upwd = $("upwd").value;
			if (isEmpty(upwd)) {
				// 通过innerHTML赋值
				$("validate").innerHTML = '密码不能为空！';
				return;
			}
			if (upwd.length < 6 || upwd.length > 12) {
				$("validate").innerHTML = '密码长度在6-12位之间！';
				return;
			}
			if (upwd.indexOf(uname) > 0) {
				$("validate").innerHTML = '密码不能包含用户名！';
				return;
			}
			
			
			// 获取年龄
			var ages = document.getElementsByName("uage");
			// 获取第二个单选框是否被选中
			var cked = ages[1].checked;
			if (!cked) {
				$("validate").innerHTML = '年龄必须选择你懂得！';
				return;
			}
			
			// 获取爱好
			var ufavs = document.getElementsByName("ufav");
			var favs = '';
			// 遍历
			for (var i = 0; i < ufavs.length; i++) {
				if (ufavs[i].checked){
					favs += ufavs[i].value + ",";
				}
			}
			// 判断是否选中
			if (isEmpty(favs)) {
				$("validate").innerHTML = '必须选择一项爱好！';
				return;
			}
			favs = favs.substring(0,favs.length);
			
			
			// 获取下拉框
			var city = $("ufrom").value;
			 if (city == -1){
				 $("validate").innerHTML = '请选择你的城市！';
				 return;
			 }
			
			$("validate").innerHTML = '';
			
			// 设置表单提交的地址
			$("myform").action = "http://www.baidu.com";
			// 提交表单
			$("myform").submit();
		}
		
		/**
		 * 判断字符串是否为空
		 * 	如果为空，返回true
		 * 	如果不为空，返回false
		 * @param {Object} 
		 */
		function isEmpty(str) {
			if (str == null || str.trim() == "") {
				return true;
			}
			return false;
		}