JavaScript之document对象
一、document对象概念
浏览器对外提供的支持js的用来操作HTML文档的一个document对象，此对象封存的HTML文档的所有信息，浏览器在执行时，到达有document代码这一行，操作的不是原HTML文档，而是事先封装的document对象。
二、JS获取HTML元素对象
1、直接方式获取HTML元素对象
1.1 通过id
//id方式
function testGetEleById(){
var inp = window.document.getElementById("uname");
alert(inp);
}
1.2 通过name
//name方式
function testGetEleByName(){
var favs = document.getElementsByName("fav" );
alert(favs.length);
}
1.3 通过标签名
//标签名
function testGetEleByTagName(){
var inps = document.getElementsByTagName("input");
alert(inps.length);
}
1.4 通过class属性值
//class属性
function testGetEleByClassName(){
var inps = document.getElementsByClassName("common");
alert(inps.length);
}
1.5 相关实例一
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie-edge">
<title>JavaScript之document对象学习</title>
<script>
//document获取元素对象
//直接方式
//id方式
function testGetEleById(){
var inp = window.document.getElementById("uname");
alert(inp);
}
//name方式
function testGetEleByName(){
var favs = document.getElementsByName("fav" );
alert(favs.length);
}
//标签名
function testGetEleByTagName(){
var inps = document.getElementsByTagName("input");
alert(inps.length);
}
//class属性
function testGetEleByClassName(){
var inps = document.getElementsByClassName("common");
alert(inps.length);
}
</script>
<style>
.common{}
#showdiv{
border: solid 1px orange;
width:300px;
height:300px;
}
</style>
</head>
<body>
<h3>document对象的概念和获取元素对象的学习</h3>
<input type="button" name="" id="" value="测试获取HTML元素对象--id" onclick="testGetEleById()"/>
<input type="button" name="" id="" value="测试获取HTML元素对象--name" onclick="testGetEleByName()"/>
<input type="button" name="" id="" value="测试获取HTML元素对象--TagName" onclick="testGetEleByTagName()"/>
<input type="button" name="" id="" value="测试获取HTML元素对象--className" onclick="testGetEleByClassName()"/>
<hr/>
用户名：<input type="text" name="uname" id="uname" value=""/><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=""/> 睡觉
<input type="checkbox" name="fav" id="fav" value=""/> 打游戏
<hr/>
</body>
</html>
2、间接方式获取HTML元素对象
2.1 父子关系
//父子关系
function testParent(){
//获取父级元素对象
var showdiv = document.getElementById("showdiv");
//获取所有的子元素对象数组
var childs = showdiv.childNodes;
alert(childs.length);
}
2.2 子父关系
//子父关系
function testChild(){
//获取子元素对象
var inp = document.getElementById("inp");
//获取子元素的父级元素对象
var div = inp.parentNode;
alert(div);
}
2.3 兄弟关系
//兄弟关系
function testBrother(){
//兄获取弟
var inp = document.getElementById("inp");
var preEle = inp.previousSibling; //弟获取兄
var nextEle = inp.nextSibling; //兄获取弟
alert(preEle + ":::" + nextEle);
}
2.4 相关实例二
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie-edge">
<title>JavaScript之document对象学习</title>
<script>
//document获取元素对象
//间接获取方式
//父子关系
function testParent(){
//获取父级元素对象
var showdiv = document.getElementById("showdiv");
//获取所有的子元素对象数组
var childs = showdiv.childNodes;
alert(childs.length);
}
//子父关系
function testChild(){
//获取子元素对象
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.nextSibling; //兄获取弟
alert(preEle + ":::" + nextEle);
}
</script>
<style>
.common{}
#showdiv{
border: solid 1px orange;
width:300px;
height:300px;
}
</style>
</head>
<body>
<h3>document对象的概念和获取元素对象的学习</h3>
间接获取方式<br/>
<input type="button" name="" id="" value="测试父子关系" onclick="testParent()"/>
<input type="button" name="" id="" value="测试子父关系" onclick="testChild()"/>
<input type="button" name="" id="" value="测试兄弟关系" onclick="testBrother()"/>
<hr/>
<div id="showdiv">
<input type="" name="" id="" value=""/>
<input type="" name="" id="inp" value=""/>
<input type="" name="" id="" value=""/>
<input type="" name="" id="" value=""/>
<input type="" name="" id="" value=""/>
<input type="" name="" id="" value=""/>
</div>
</body>
</html>
三、JS操作HTML元素属性
1、 获取元素属性
1.1 场景一（函数的固有属性）
元素对象名.属性名 //返回当前属性的属性值
function testField(){
//获取元素对象
var inp = document.getElementById("uname");
//获取元素属性值
alert(inp.value);
}
1.2 场景二（函数的自定义属性）
元素对象名.getAttribute(“属性名”); //返回自定义属性的值------自定义
function testOwnField(){
//获取元素对象
var inp = document.getElementById("uname");
//获取自定义属性的值(自己定义了一个abc)
alert(inp.getAttribute("abc"));
}
2、修改元素属性
2.1 场景一（函数的固有属性）
元素对象名.属性名 = 属性值
function testField2(){
//获取元素对象
var inp = document.getElementById("uname");
//修改元素属性
inp.value = "哈哈";
}
2.2 场景二（函数的自定义属性）
元素对象名.setAttribute(“属性名”,“属性值”); //修改自定义属性的值------自定义
function testOwnField2(){
//获取元素
var inp = document.getElementById("uname");
//修改自定义属性的值
inp.setAttribute("abc","吃饭");
}
3、使用自定义方式操作固有属性
//使用自定义方式操作固有属性
function testOper(){
//获取元素对象
var inp = document.getElementById("uname");
//操作对象固有属性
alert(inp.getAttribute("value"));
}
4、注意
尽量不要去修改元素的id值和name属性值
使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据
5、实例
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie-edge">
<title>JavaScript之操作HTML的元素属性</title>
<script>
//声明函数---固有属性
function testField(){
//获取元素对象
var inp = document.getElementById("uname");
//获取元素属性值
alert(inp.type + ":" + inp.name + ":" + inp.id + ":" + inp.value);
alert(inp.aa);
}
function testField2(){
//获取元素对象
var inp = document.getElementById("uname");
//修改元素属性
inp.value = "哈哈";
inp.type = "button";
}
//声明函数---自定义属性
function testOwnField(){
//获取元素对象
var inp = document.getElementById("uname");
//获取自定义属性的值
alert(inp.getAttribute("abc"));
}
function testOwnField2(){
//获取元素
var inp = document.getElementById("uname");
//修改自定义属性的值
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="testField()"/>
<input type="button" name="" id="" value="测试修改元素属性--固有" onclick="testField2()"/>
<input type="button" name="" id="" value="测试获取元素属性--自定义" onclick="testOwnField()"/>
<input type="button" name="" id="" value="测试修改元素属性--自定义" onclick="testOwnField2()"/>
<input type="button" name="" id="" value="测试操作元素自定义操作固有属性" onclick="testOper()"/>
<hr/>
用户名：<input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
</body>
</html>
四、JS操作HTML元素内容
1、获取元素内容
元素对象名.innerHTML //返回当前元素对象的所有内容，包括HTML标签
元素对象名.innerText //返回当前元素对象的文本内容，不包括HTML标签
function getContext(){
//获取元素对象
var div = document.getElementById("div01");
//获取元素内容
//innerHTML获取所有内容
alert(div.innerHTML);
//innerText获取所有文本内容
alert(div.innerText);
}
2、修改元素内容
元素对象名.innerHTML=“新的值” //会将原有内容覆盖，并HTML标签会被解析
元素对象名.innerHTML=元素对象名.innerHTML+“新的值” //追加效果
元素对象名.innerText=“新的值” //会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示 0-*
function updateContext(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象内容
div.innerHTML="<b>我吃西红柿</b>";
}
function updateContext2(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象内容
div.innerText="<b>我吃西红柿</b>";
}
3、实例
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie-edge">
<title>JavaScript之操作元素内容学习</title>
<style type="text/css">
#div01{
width:200px;
height:200px;
border: solid 1px orange;
}
</style>
<script>
//获取元素内容
function getContext(){
//获取元素对象
var div = document.getElementById("div01");
//获取元素内容
//innerHTML获取所有内容
alert(div.innerHTML);
//innerText获取所有文本内容
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" name="" id="" value="测试获取元素---innerHTML&innerText" onclick="getContext()" />
<input type="button" name="" id="" value="测试修改元素内容--innerHTML" onclick="updateContext()"/>
<input type="button" name="" id="" value="测试修改元素内容--innerText" onclick="updateContext2()"/>
<hr/>
<div id="div01">
<b>西瓜</b>
<b>香蕉</b>
</div>
</body>
</html>
五、JS操作HTML元素样式
1、通过style属性操作元素样式
元素对象名.style.样式名=“样式值” //添加或者修改
元素对象名.style.样式名=“” //删除样式
注意: 以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。
//js给元素添加样式--style
function testAddCss(){
//获取元素对象
var showdiv = document.getElementById("showdiv");
//添加元素样式
showdiv.style.backgroundColor = "#FFA500";
//js修改元素样式
showdiv.style.border="solid 2px red";
//js删除样式
showdiv.style.border="";
}
2、通过className属性操作元素样式
元素对象名.className=“新的值” //添加类选择器样式或者修改类选择器样式
元素对象名.className=“” //删除类样式
//js操作样式--className
function testOperCss2(){
//获取元素对象
var div01=document.getElementById("div01");
//获取
alert(div01.className);
//添加或者修改
div01.className="common2";
//删除
//div01.className="";
}
3、实例
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie-edge">
<title>JavaScript之输入输出语句</title>
<style type="text/css">
#showdiv{
width: 200px;
height: 200px;
border: solid 1px;
}
.common{
width: 200px;
height: 200px;
border: solid 1px;
}
.common2{
width: 200px;
height: 200px;
border: solid 1px;
background-color: aqua;
}
</style>
<script>
//js操作元素样式
//js给元素添加样式--style
function testAddCss(){
//获取元素对象
var showdiv = document.getElementById("showdiv");
//添加元素样式
showdiv.style.backgroundColor = "#FFA500";
//js修改元素样式
showdiv.style.border="solid 2px red";
//js删除样式
showdiv.style.border="";
}
//js操作样式--className
function testOperCss2(){
//获取元素对象
var div01=document.getElementById("div01");
//获取
alert(div01.className);
//添加或者修改
div01.className="common2";
//删除
//div01.className="";
}
</script>
</head>
<body>
<h3>js操作元素的样式</h3>
<input type="button" name="" id="" value="测试添加元素样式--style" onclick="testAddCss()"/>
<input type="button" name="" id="" value="测试操作元素样式-className" onclick="testOperCss2();" />
<hr/>
<div id="showdiv" style="border:solid 2px blue;">
</div>
<div id="div01"class="common"></div>
</body>
</html>
六、JS操作HTML的文档结构
1、使用innerHTML操作文档结构
div.innerHTML=div.innerHTML+“内容” //增加节点
div.innerHTML=“” //删除所有子节点
父节点.removeChild(子节点对象) //删除指定的子节点
2、实例一
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie-edge">
<title>JavaScript之操作元素的文档结构</title>
<script>
function testAdd(){
//获取元素对象
var showdiv = document.getElementById("showdiv");
//给div追加上传按钮
showdiv.innerHTML = showdiv.innerHTML + "<div><input type='file' id=''' value=''/><input type='button' value='删除' οnclick='delInp(this)'/></div>";
}
function delInp(btn){
//获取父级div
var showdiv = document.getElementById("showdiv");
//获取要删除的子div
var cdiv = btn.parentNode;
//父div删除子div
showdiv.removeChild(cdiv);
}
</script>
</head>
<body>
<h3>js操作元素的文档结构</h3>
<input type="button" name="" id="" value="继续上传" onclick="testAdd()"/>
<div id="showdiv">
</div>
</body>
</html>
3、通过获取元素对象方式操作文档结构
var obj = document.createElement(“标签名”);
元素对象名.appendChild(obj);
4、实例二
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie-edge">
<title>JavaScript之操作元素的文档结构2</title>
<script>
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.removeChild(inp);
showdiv.removeChild(btn);
showdiv.removeChild(br);
}
//创建换行符
var br = document.createElement("br");
//将创建的元素对象存放到div中
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);
}
</script>
</head>
<body>
<h3>js操作文档结构2</h3>
<input type="button" name="" id="" value="继续上传" onclick="testOper2()"/>
<hr/>
<div id="showdiv">
</div>
</body>
</html>
七、JS操作form表单
1、获取form表单对象
1.1 方式一(使用id)
var fm = document.getElementById(“fm”);
//获取form表对象
var fm = document.getElementById("fm");
alert(fm);
1.2 方式二(使用name属性)
var frm = document.frm;
//使用form表单的name属性值来获取
var frm = document.frm;
alert(frm);
2、获取form下的所有表单元素对象集合
fm.elements
//获取form表单元素对象集合
alert(fm.elements.length);
3、form表单的常用方法
表单对象.submit(); //提交表单数据
//form表单的常用方法
fm.submit();
4、form的属性操作
表单对象名.action=“新的值” //动态的改变数据的提交路径
表单对象名.method=“新的值” //动态的改变提交方式
fm.action="http://www.baidu.com";
5、实例
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie-edge">
<title>JavaScript之操作form表单</title>
<script>
function testForm(){
//获取form表对象
var fm = document.getElementById("fm");
alert(fm);
//使用form表单的name属性值来获取
var frm = document.frm;
alert(frm);
alert(frm===fm);
//获取form表单元素对象集合
alert(fm.elements.length);
//form表单的常用方法
//fm.submit();
fm.reset();
//form的属性操作
fm.action="http://www.baidu.com";
}
</script>
</head>
<body>
<h3>js操作form表单</h3>
<hr/>
<input type="button" name="" id="" value="测试操作form" onclick="testForm()"/>
<hr/>
<form action="#" method="get" id="fm" name="frm">
<b>用户名：</b><input type="text" name="uname" id="uname" value="" readonly="readonly"/><br/><br/>
密码：<input type="password" name="pwd" id="pwd" value="" disabled="disabled"/><br/><br/>
<input type="submit" name="" id="" value="登录"/>
</form>
</body>
</html>
6、js表单元素的通用属性
只读模式
readonly = "readonly" //不可以更改，但是数据可以提交
关闭模式
Sdisabled = "disabled" //不可以进行任何的操作，数据不会提交
8322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
