JS_10_document对象、操作元素
js中用来操作HTML文档的对象，通过操作document对象可以对正在运行的代码进行修改。
一、获取HTML标签对象
直接获取：
1、通过id获取：window（可省）.document.getElementById("标签的id值");
2、通过name获取：document.getElementsByName("标签的name值");
3、通过标签名获取：document.getElementsByTagName("标签名")；
4、通过class获取：document.getElementsByClassName("标签的class值")
间接获取：
1、父获子：通过父标签对象获取子标签：父标签对象.childNodes;
2、子获父：通过子标签对象获取父标签：子标签对象.parentNode;
3、弟获兄：通过标签对象获取最近的上方标签：弟标签对象.previousSibling;
4、兄获弟：通过标签对象获取最近的下方标签：兄标签对象.nextSibling;
二、操作标签属性
属性分为两种：固有属性和自定义属性，自定义属性只能通过set\getAttribute方法操作。
获取：
1、元素对象.属性名
2、元素对象.getAttribute("属性名")
通过getAttribute方式获取的value值为初始值，不能获取到动态的值。
修改：
1、元素对象.属性名 = 值；
2、元素对象.setAttribute("属性名"，"值")
三、操作标签内容
操作双标签中的内容。
获取：
//获取当前对象的所有内容，包括html标签 元素对象.innerHTML； //获取单曲对象的文本内容，不包括html标签 元素对象.innerText;
修改：
//覆盖原内容，会解析html标签 元素对象.innerHTML="值"; //覆盖原内容，不会解析html标签 元素对象.innerText="值";
四、操作标签样式
1、通过style属性操作：
//添加或者修改样式，值为空则为删除此样式 元素对象.style.样式名="值";
2、通过className修改样式：
//修改元素的所属类，会在css样式中寻找对应的类进行样式更新 元素对象.className="值"；
五、操作文档结构
1、使用innerHTML进行操作
新增：
//新增节点 标签对象.innerHTML=标签对象.innerHTML+"新节点"；
删除：
//删除所有节点 标签对象.innerHTML=""; //删除指定的节点 父节点.removeChild(子节点对象);
例子：
点击上传文件则新建一个input-file标签，点击删除可删除对应的标签。存在问题：新建标签的时候会把之前创建的标签值置为默认值（空）。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习</title> <script type="text/javascript"> //新增节点 function addInp(){ //获取父节点对象 var showDiv = document.getElementById('showDiv'); //新增节点，存在问题：点击上传文件后，已经选择的文件会被清空，需要重新选择。 showDiv.innerHTML=showDiv.innerHTML+ "<div><input type='file'>\ <input type='button' value='删除' onclick='delInp(this)'></div>" } //通过父节点，删除指定节点 function delInp(btn){ //获取父级对象 var father_div = document.getElementById('showDiv'); //获取要删除的div var this_div = btn.parentNode; //删除指定的节点 father_div.removeChild(this_div); } </script> </head> <body > <input id='button1' type="button" value="上传文件" onclick="addInp()"><hr> <div id=showDiv></div> </body> </html>
2、创建标签对象来进行操作
新增：
//创建一个标签对象 var 对象名 = document.createElement("标签名"); //将创建好的对象加入指定标签 内 指定标签对象.appendChild(对象名)；
删除：
在创建的时候给按钮创建删除方法，可直接删除。
例子：点击上传文件则新建一个input-file标签，点击删除可删除对应的标签。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习</title> <script type="text/javascript"> function testADD(){ var showDiv = document.getElementById("showDiv"); //创建标签 var inp = document.createElement('input'); var btn = document.createElement('input'); var br = document.createElement('br'); //设置属性 inp.type = 'file'; btn.type = 'button'; btn.value = '删除'; //设置删除方法 btn.onclick=function(){ showDiv.removeChild(inp); showDiv.removeChild(btn); showDiv.removeChild(br) } //把标签加入到div中 showDiv.appendChild(inp); showDiv.appendChild(btn); showDiv.appendChild(br); } </script> </head> <body > <input id='button1' type="button" value="上传文件" onclick="testADD()"><hr> <div id=showDiv></div> </body> </html>
