節點改變元素內容（通過父子節點找到元素然后操作） · 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> ~~~