1.概念
每个载入浏览器的 HTML 文档都会成为 Document 对象，Document 对象是 Window 对象的一部分。
Document 对象使我们可以从脚本中通过 window.document 属性对 HTML 页面中的所有元素进行访问。
2，使用document
2.1 获取html元素对象
2.1.1，直接获取方式：
document.getElementById(" “);
document.getElementsByClassName(” “);
document.getElementsByName(” “);
document.getElementsByTagName(” ");
<body>
<input type="button" id="btn" value="测试id"/>
<input type="button" class="btn" value="测试class1"/>
<input type="button" class="btn" value="测试class2"/>
<input type="button" name="btn" value="测试name1"/>
<input type="button" name="btn" value="测试name2"/>
<button>测试tagname1</button>
<button>测试tagname2</button>
<script>
console.log(document.getElementById("btn"));
console.log(document.getElementsByClassName("btn"));
console.log(document.getElementsByName("btn"));
console.log(document.getElementsByTagName("button"));
alert(document.getElementsByClassName("btn"));//collection（document在底层将其封装为collection对象）
alert(document.getElementsByName("btn"));//nodelist（document在底层将其封装为nodelist数组）
alert(document.getElementsByTagName("button"));//collection
//下面三个返回的都是单个的element元素
alert(document.getElementsByClassName("btn")[0]);
alert(document.getElementsByName("btn")[0]);
alert(document.getElementsByTagName("button")[0]);
</script>
2.1.2，间接获取方式：
父子关系
box.childNodes
子父关系
son2.parentNode
兄弟关系
son2.previousSibling(当前元素)
son2.nextSibling（与当前元素同级的下一个元素）
function p(){
var box=document.getElementById("box");
alert(box.childNodes.length);
//第一种length=13 第二种length=6 因为div，input等之间有换行，换行的空区域也可以写内容，相当于占了一个换行的文本
console.log(box.childNodes);//第一种有text和input两种类型的子元素
}
function q(){
var son2=document.getElementById("son2");
var par=son2.parentNode;
alert(par);
// console.log(par);
}
function r(){
var son2=document.getElementById("son2");
// alert(son2.previousSibling,son2.nextSibling)
console.log(son2.previousSibling, son2.nextSibling);
}
<div id="box" >
<input type="text" id="son1"/>
<input type="text" id="son2" class="son" value="wang" abc="嘿嘿"/>
<input type="text" id="son3" class="son" value="张亮"/>
<input type="text" id="son4"/>
<input type="text" id="son5"/>
<input type="text" id="son6"/>
</div><br><br>
<!--<div id="box" ><input type="text" id="son1"/><input type="text" id="son2"/><input type="text" id="son3"/><input type="text" id="son4"/><input type="text" id="son5"/><input type="text" id="son6"/></div><br><br>-->
<input type="button" value="测试父子关系获取元素" onclick="p();"/>
<input type="button" value="测试子父关系获取元素" onclick="q();"/>
<input type="button" value="测试兄弟关系获取元素" onclick="r();"/><br><br>
dom元素的八种获取方式
https://www.jb51.net/article/116460.htm
（脚本之家的文档资源）
2.2，操作html元素对象的属性；
js操作元素对象的属性包括：
（1）js获取元素对象的属性：
除了上面写到的直接和间接获取固有属性的方式，还可以通过obj.getAttribute(“自定义的属性名称”)获取
<div id="box" >
<input type="text" id="son3" class="son" value="张亮"/>
</div>
<input type="button" value="测试获取元素属性" onclick="s();"/>
function s(){
var son2=document.getElementById("son2");
// 获取html元素：固有属性的获取 自定义属性的获取
console.log(son2.getAttribute("abc"));
}
（2）js修改元素对象的属性：
js修改元素对象的属性除了对象名称.元素属性="",还可以通过obj.setAttribute(“自定义的属性名称”,“自定义属性的值”)
<div id="box" >
<input type="text" id="son3" class="son" value="张亮"/>
</div>
<input type="button" value="测试修改元素属性" onclick="t();"/>
function t(){
var son3=document.getElementById("son3");
// 修改元素属性：固有属性的修改 自定义属性的修改 setAttribute("自定义的属性名","自定义的属性值")
son3.type="button";
son3.className="aaa";
son3.value="abcabc";
son3.setAttribute("abc","哦哦");
console.log(son3);//<input type="button" id="son3" class="aaa" value="abcabc" abc="哦哦"/>
}
用getAttribute获取js实时修改的元素value属性是拿不到的，只能拿到默认值，而加上获取其他修改的属性就都可以实时拿到了，虽然这样可以解决value的问题，但是最好不要这样用。
<div id="box" >
<input type="text" id="son3" class="son" value="张亮"/>
</div>
<input type="button" value="测试用自定义获取元素固有属性" onclick="t();"/>
function u(){
var son3=document.getElementById("son3");
son3.value="qwe";
alert(son3.getAttribute("value"));//张亮
//用getAttribute获取实时修改的元素value属性是拿不到的.
// alert(son3.getAttribute("type"));
}
function u(){
var son3=document.getElementById("son3");
son3.type="button";
son3.value="qwe";
alert(son3.getAttribute("value"));//qwe
//用getAttribute获取实时修改的元素value属性是拿不到的，加上获取其他修改的属性可以实时拿到
alert(son3.getAttribute("type"));//button
}
2.3，操作html元素对象的内容和样式；
js获取元素对象内容：
obj.innerHTML 返回当前元素的所有内容，包括html标签（应用时通过属性和内容可以将js和html之间的内容进行转换）
obj.innerText返回当前元素所有内容的文本值
#box2{
width: 200px;
height: 200px;
border:1px solid silver;
}
.abc{
width: 200px;
height: 200px;
border:1px solid silver;
}
.abcd{
width: 300px;
height: 300px;
border:1px solid silver;
background:pink;
}
<div id="box2"></div>
<div id="box3" class="abc"></div>
<input type="button" value="测试js添加元素样式" onclick="v();"/><br>
<input type="button" value="测试js修改元素样式" onclick="w();"/><br>
function v(){
var box2=document.getElementById("box2");
// box2.style="background:red;";//这样的操作方式为覆盖，不是添加，那之前所有的样式都没有就剩background了
// 添加（或称获取）元素样式
box2.style.backgroundColor="orange";//js里面操作样式把“-”去掉，名称为驼峰样式
// 修改元素对象的样式
box2.style.border="solid 2px blue";//这种样式相当于添加了一个border，它只是css在不同的作用域
// 删除样式
// box2.style.border="";
}
function w(){
var box3=document.getElementById("box3");
// 修改样式
// box3.className="abcd";//修改元素的class为abcd，则它就会应用class="abcd"的css样式
box3.className="";//删除元素的样式，没有了class属性，元素也就在网页上消失了
}
2.4，操作html的文档结构；
1，增加节点
obj.innerHTML=obj.innerHTML+“内容”；,
2，删除节点
obj.innerHTML=“”；//删除父里面所有子节点
父节点.removeChild（子节点）//删除指定子节点
注意：js操作html的文档结构不适合table(table表格比较特殊，里面除了tr，td不能有其他的
下面是应用该知识做的动态上传文件和删除上传文件的小案例
<input type="button" value="测试js操作HTML文档结构" onclick="x();"/>
<div id="showfile"></div>
function x(){
//获取父元素对象
var showfile=document.getElementById("showfile");
//动态创建input对象
var inp=document.createElement("input");
inp.type="file";
//动态创建button对象
var btn=document.createElement("input");
btn.type="button";
btn.value="删除此项";
btn.onclick=function(){
showfile.removeChild(inp);
showfile.removeChild(btn);
showfile.removeChild(br);
};
//动态创建换行符
var br=document.createElement("br");
//将创建的元素对象添加到div里面
showfile.appendChild(inp);
showfile.appendChild(btn);
showfile.appendChild(br);
}
上面如果用obj.innerHTML=obj.innerHTML+"内容"会出现每点击一次测试按钮之前上传的文档内容会消失的bug，所以用这种方式动态创建就能很好的处理这种问题。
再就是上面直接用父元素删除每行的单个子元素也可以换成将子元素添加到子div里面，删除时直接删除每行的div也是可以的
2.5，document操作Form元素；
1，获取form表单元素：
(a),通过id，className，Tagname获取
(b),通过 document.name名称（name属性获取form表单元素的特殊写法）
2，获取form下的所有表单元素对象集合 ：
obj.elements（该方法获取的是专属于form表单的元素）
3，form表单的常用方法操作
fm.submit();
fm.reset();
4.form表单的属性操作
fm.action="";//表单的提交路径
fm.method="";//表单的提交方式
5. form表单元素的通用属性
readonly 只读模式（不可以更改，但是数据可以提交）
disabled 关闭模式（或称失效模式）（不可以进行任何的操作，数据也不会提交，一般会用在“我同意本公司的协议”）
用js操作form表单的方法和属性的好处是可以根据需求实时控制
function textform(){
var fm=document.getElementById("fm");
// alert(fm);
// var fm2=document.fm2;//用name属性获取form表单的特殊写法
// alert(fm2);
// alert(fm===fm2);//true
//获取form下的所有表单元素对象集合 fm.elements
// alert(fm.elements.length);//3 fm.elements指的是专属于form表单的元素
// console.log(fm.elements);//3个input
//form表单的常用方法
// fm.submit();//可以通过js进行form表单的提交，用type="submit"是不可控的
fm.reset();
//form的属性操作
fm.action="http://www.baidu.com/s";//表单的提交路径
fm.method="";//表单的提交方式
}
2.6，document对象实现form表单验证；
1，document操作多选框
type=“checkbox”
alert(obj.checked)
被选中状态下在js中checked属性值为true，未选中状态为false
<input type="checkbox" name="fav" value="1"/>远走高飞<br>
<input type="checkbox" name="fav" value="2"/>当你老了<br>
<input type="checkbox" name="fav" value="3"/>李白<br>
<input type="checkbox" name="fav" value="4"/>明月几时有<br>
<input type="checkbox" name="fav" value="5"/>成都<br>
<input type="checkbox" name="fav" value="6"/>体面<br>
<input type="checkbox" name="fav" value="7"/>七里香<br>
<input type="checkbox" name="fav" value="8"/>稻香<br><br>
<input type="button" value="全选" onclick="allcheck();"/>
<input type="button" value="反选" onclick="reversecheck();"/>
//全选
function allcheck(){
var fav=document.getElementsByName("fav");
//遍历数组
for(var i=0;i<fav.length;i++){
fav[i].checked=true;
}
}
//反选（）
function reversecheck(){
var fav=document.getElementsByName("fav");
for(var i=0;i<fav.length;i++){
// fav[i].checked=false;
fav[i].checked=!fav[i].checked;//
}
}
2，js操作下拉框
获取option对象集合 :
obj.options
对象被选择：
obj.selected
被选择的option对象在js中selected属性值为true，未选中为false
<select name="choose" id="" onchange="chooseone()">
<option value="请选择">--请选择--</option>
<option value="北京">北京</option>
<option value="南京">南京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select>
function chooseone(){
var choose=document.getElementsByName("choose")[0];
//获取option对象集合 choose.options
var opt=choose.options;
for(var i=0;i<opt.length;i++){
//一定要有opt[i].selected的判断
if(opt[i].selected){
alert(opt[i].value)
}
}
}
案例：js校验form表单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
background-image: url(img/b.jpg);
background-size: 100%;
}
.showdiv{
width: 500px;
border:1px solid #e50000;
margin:20px auto;
border-radius:20px;
}
table{
margin:auto;
color:#fff;
}
tr{
height:40px;
}
td>input{
outline: none;
}
</style>
</head>
<body onload="getrandom()">
<div class="showdiv" >
<form action="#" method="get" onsubmit="return allcheck();">
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="uname" id="uname" value="" onblur="unamecheck();"/>
<!-- input里面alt：在源码里面以属性的形式说明这个标签是做什么的-->
<span id="uspan">2~4位汉字</span>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd" id="pwd" value="" onblur="pwdcheck();"/>
<span id="pspan"></span>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" name="pwd2" id="pwd2" value="" onblur="pwdcheck2();"/>
<span id="pspan2"></span>
</td>
</tr>
<tr>
<td>手机号：</td>
<td>
<input type="text" name="phone" id="phone" value="" onblur="phongcheck();"/>
<span id="phspan"></span>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="text" name="email" id="email" value="" onblur="emailcheck();"/>
<span id="espan"></span>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" id="sex" value="0" checked="checked"/>男
<input type="radio" name="sex" id="sex" value="1"/>女
<!-- ?????????-->
</td>
</tr>
<tr>
<td>籍贯：</td>
<td>
<select name="" id="">
<option value="">--请选择--</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">南京</option>
<option value="">天津</option>
</select>
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox"/>唱歌
<input type="checkbox"/>跳舞
<input type="checkbox"/>LOL
<input type="checkbox"/>看电影
<input type="checkbox"/>读书
<input type="checkbox"/>旅行
</td>
</tr>
<tr>
<td>个人介绍：</td>
<td>
<textarea name="" cols="40" rows="5"></textarea>
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text" value="" style="width:100px;"/>
<span id="num" onclick="getrandom();" style="display:inline-block;width:60px;height:20px;background-image: url(img/code.jpg.gif);color:#000;">
</span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<!-- colspan="2" align="center"-->
<input type="checkbox" id="agreeor" onclick="agreement();"/>是否同意本公司协议
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" id="register" value="立即注册" disabled="disabled"/>
<!-- disabled="disabled"-->
</td>
</tr>
</table>
</form>
</div>
<script>
//表单事件：onfocus获得焦点 onblur失去焦点 submit 提交
//创建随机验证码
function getrandom(){
var code=Math.floor(Math.random()*9000+1000);
var num=document.getElementById("num");
num.innerHTML=code;
}
//验证用户名
function unamecheck(){
//获取文本值
var uname=document.getElementById("uname").value;
//创建用户名校验规则
var namerule=/^[\u4e00-\u9fa5]{2,4}$/;
//获取span
var uspan=document.getElementById("uspan");
//判断文本值是否符合规则 ，并输出校验结果
if(uname==null || uname==""){
uspan.innerHTML="用户名不能为空";
uspan.style.color="red";
return false;
} else if(namerule.test(uname)){
uspan.innerHTML="用户名正确";
uspan.style.color="green";
return true;
}
else{
uspan.innerHTML="用户名不正确，请重新输入";
uspan.style.color="red";
return false;
}
}
// 校验密码
function pwdcheck(){
//获取文本值
var pwd=document.getElementById("pwd").value;
//创建密码校验规则
var pwdrule=/^[a-z]\w{5,7}$/;
//获取span
var pspan=document.getElementById("pspan");
//进行校验
if(pwd=="" || pwd=="null"){
pspan.innerHTML="密码不能为空";
pspan.style.color="red";
return false;
}
else if(pwdrule.test(pwd)){
pspan.innerHTML="密码设置正确";
pspan.style.color="green";
return true;
}else{
pspan.innerHTML="密码设置有误";
pspan.style.color="red";
return false;
}
}
// 校验确认密码
function pwdcheck2(){
//获取密码文本值
var pwd=document.getElementById("pwd").value;
//获取确认密码文本值
var pwd2=document.getElementById("pwd2").value;
//获取span对象
var pspan2=document.getElementById("pspan2");
//进行校验
if(pwd2=="" || pwd2==null){
pspan2.innerHTML="密码不能为空";
pspan2.style.color="red";
return false;
}else if(pwd==pwd2){
pspan2.innerHTML="密码确认成功";
pspan2.style.color="green";
return true;
}else{
pspan2.innerHTML="密码确认失败";
pspan2.style.color="red";
return false;
}
}
// 校验手机号
function phongcheck(){
//获取文本值
var phone=document.getElementById("phone").value;
//创建验证规则
var phonerule=/^1[3,4,5,7,8]\d{9}$/;
//获取span
var phspan=document.getElementById("phspan");
//进行校验
if(phone=="" || phone==null){
phspan.innerHTML="手机号不能为空";
phspan.style.color="red";
return false;
}
else if(phonerule.test(phone)){
phspan.innerHTML="输入格式正确";
phspan.style.color="green";
return true;
}
else{
phspan.innerHTML="输入错误，请重新输入";
phspan.style.color="red";
return false;
}
}
// 校验邮箱
function emailcheck(){
//获取文本值
var email=document.getElementById("email").value;
//创建校验规则
var emailrule=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/;
//获取span对象
var espan=document.getElementById("espan");
//进行校验
if(email==null || email==""){
espan.innerHTML="邮箱不能为空";
espan.style.color="red";
return false;
}
else if(emailrule.test(email)){
espan.innerHTML="输入格式正确";
espan.style.color="green";
return true;
}
else{
espan.innerHTML="您的邮箱输入有误，请重新输入";
espan.style.color="red";
return false;
}
}
// 校验是否同意协议
function agreement(){
//disabled 关闭模式 readonly 只读模式
document.getElementById("register").disabled=!document.getElementById("agreeor").checked;
}
// 提交判断（有一个不符合条件的就不能提交,且每输入一项就要全体校验一次）
function allcheck(){
//（1）input里面没有name属性或者name没有值都提交不上去
//(2)不能用all命名函数，有冲突
return unamecheck()&&pwdcheck()&& pwdcheck2()&&phongcheck()&& emailcheck();
}
</script>
</body>
</html>
扫一扫
654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
