前端：JavaScript的document对象

#前端
##JavaScript
###document的学习

1、document对象的概念
浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。
2、使用document
获取HTML元素对象

直接获取方式：通过id、通过name属性值、通过标签名、通过class属性值；
间接获取方式：父子关系、子父关系、兄弟关系；

操作HTML元素对象的属性

获取：
--元素对象名.属性名//返回当前属性的属性值。---------固有
--元素对象名.getAttribute("属性名");//返回自定义属性的值---------自定义
修改：
--元素对象名.属性名=属性值
--对象名.setAttribute("属性名","属性值");//修改自定义属性的值-------自定义
注意：
--尽量的不要去修改元素的id值和name属性值。
使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取实时的用户数据。

操作HTML元素对象的内容和样式

获取元素对象
获取：
--元素对象名.innerHTML//返回当前元素的所有内容，包括HTML标签
--元素对象名.innerHTML//返回当前元素对象的文本内容，不包括HTML标签
修改：
--元素对象名.innerHTML="新的值"//会将原有内容覆盖，并HTML标签会解析
--元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
--元素对象名.innerText="新的值"//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。

js操作元素样式

获取元素对象
-通过style属性
--元素对象名.style.样式名="样式值"//添加或者修改
--元素对象名.style.样式名=“”//删除样式
注意：以上操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式
-通过className
--元素对象名.className="新的值"--添加类选择器样式或者修改类选择器样式
--元素对象名.className=""//删除类样式

操作HTML的文档结构

增加结点
删除结点
第一种方式：使用innerHTML
div.innerHTML=div.innerHTML+"内容"//增加节点
div.innerHTML=""//删除所有子节点
父节点.removeChild(子节点对象)//删除指定的子节点

获取元素对象
var obj=document.createElement("标签名");
元素对象名.appendChild(obj);

function testOper2(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//创建input元素对象
var inp=document.createElement("input");
inp.type="file";
//创建按钮元素对象
var btn=document.createElement("input");
btn.type="button";
btn.value="删除";
btn.onclick=function(inp);
	showdiv.removeChild(inp);
	showdiv.removeChild(btn);
	showdiv.removeChild(br);
//创建换行符
var br=document.createElement("br");
//将创建的元素对象存放在div中
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);
}

document操作Form元素

获取form表单对象
		使用id：var fm=document.getElementById("fm");
		使用name属性：var frm=document.frm;
获取form下的所有表单元素对象集合
		fm.elements
form表单的常用方法
		表单对象.submit();//提交表单数据
form的属性操作：
		表单对象名.action="新的值"//动态的改变数据的提交路径
		表单对象名.method="新的值"//动态的改变提交方式

js表单元素的通用属性
	只读模式：
			readonly="readonly"//不可以更改。但是数据可以提交
	关闭模式：
			disabled="disabled"//不可以进行任何操作，数据无法进行提交

js操作多选框、单选框
–被选中状态下在js中checked属性值为true，未选中状态为false；
js操作下拉框：
–被选择的option对象在js之中selected属性值为true，未选中为false

function Form(){
	//获取form表对象
	var fm=document.getElementById("fm");
	alert(fm);
	//使用form表单的name属性值来获取
	var frm=document.frm;
	alert(frm);
}

document操作表格

删除行：
		行对象.rewIndex//返回行对象的脚标
		表格对象.deleteRow(要删除的行对象的脚标)