document的概念
浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存HTML文档的所有信息
使用document对象
获取HTML元素对象
直接获取：
①通过id方式
function testGetElementById()
{
var inp= window.document.getElementById("uname");
alert(inp);
}
②通过name属性值
function testGetEleByName(){
document.getElementsByName("fav");
alert(davs.length);
}
③通过标签名
function testGetEleByTagName(){
var inps=document.getElementsByTagName("input");
alert(inps.length);
}
④通过class属性
function testGetEleByClassName(){
var inps=document.getElementsByClassName("commmon");
alert(inps.length);
}
间接获取：
①父子关系
②子父关系
③兄弟关系
//间接获取方式：
//父子关系
function testParent(){
var showdiv=document.getElementById("showdiv");
//获取所有元素对象数组
var childs=showdiv.childNodes;
alert=(childs.length);
}
//子父关系
function testChlid(){
var inp=document.getElementById("inp");//获取子元素对象
var div=inp.parentNode;
alert(div);
}
//兄弟关系
function testBrother(){
//兄获取弟
var inp=document.getElementById("inp");
var preEle=inp.previousSibling;
var nextEle=inp.nextElementSibling;
alert(preEle+":::"+nextEle);
}
测试代码：
<style type="text/css">
.common{}
#showdiv{
border :solid 2px orange;
width:300px;
height:300px;
}
</style>
<body>
<h3>document对象的学习</h3>
<input type="text" name="uname" id="uname" value="测试获取html元素----id" onclick="testGetElementById();" />
<input type="text" name="uname" id="uname" value="测试获取html元素-----name" onclick="testGetElementByname();" />
<input type="text" name="uname" id="uname" value="测试获取html元素-----TagName" onclick="testGetEleByTagname();" />
<input type="text" name="uname" id="uname" value="测试获取html元素----className" onclick="testGetElementByClassId();" />
<hr/>
用户名：<input type="text" name="unme" id ="unme" value="" onclick="" /> <br><br>
<input type="checkbox" name="fav" id="fav" value="" class="common" />唱歌
<input type="checkbox" name="fav" id="fav" value="" class="common" />跳舞
<input type="checkbox" name="fav" id="fav" value="" class="common"/>睡觉
<input type="checkbox" name="fav" id="fav" value="" class="common" />打游戏
<hr>
间接获取方式学习：<br>
<input type="button" value="测试父子关系" onclick="testParent();" />
<input type="button" value="测试子父关系" onclick="testChild();" />
<input type="button" value="测试兄弟关系" onclick="testBrother();" />
<hr/>
<div id="showdiv">
<input type=""name="" id ="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
</div>
</body>
操作HTML元素对象的属性
步骤：获取元素对象 -------- 操作元素属性
获取：
固有：元素对象名.属性名(返回当前属性的属性值)
自定义：元素对象名。getAttribute(“属性名”)；（返回自定义属性值的值）
修改 ：
固有：元素对象名.属性名=属性值
自定义：元素对象名.setAttribute(“属性名”。“属性值”)
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--声明js代码域-->
<script type="text/javascript">
//声明函数
//获取属性值
function testFiled(){
//获取元素对象
var inp=document.getElementById("uname");
//获取元素属性值
alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
}
//修改元素属性值
function testFiled2(){
var inp=document.getElementById("uname");
//修改元素属性
inp.value="hello world";
inp.type="button";
}
//声明函数----自定义属性
function testOwnFiled(){
var inp=document.getElementById("uname");
//获取自定义属性的值
alert(inp.getAttribute("abc"));
}
//修改
function testOwnFiled2(){
//获取元素对象
var inp=document.getElementById("uname");
//修改元素自定义属性的值
alert(inp.setAttribute("abc","呵呵"));
}
//使用自定义方式操作固有属性
function testOper(){
//获取元素对象
var inp =document.getElementById("uname");
//操作元素属性
alert(inp.getAttribute("type"));
alert(inp.getAttribute("value"));
}
</script>
</head>
<body>
<h3>js操作HTML的元素属性</h3>
<input type="button" name="" id="" value="测试获取元素的属性----固有" onclick="testFiled();" />
<input type="button" name="" id="" value="测试修改元素的属性----固有" onclick="testFiled2();" />
<input type="button" name="" id="" value="测获取元素的属性-----自定义" onclick="testOwnFiled();" />
<input type="button" name="" id="" value="测试修改元素的属性-----自定义" onclick="testOwnFiled2();" />
<input type="button" name="" id="" value="测试自定义操作固有元素的属性-----自定义" onclick="testOper();" />
<hr/>
用户名:<input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
</body>
</html>
注意 ：尽量不去修改元素的id值和name属性;使用自定义属性获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据
操作HTML元素对象的内容和样式
内容
获取元素
元素对象.innerHTML (返回当前元素对象的所有内容，包括HTML内容)
元素对象名.innerText(返回当前元素对象的所有内容，不包括HTML标签)
修改元素
元素对象名.innerHTML=“新的值”(会将原有的呢绒覆盖，并且HTML标签会被解析)
元素对象名.innerHTML=对象名.innerHTML+“新的值”（追加）
元素对象名.innerText=“新的值”（会将原有内容覆盖，但HTMLb标签不会被解析，会作为文本形式）
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#div01{
width:200px;
height:200px;
border:solid 1px orange;
}
</style>
<script type="text/javascript">
function getContext(){
//获取元素对象
var div=document.getElementById("div01");
//获取元素内容
alert(div.innerHTML);
alert(div.innerText);
}
//修改元素
function updateContext(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象内容
div.innerHTML="<b>今天天气真好，自己安排行程</b>";
}
function updateContext2(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象内容
div.innerText="<b>今天天气真好，自己安排行程</b>";
}
</script>
</head>
<body>
<h3>js操作元素内容</h3>
<input type="button" value="测试获取元素内容-----innerHTML&innerText" onclick="getContext();"/>
<input type="button" value="测试修改元素内容-----innerHTML" onclick="updateContext();"/>
<input type="button" value="测试修改元素内容-----innerText" onclick="updateContext2();"/>
<hr/>
<div id="div01">
<b>你好，今天休息！</b>
<b>你好，今天休息！</b>
</div>
</body>
</html>
样式
js操作元素样式:
①获取元素对象
通过style属性：元素对象名.style.属性=“样式值”（添加或者修改）
元素对象名.style.样式名=""(删除样式)
function testAddCss(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//添加元素样式
showdiv.style.backgroundColor="#FFA500";
//js修改元素样式
showdiv.style.border="solid 2px red";
//js删除样式
showdiv.style.border="";
}
注意：以上操作，操作的是HTML的style属性中的样式，而不是其他css的代码域
②通过className
元素对象名.classname=“新的值”（添加类选择器样式或者修改类选择器样式）
元素对象名.className=""(修改类样式)
function testOperaCss2(){
//获取元素对象
var div01=document.getElementById("div01");
//获取
alert(div01.className);
//修改
div01.className="common2";
//添加或者删除
div01.className=""
}
操作HTML的文档结构
增加结点
删除结点
①使用innerHTML
div.innerHTML=div.innerHTML+“内容”（增加结点）
div.innerHTML=""(删除所有子节点)
父结点.removeChlid(子节点对象)；（删除指定的子节点）
<script type="text/javascript">
function testAdd(){
//获取元素对象
var showdiv =document.getElementById("showdiv");
//给div追加上传按钮
showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' value='' /><input type='button' value='删除' onclick='delInp()' /></div>";
}
function delInp(btn){
//获取父级div
var showdiv=document.getElementById("shoediv");
//获取要删除的div
var cdiv=btn.parentNode;
document.getElementById("a")
//父div删除子div
show.removeChild(cdiv);
}
</script>
②
获取元素对象
var obj =document.creatEllement(“标签名”);
元素对象名.appendChild(obj)；
<script type="text/javascript">
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(){
showdiv.removeClild(inp);
showdiv.removeClild(btn);
showdiv.removeClild(br);
}
//创建换行符
var br=document.createElement("br");
//将创建的元素对象存放到div中
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);
}
</script>
document操作form表单
①使用id方式
②使用name属性
function testForm(){
//获取form表单
var fm=document.getElementById("fm");
alert(fm);
//form表单的name属性值来获取
var fm=document.frm;
alert(frm);
}
获取form下的所有表单元素对象集合
fm.elements
form表单的常用方法
表单对象.submit();
form的属性操作
表单对象名.action=“新的值”（动态的改变数据的提交路径）
表单对象名.method=“新的值”（动态的改变提交方式）
js 表单元素的通用属性
只读模式：readonly（数据不可关闭，但可提交）
关闭模式：disabled（不可以进行任何的操作，数据不会提交）
