目录
5 操作元素
1 获得元素对象的方式(DOM)
1.1 直接获得的方式：
//获得id名称是div1的对象
var div= document.getElementById("div1");
//获得所有的input标签对象 HTMLCollection
var inp = document.getElementsByTagName("input")[0];
//NodeList 获得name属性等于inp的所有的节点对象
var inp= document.getElementsByName("inp");
//通过class 的名称可以获得对象
document.getElementsByClassName("inp1");
1.2 间接获得对象的方式：
//获得div下的所有的子节点
空白的文本也是一个节点
var child= div.childNodes;
//获得当前节点的父级节点---直系父节点
var parent= inp.parentNode;
//获得当前节点的上一个节点
var pre= inp.previousSibling.previousSibling;
//获得上一个节点对象不包含空白文本var pre1=span.previousElementSibling;
//获得当前节点的下一个节点
var next=inp.nextSibling.nextSibling;
//获得下一个元素节点 不包括空白文本
var next2=span.nextElementSibling;
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/************直接获得节点对象的方式***************/
function demo1(){
//id方式直接获得--单个对象
var username=window.document.getElementById("username");
alert(username);
}
function demo2(){
//通过标签名称获得元素对象 获得的是多个对象
var inp=document.getElementsByTagName("input");
alert(inp[2]);
}
function demo3(){
//通过name属性获得
var inp=document.getElementsByName("hobby");
alert(inp.length);
}
/*********间接获得元素对象的方式***************/
function demo4(){
//获得父节点
var professional=document.getElementById("professional");
//获得子元素 注意：空白的文档也是一个子节点
var child= professional.childNodes;
console.log(child);
}
function demo5(){
var p2=document.getElementById("p2");
//获得父节点
var parent= p2.parentNode;
console.log(parent);
}
function demo6(){
var p2=document.getElementById("p2");
//获得下一个节点包含空白的文档
// var next=p2.nextSibling.nextSibling;
//获得下一个节点不包含空白的文档
// var next=p2.nextElementSibling;
//获得上一个节点对象包含空白文档
// var up=p2.previousSibling.previousSibling;
//获得上一个节点对象不包含空白文档
var up=p2.previousElementSibling;
console.log(up);
}
</script>
</head>
<body onload="demo6()">
<form action="" id="form1">
用户名：<input type="text" name="username" id="username" value="请输入姓名" ><br />
密码： <input type="password" name="pwd" id="pwd" /><br />
爱好： <input type="checkbox" name="hobby" value="music" />音乐
<input type="checkbox" name="hobby" value="sports" />体育
<input type="checkbox" name="hobby" value="art"/>美术<br />
职业： <select name="professional" id="professional">
<option value="1">工人</option>
<option value="2" id="p2">农民</option>
<option value="3">解放军</option>
<option value="4">知识分子</option>
</select><br />
<input type="button" value="提交"/>
</form>
</body>
</html>
效果:
2 操作元素属性
//获得id名称是inp1对象节点
var inp1=document.getElementById("inp1");
2.1 方式一：
获得元素的属性
var ty=inp1.type;
var va=inp1.value;
var na=inp1.name;
//操作元素的属性
inp1.type="button";
inp1.value="测试改变";
2.2 方式二：
获得元素的属性
var ty1=inp1.getAttribute("type");
//获得属性的默认值
var va2=inp1.getAttribute("value");
2.3 方式三：
操作元素的属性
inp1.setAttribute("type","button");
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function demo1(){
//获得id名称是inp1对象节点
var inp1=document.getElementById("inp1");
//获得节点对象的属性
var ty=inp1.type;
var va=inp1.value;
var na=inp1.name;
//alert(ty+"----"+va+"---"+na);
//操作元素的属性
/*
inp1.type="button";
inp1.value="测试改变";*/
//方式二： 获得元素的属性
var ty1=inp1.getAttribute("type");
//获得市属性的默认值
var va2=inp1.getAttribute("value");
// alert(va2s);
//方式二： 操作元素的属性
inp1.setAttribute("type","button");
}
</script>
</head>
<body>
<input type="text" id="inp1" value="张三" name="uname" />
<hr />
<input type="button" name="" id="" value="测试元素属性" onclick="demo1()" />
</body>
</html>
效果：
3 操作元素样式
获得id名称是div1的对象
var div =document.getElementById("div1");
获得css样式 只是支持行内样式的css
var wi=div.style.width;
var hi=div.style.height;
操作元素的css样式
对于 background-color格式的样
式在js中需要使用驼峰规则进行改变
div.style.width="300px";
div.style.height="300px";
div.style.backgroundColor="red";
通过操作类操作元素样式
通过增加class类来增加对应的css样式
注意：className
div.className="div2";
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function demo1(){
//获得id名称是div1的对象
var div =document.getElementById("div1");
//获得css样式 只是支持行内样式的css
var wi=div.style.width;
var hi=div.style.height;
// alert(wi+"----"+hi);
//操作元素的css样式 对于 background-color格式的样式在js中需要使用驼峰规则进行改变
div.style.width="300px";
div.style.height="300px";
div.style.backgroundColor="red";
//通过增加class类来增加对应的css样式 注意：className
div.className="div2";
}
</script>
<style>
.div2{
border: 3px solid green;
}
</style>
</head>
<body >
<div id="div1" style="width: 200px; height: 200px; background-color: palegreen;"></div>
<hr />
<input type="button" name="" id="" value="css样式的操作" onclick="demo1()" />
</body>
</html>
效果：
4 操作元素文本和值
//获得div1的对象
var div=document.getElementById("div1");
//获得元素的文本内容
//会获得里面的HTML中的内容
var inn=div.innerHTML;
//只会获得文本的信息
var inn2=div.innerText;
//会识别HTML信息
div.innerHTML="<h1>我们没有什么不一样</h1>"
//不会识别HTML的信息
div.innerText+="<h1>我们没有什么不一样</h1>"
注意：
* 双标签有innerHTML和innerText,
*
* 单标签获得的时候都是用value获得
* 特殊的标签：
*
*
select、textarea*
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width: 200px;
height: 200px;
border: 2px solid red;
}
</style>
<script>
function demo1(){
//获得div1的对象
var div=document.getElementById("div1");
//获得元素的文本内容
//会获得里面的HTML中的内容
var inn=div.innerHTML;
//只会获得文本的信息
var inn2=div.innerText;
// console.log(inn);
// console.log(inn2);
//会识别HTML信息
//div.innerHTML="<h1>我们没有什么不一样</h1>"
//不会识别HTML的信息
div.innerText+="<h1>我们没有什么不一样</h1>"
/*
* 注意：
*
* 双标签有innerHTML和innerText,
*
* 单标签获得的时候都是用value获得
*
*
* 特殊的标签：
*
* select、textarea
*
*
* */
}
function demo2(){
//获得select对象
var sel=document.getElementById("sele");
alert(sel.value);
}
function demo3(){
var te= document.getElementById("tex");
alert(te.value);
}
</script>
</head>
<body >
<div id="div1">
<span>我们不一样</span>
</div>
<input type="text" name="inp2" id="inp2" value="" /> <br />
<!--特殊的操作-->
<select id="sele" onchange="demo2()">
<option value="0">--请选择--</option>
<option value="1">中国</option>
<option value="2">美国</option>
</select> <br />
<textarea rows="20" cols="20" id="tex">1223455</textarea>
<input type="button" value="操作元素的文本内容" onclick="demo3()" />
</body>
</html>
效果：
5 操作元素
创建节点的方法
document.createElement(“div")：
加入节点的方法
parentNode.appendChild(childElement)：末尾追加
方式插入节点
parentNode.insertBefore(newNode,beforeNode)：在
指定节点前插入新节点
删除节点的方法
parentNode.removeChild(childNode)
p.remove();
替换节点的方法
parentNode.replaceChild(newNode, oldNode)
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function addNode(){
//获得表单对象
var fom=document.getElementById("fom");
//创建节点的方法
var p= document.createElement("p");
p.innerText="照片： "
var inp=document.createElement("input");
inp.type="file";
var inp2=document.createElement("input");
inp2.type="button";
inp2.value="删除";
inp2.onclick=function(){
//移除子节点；
p.removeChild(inp);
p.removeChild(inp2);
//移除本身
p.remove();
}
//添加节点对象
// fom.appendChild(p);
//获得最后一个节点对象
var lastNode=document.getElementById("lastNode");
//在指定元素之前添加节点
fom.insertBefore(p,lastNode);
p.appendChild(inp);
p.appendChild(inp2);
}
</script>
</head>
<body>
<form id="fom">
<p>
用户名：<input type="text" />
</p>
<p>
照片：<input type="file" />
<input type="button" value="添加" onclick="addNode()"/>
</p>
<p id="lastNode">
<input type="button" name="" id="" value="提交" />
<input type="button" name="" id="" value="清空" />
</p>
</form>
</body>
</html>
效果：
