11-js操作元素
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>
