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>
