DOM文档,和表单操作

节点及获得节点的方式

节点

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

元素节点
所有的 HTML 元素 如:< a >, < div >, < p > 等

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

文本节点
元素内的文本

注释节点
HTML 中的注释

节点的获得

方法:
getElementById() 根
getElementsByTagName()
getElementsByClassName()
getElementsByName()

注意:
注意：操作 dom 必须等节点初始化完毕后，才能执行。处理方式两种:
（1）把 script 调用标签移到 html 末尾即可；
（2）使用 onload 事件来处理 JS，等待 html 加载完毕再加载 onload 事件里的 JS。
window.onload = function () { //预加载 html 后执行};

创建节点和插入节点

创建节点

方法:
createElement()
创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象

createTextNode()
创建一个文本节点，可以传入文本内容

innerHTML
也能达到创建节点的效果，直接添加到指定位置了

插入节点

方法:
write()
将任意的字符串插入到文档中

appendChild()
向元素中添加新的子节点，作为最后一个子节点

insertBefore()
向指定的已有的节点之前插入新的节点

newItem：要插入的节点

exsitingItem:参考节点

注：如果使用appendChild()方法追加时，被追加的元素是已经存在的元素，则会被直接剪切到指定位置

例:

<script type="text/javascript">
		/**
		 * 添加段落
		 */
		function addPara()  {
			// 得到父元素div
			var mydiv = document.getElementById("mydiv");
			
			/* 方式一：通过将文本节点追加元素节点中，再将元素节点追加到父元素中*/
			// 创建p标签
			var p = document.createElement("p");
			// 创建文本节点
			var txt = document.createTextNode("这是一个P");
			// 将文本追加到元素节点中
			p.appendChild(txt);
			console.log(p);
			// 将元素节点追加到父元素中
			mydiv.appendChild(p);
			
			
			/*方式二：给元素节点赋值，将元素节点追加到父元素中*/
			// 创建p标签
			var p2 = document.createElement("p");
			// 给p标签赋值
			p2.innerHTML = "这也是一个P";
			console.log(p2);
			// 将元素节点追加到父元素中
			mydiv.appendChild(p2);
			
			/*方式三：给父元素直接赋值*/
			var html = "<p>这是第三个P</p>";
			mydiv.innerHTML += html;
			
			
			
			// 将已经存在的元素追加到父元素中
			var test = document.getElementById("test");
			mydiv.appendChild(test);
			
		}
		
		/**
		 * 添加图片
		 */
		function addImg () {
			// 得到父元素div
			var mydiv = document.getElementById("mydiv");
			
			/*方式一：创建元素节点，设置元素节点的属性节点，再将元素节点追加到父元素中*/
			// 创建img元素
			var img = document.createElement("img");
			console.log(img);
			// 设置元素的属性节点
			img.src = "img/jay.jpg";
			img.style.width = "200px";
			img.height = 200;
			// 将元素节点追加到父元素中
			mydiv.appendChild(img);
			
			/*方式二：创建元素节点，给元素节点赋值，再将元素节点追加到父元素中*/
			var img2 = document.createElement("img"); 
			// 通过setAttribute("属性名","属性值")方法设置属性
			img2.setAttribute("src","img/jay.jpg");
			img2.setAttribute("width",100);
			img2.setAttribute("height",100);
			// 将元素节点追加到父元素中
			mydiv.appendChild(img2);
			
			/*方式三：直接定义html代码，赋值给父元素*/
			var img3 = "<img src='img/jay.jpg' width=100 height=100 />";
			// 给父元素赋值
			mydiv.innerHTML = mydiv.innerHTML + img3;
		}
		
		/**
		 * 添加文本框
		 */
		function addTxt() {
			// 得到父元素div
			var mydiv = document.getElementById("mydiv");
			
			/*方式一*/
			// 创建input元素
			var txt = document.createElement("input");
			// 设置文本框类型的input
			txt.type = "text";
			// 设置文本框的默认值
			txt.value = "今天天气还不错~";
			// 将元素节点追加到父元素中
			mydiv.appendChild(txt);
			
			/*方式二*/
			var txt2 = "<input type='text' value='天气很热' />";
			// 将html代码赋值给父元素
			mydiv.innerHTML += txt2;
		}
		
		/**
		 * 添加下拉选项
		 */
		function addOption() {
			// 得到下拉框对象
			var sel = document.getElementById("city");
			
			/*方式一*/
			var opt = document.createElement("option");
			opt.value = "shanghai"; // 设置下拉框value（页面中看不到）
			opt.text = "上海"; // 如果下拉选项未设置value属性值，则获取下拉值时，对应获取的是text的值
			sel.appendChild(opt);
			
			
			/*方式一*/
			var opt2 = document.createElement("option");
			opt2.value = "beijing"; // 设置下拉框value（页面中看不到）
			opt2.text = "北京"; // 如果下拉选项未设置value属性值，则获取下拉值时，对应获取的是text的值
			// 获取下拉框中所有的下拉选项
			sel.options.add(opt2);
			
			/*方式三*/
			var opt3 = "<option value='hangzhou'>杭州</option>";
			sel.innerHTML += opt3;
			
			/*方式四   new Option("文本值","value值")*/
			var opt4 = new Option("苏州","suzhou");
			sel.options.add(opt4);
			
		}
		
		
		/**
		 * 在指定元素的前面添加元素
		 * 	newItem：要插入的节点
			exsitingItem：参考节点 
			需要参考父节点
		 */
		function addBefore() {
			// 得到参考节点（定位的元素）
			var mydiv = document.getElementById("mydiv");
			// 想要添加的元素
			var p = document.createElement("p");
			// 给p标签赋值
			p.innerHTML = "我是添加到div前面的元素";
			
			// 得到定位节点的父节点
			console.log(mydiv.parentNode);
			// 先得到参考元素的父元素，再添加
			mydiv.parentNode.insertBefore(p,mydiv);
		}
		
		
		
	</script>

间接查找元素

间接查找属性
childNodes
返回元素的一个子节点的数组

firstChild
返回元素的第一个子节点

lastChild
返回元素的最后一个子节点

nextSibling
返回元素的下一个兄弟节点

parentNode
返回元素的父节点

previousSibling
返回元素的上一个兄弟节点

替换节点

方法:
replaceChild(newNode,oldNode)

细节:
oldNode.parentNode.replaceChild(newNode,oldNode)

克隆节点

cloneNode()

var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true：深度克隆，可以克隆结构和内容
false(默认值)：只克隆结构

删除节点

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

细节:
p.parentNode.removeChild( p )

获取表单

获取表单
前两中常用
1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; //从 0 开始

获取input元素

获取 input 的元素
如 text password hidden textarea 等，前两种常用。
1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称;  name 属性值
3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
4)、通过 tagName 数组 :document.getElementsByTagName(‘input’)[索引] //从 0 开始

获取单选按钮

获取 单选按钮
前提：将一组单选按钮设置相同的 name 属性值
(1)获取单选按钮组：
document.getElementsByName(“name 属性值”);
(2)遍历每个单选按钮，并查看单选按钮元素的 checked 属性
若属性值为 true 表示被选中，否则未被选中
选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定： 没有 checked 属性 或 checked=’false’

获取下拉选项

获取下拉选项
（1）获取 select 对象：
var ufrom = document.getElementById(“ufrom”);
（2）获取选中项的索引：
var idx=ufrom.selectedIndex ;
（3）获取选中项 options 的 value 属性值：
var val = ufrom.options[idx].value;
注意：当通过 options 获取选中项的 value 属性值时，
若没有 value 属性，则取 option 标签的内容
若存在 value 属性，则取 value 属性的值
（4）获取选中项 options 的 text：
var txt = ufrom.options[idx].text;
选中状态设定：selected=‘selected’、selected=true、selected
未选中状态设定：不设 selected 属性

表单提交

提交表单
（1）使用普通 button 按钮+onclick 事件+事件中编写代码: 获取表单.submit();
（2）使用 submit 按钮 + οnclick=“return 函数()” +函数编写代码: 最后必须返回：return true|false;
（3）使用 submit 按钮/图片提交按钮 + 表单 οnsubmit=“return 函数();” +函数编写代码: 最后必须返回：return true|false;