js Dom节点的获取 以及相关操作
2016-09-01 01:03
671 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box_id { width: 400px; height: 200px; background-color: pink; cursor: pointer; position: relative; } #box_id_c{ width: 200px; height: 150px; background-color: greenyellow; margin-left: 20px; border: 1px; } button{ position: absolute; top: 10px; right: 10px; font-weight: 700; font:700 30px/30px "微软雅黑"; } .box_c_1 { width: 100px; height: 100px; cursor: pointer; border-color: red; } .yincang{ display: none; } .xianshi{ display: block; } </style> </head> <body> <div id="box_id" title="aa" class="box_class"> <div id="box_id_c" class="box_class_c">深度复制</div> <button id="but">✘</button> </div> <div id="box_id_1" class="box_class_1"></div> <input name="myInput" type="text" size="20" /> <input name="myInput" type="text" size="21" /> <div id="box" value="111">NodeType,NodeName,NodeValue</div> <script> //Dom 节点获取 //理解:节点的关系是以属性方式存在的 节点不孤立 所以可以通过节点之间的相对关系获取 var boxId = document.getElementById("box_id"); // 查找id获取html标签(单一返回值) var bqArr = document.getElementsByTagName("div"); // 查找标签名 (返回:标签数组) 由上之下子元素也包含 var boxCArr = document.getElementsByClassName("box_class"); //查找类名 (返回:标签数组) IE 5,6,7,8 中无效 var nameArr = document.getElementsByName("myInput"); //查找name标签 (返回:标签数组) var nameArr = document.getElementsByTagNameNS("","");//只是它根据命名空间和名称来检索元素 只有使用命名空间的XML文档才会使用它 console.log(bqArr[0]); // 输出:<div id="box_id" class="box_class"> console.log("bqArr第一个元素是: "+ bqArr[0]); // 输出:bqArr第一个元素是: [object HTMLDivElement] ---》(发现会有类型转换) //节点分类 // 父节点:(调用者).parentNode !!!!! // // 兄弟节点 : // 下一个兄弟节点:=====> (调用者).nextElementSibling || (调用者).nextSibling // (调用者).nextSibling: 在IE678中指下一个元素节点(标签)。在火狐谷歌IE9+以后都指的是下一个节点(包括空文档和换行节点) // (调用者).nextElementSibling: 在火狐谷歌IE9都指的是下一个元素节点。 // 总结:在IE678中用nextSibling,在火狐谷歌IE9+以后用nextElementSibling // // 前一个兄弟节点:=====> (调用者).previousElementSibling|| (调用者).previousSibling // (调用者).previousSibling:IE678中指前一个元素标签 在火狐谷歌IE9+以后都指的是前一个节点(包括空文档和换行节点) // (调用者).previousElementSibling: 在火狐谷歌IE9都指的是前一个元素节点。 // 总结:在IE678中用previousSibling,在火狐谷歌IE9+以后用previousElementSibling。 // // // 单个子节点: // 第一个子节点:=====> 父节点.firstElementChild || 父节点.firstChild // (调用者).firstChild:调用者是父节点 IE678中指第一个子元素标签在火狐谷歌IE9+以后都指的是第一个节点(包括空文档和换行节点) // (调用者).firstElementChild: 在火狐谷歌IE9都指的第一个元素节点。 // 最后一个子节点:=====> 父节点.lastElementChild|| 父节点.lastChild // (调用者).lastChild: IE678中指最后一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是最后一个节点(包括空文档和换行节点) // (调用者).lastElementChild: 在火狐谷歌IE9都指的最后一个元素节点。 // // 所有子节点 !!!!! // 父节点.childNodes:=====> 标准属性 获取所有节点包括HTML节点,所有属性,文本节点 火狐 谷歌等高本版会把换行也看做是子节点 // 父节点.children:=====> 非标准属性 但是几乎所有浏览器都支持 但不返回文本节点 。(使用较多) // // 随意节点: =====> 节点自己.parentNode.children[index]; //节点的操作 // 创建节点: // 新的标签(节点) = document.createElement("标签名"); // var createDiv = document.createElement("div"); // 插入节点: // 插入到最后: =====> 父节点.appendChild(新节点); // boxId.appendChild(createDiv); // // 插入到指定节点之前: =====> 父节点.insertBefore(新节点,参考节点)在参考节点前插入; // boxId.insertBefore(createDiv,bqArr[1]); // // 删除节点: // 知道父节点:=====> 父节点.removeChild(子节点);必须制定要删除的子节点 // box_id.removeChild(); // 不知道父节点: =====> node.parentNode.removeChild(box_id_c); // bqArr[1].parentNode.removeChild(bqArr[1]); // // 复制节点 : // oldNode.cloneNode(true) //复制后需要重新插入 才有效果 // var copyNode = bqArr[1].cloneNode(true); // boxId.appendChild(copyNode); // console.log(bqArr[0]); function getEle(id){ return document.getElementById(id); } /** * 功能:给定元素查找他的第一个元素子节点,并返回 * @param ele * @returns {Element|*|Node} */ function getFirstNode(ele){ var node = ele.firstElementChild || ele.firstChild; return node; } /** * 功能:给定元素查找他的最后一个元素子节点,并返回 * @param ele * @returns {Element|*|Node} */ function getLastNode(ele){ return ele.lastElementChild || ele.lastChild; } /** * 功能:给定元素查找他的下一个元素兄弟节点,并返回 * @param ele * @returns {Element|*|Node} */ function getNextNode(ele){ return ele.nextElementSibling || ele.nextSibling; } /** * 功能:给定元素查找他的上一个兄弟元素节点,并返回 * @param ele * @returns {Element|*|Node} */ function getPrevNode(ele){ return ele.previousElementSibling || ele.previousSibling; } /** * 功能:给定元素和索引值查找指定索引值的兄弟元素节点,并返回 * @param ele 元素节点 * @param index 索引值 * @returns {*|HTMLElement} */ function getEleOfIndex(ele,index){ return ele.parentNode.children[index]; } /** * 功能:给定元素查找他的所有兄弟元素,并返回数组 * @param ele * @returns {Array} */ function getAllSiblings(ele){ //定义一个新数组,装所有的兄弟元素,将来返回 var newArr = []; var arr = ele.parentNode.children; for(var i=0;i<arr.length;i++){ //判断,如果不是传递过来的元素本身,那么添加到新数组中。 if(arr[i]!==ele){ newArr.push(arr[i]); } } return newArr; } //节点属性: =====> 调用者:节点。 有参数。 没有返回值。每一个方法意义不同 // 获取:getAttribute(名称) // 设置:setAttribute(名称, 值) // 删除:removeAttribute(名称) var ele = document.getElementById("box");//元素节点 var att = ele.getAttributeNode("id");//属性节点 var txt = ele.firstChild; //nodeType console.log(ele.nodeType);//1 console.log(att.nodeType);//2 console.log(txt.nodeType);//3 //nodeName console.log(ele.nodeName);//DIV console.log(att.nodeName);//id console.log(txt.nodeName);//#text //nodeValue console.log(ele.nodeValue);//null console.log(att.nodeValue);//box console.log(txt.nodeValue);//你好 //onclick事件 控制隐藏与消失 var but = document.getElementById("but"); but.onclick = function (){ if(but.innerHTML==="✘"){ bqArr[1].className = "yincang"; console.log(bqArr[1]); but.innerHTML="✔"; }else{ bqArr[1].className = "xianshi"; 4000 but.innerHTML="✘"; } } </script> </body> </html>
相关文章推荐
- 完全抽离WebAPi之特殊需求返回HTML、Css、JS、Image
- JavaScript强化教程——JavaScript 运算符
- js的作用域之静态作用域
- extjs2.0
- Javascript 严格模式详解
- 使用el表达式填充下拉框
- JavaScript高级编程学习笔记:第2章
- js把图片转为base64进行传输
- JS-----------实现计算小计和合计的金额
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat、hprof使用详解
- javascript --- 临时构造器F()
- js-点击表格自动排序
- 动态加载js
- javaScript小项目------贪食蛇
- JavaScript基础
- js中的SetTimeOut
- JS 中常用的Math 对象
- Js菜鸟学习
- javascript --- 只继承于原型
- 用js实现的刷新页面