标签:child 不可 button 用户 color innertext 通用 onchange 代码
js操作HTML的元素属性:
<html> <head> <title>js操作HTML的元素属性</title> <meta charset="UTF-8"/> <!-- js操作HTML元素属性学习: 获取元素对象 操作元素属性 获取: 元素对象名.属性名//返回当前属性的属性值。----固有 元素对象名.getAttribute("属性名");//返回自定义属性的值-----自定义 修改 元素对象名.属性名=属性值 元素对象名.setAttribute("属性名","属性值");//修改自定义属性的值----自定义 注意: 尽量的不要去修改元素的id值和name属性值。 使用自定义方式获取固有属性内容,value的值获取的是默认值,不能够获取到实时的用户数据。 --> <!--声明js代码域--> <script type="text/javascript"> //声明函数---固有属性 //获取属性值 function testField(){ //获取元素对象 var inp=document.getElementById("uname"); //获取元素属性值 alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value); } //修改元素属性值 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> <head> <title>js操作元素内容学习</title> <meta charset="UTF-8"/> <!--声明css--> <style type="text/css"> #div01{ width: 200px; height: 200px; border: solid 1px orange; } </style> <!-- 操作元素内容学习: 获取元素对象 获取 元素对象名.innerHTML//返回当前元素对象的所有内容,包括HTML标签 元素对象名.innerHTML//返回当前元素对象的文本内容,不包括HTML标签 修改 元素对象名.innerHTML="新的值"//会将原有内容覆盖,并HTML标签会被解析 元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果 元素对象名.innerText="新的值"//会将原有内容覆盖,但HTML标签不会被解析,会作为普通文本显示。 --> <!--声明js代码域--> <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" 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> <head> <title>js操作元素的样式</title> <meta charset="UTF-8"/> <!--声明css--> <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> <!-- js操作元素样式: 获取元素对象 通过style属性 元素对象名.style.样式名="样式值"//添加或者修改 元素对象名.style.样式名=""//删除样式 注意: 以上操作,操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。 通过className 元素对象名.className="新的值"//添加类选择器样式或者修改类选择器样式 元素对象名.className=""//删除类样式。 --> <!--声明js代码域--> <script type="text/javascript"> //js操作元素样式 //js给元素操作样式---style function testOperCss(){ //获取元素对象 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="testOperCss()" /> <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> <head> <title>js操作元素的文档结构</title> <meta charset="UTF-8"/> <!-- js操作HTML文档结构: 增加节点 删除节点 第一种方式:使用innerHTML div.innerHTML=div.innerHTML+"内容"//增加节点 div.innerHTML=""//删除所有子节点 父节点.removeChild(子节点对象)//删除指定的子节点。 --> <!--声明js代码域--> <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(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()"/> <hr /> <div id="showdiv"> </div> </body> </html>
js操作元素的文档结构二:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js操作文档结构2</title> <!-- js操作文档结构2: 获取元素对象 var obj=document.createElement("标签名"); 元素对象名.appendChild(obj); --> <!--声明js代码域--> <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.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表单:
<html> <head> <title>js操作form表单</title> <meta charset="UTF-8"/> <!-- js操作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"//不可以进行任何的操作,数据不会提交。 --> <script type="text/javascript"> // function testForm(){ //获取form表对象 var fm=document.getElementById("fm"); //alert(fm); //使用form表单的name属性值来获取 var frm=document.frm; //alert(frm===fm); //获取form表单元素对象集合 //alert(fm.elements.length); //form表单的常用方法 //fm.submit();很重要 fm.reset(); //form的属性操作 fm.action="http://www.baidu.com/s"; } </script> </head> <body> <h3>js操作form表单</h3> <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>
js操作表单元素:
<html> <head> <title>操作表单元素</title> <meta charset="UTF-8"/> <!-- js操作多选框、单选框 被选中状态下在js中checked属性值为true,未选中状态为false; js操作下拉框: 被选择的option对象在js中selected属性值为true,未选中为false --> <!--声明js代码域--> <script type="text/javascript"> //多选框操作 function testCheckBox(){ //获取所有的多选元素对象数组 var favs=document.getElementsByName("fav"); //遍历数组 for(var i=0;i<favs.length;i++){ if(favs[i].checked){ alert(favs[i].value+":"+favs[i].checked); } } } //全选 function testCheckBox2(){ var favs=document.getElementsByName("fav"); for(var i=0;i<favs.length;i++){ favs[i].checked=true; } } //反选 function testCheckBox3(){ var favs=document.getElementsByName("fav"); for(var i=0;i<favs.length;i++){ favs[i].checked=!favs[i].checked; } } //操作下拉框 function testSel(){ //获取下拉框对象 var sel=document.getElementById("address"); //alert(sel.value); //获取option对象集合 var os=sel.options; for(var i=0;i<os.length;i++){ if(os[i].selected){ alert(os[i].value+":"+os[i].text); } } } </script> </head> <body> <h3>操作表单元素</h3> <hr /> <b>操作多选框</b><br /><br /> <input type="checkbox" name="fav" id="fav" value="1" />远走高飞<br /> <input type="checkbox" name="fav" id="fav" value="2" />当<br /> <input type="checkbox" name="fav" id="fav" value="3" />李白<br /> <input type="checkbox" name="fav" id="fav" value="4" />杜甫<br /> <input type="checkbox" name="fav" id="fav" value="5" />see you again<br /> <input type="checkbox" name="fav" id="fav" value="6" />fade<br /><br /><br /> <input type="button" name="" id="" value="播放" onclick="testCheckBox()"/> <input type="button" name="" id="" value="全选" onclick="testCheckBox2()"/> <input type="button" name="" id="" value="反选" onclick="testCheckBox3()"/> <hr /> <select name="" id="address" onchange="testSel()"> <option value="0">--请选择--</option> <option value="1" >北京</option> <option value="2">上海</option> <option value="3">广州</option> </select> </body> </html>
标签:child 不可 button 用户 color innertext 通用 onchange 代码
原文地址:https://www.cnblogs.com/wcyMiracle/p/12411368.html