js-Dom节点的获取-以及相关操作
来源：互联网 发布：java磁条读卡器 编辑：程序博客网 时间：2024/05/21 17:37
<!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"; but.innerHTML="✘"; } }</script></body></html>
0 0
