节点改变元素内容（通过父子节点找到元素然后操作） · javascript

[TOC] ### 1. nodeType查看节点类型 1-->元素节点 2-->属性节点 3-->文本节点 9-->document ### 2. childNodes-->所有类型的子节点 ie9以下将childNodes识别为元素节点 children-->只获取元素子节点 ~~~ <ul id="parent"> <li>1</li> <li>2</li> <li>3</li> </ul> <script> // shift+alt+b var childs = document.getElementById("parent").childNodes; var childEle = document.getElementById("parent").children; for(var i=0;i<childs.length;i++){ if(childs[i].nodeType==1){ childs[i].style.color="red"; } } </script> ~~~ ### 3. 获取父元素节点在指定位置添加元素 ~~~ / / parentnode // parentElement 都是获取父元素添加元素 <input type="text" id="text"> <button id="add">添加</button> <ul id="parent"> </ul> <script> var text =document.getElementById("text"); var add =document.getElementById("add"); var parent =document.getElementById("parent"); add.onclick=function(){ var value = text.value; var li =document.createElement("li"); li.innerHTML=value; parent.appendChild(li); } // parentnode // parentElement 都是获取父元素 </script> ~~~ ### 4.删除元素（找到父元素删除父节点） ~~~ <ul> <li>元素<a href="#">删除</a></li> <li>元素<a href="#">删除</a></li> <li>元素<a href="#">删除</a></li> <li>元素<a href="#">删除</a></li> <li>元素<a href="#">删除</a></li> </ul> <script> var a=document.querySelectorAll("ul li a"); console.log(a) for(let i=0;i<a.length;i++){ a[i].onclick=function(){ this.parentNode.style.display="none"; event.preventDefault(); // 阻止事件的默认属性（有两种方法阻止） // return false; } } </script> <script> /* insertBefore insertAfter removeChild appendChild remove append prepend */ var test = document.getElementById("test"); test.onclick = function(){ this.remove(); } </script> ~~~ ### 5. 将类数组转换成数组数组遍历的方法 ~~~ <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> <script> var a=document.querySelectorAll("ul li"); // Array.prototype.slice.call(obj) 将类数组转换成数组 var arr=Array.prototype.slice.call(a); // forEach方法实现数组遍历 arr.forEach(function(value,index){ value.onclick=function(){ arr.forEach((value,index)=>{ value.style.color="#333" }) this.style.color="red" } }) </script> ~~~ ### childNodes children ~~~ childNodes 获取子类中所有类型的节点空格也算 children 只输出节点 ~~~ ### 增加 ~~~ <style> img{ width:200px; } </style> </head> <body> <div id="parent">  <p>hello world</p> </div> <script> // parentNode.appendChild(newElement); /* document.createElement()-->创造一个元素节点 */ var parent = document.getElementById("parent"); var img = document.createElement("img"); img.src="images/现代.png"; img.id="img"; // class属性特殊,通过className设置 img.className="img"; parent.appendChild(img); console.log(img); </script> ~~~ ### 插入 ~~~ <div id="parent">  <p id="one">hello world</p> </div> <script> // parentNode.insertBefore(newElement,targetElement); var parent = document.getElementById("parent"); var one = document.getElementById("one"); var p = document.createElement("p"); var txt = document.createTextNode("first"); p.appendChild(txt); console.log(p); parent.insertBefore(p,one); </script> ~~~ ### 删除 ~~~ <div id="parent"> <div id="child">child</div> </div> <script> // parentNode.removeChild(element) var parent = document.getElementById("parent"); var child = document.getElementById("child"); child.onclick = function(){ parent.removeChild(child); } </script> ~~~ ### 替换 ~~~ <p id="child">hello world</p> <script> /* parentNode.replaceChild(newElement,oldElement) */ var child = document.getElementById("child"); var h1 = document.createElement("h1"); h1.innerHTML="h1"; document.body.replaceChild(h1,child); </script> ~~~ ### 复制 ~~~ <div id="parnet"> <div id="one">one</div> </div> <script> // Element.cloneNode(true); var parent = document.getElementById("parent"); var one = document.getElementById("one"); var clone = one.cloneNode(true); console.log(clone); </script> ~~~