節點 · Javascript

[TOC] ## 1.如何獲取節點 ~~~ getElementById() 返回對擁有指定 id 的第一個對象的引用 getElementsByTagName()返回帶有指定標簽名的對象集合。 getElementsByClassName()返回文檔中所有指定類名的元素集合，作為 NodeList 對象。 querySelectorAll()HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的所有元素節點列表 ~~~ ### 具體實例（選擇框）1 ~~~ <div> <button id="all">選中所有的</button> <button id="no">不選</button> <button id="reverse">反選</button> <h3>選擇愛好</h3> <input type="checkbox">足球 <input type="checkbox">籃球 <input type="checkbox">棒球 <input type="checkbox">橄欖球 </div> <script> var all = document.getElementById("all"); var no = document.getElementById("no"); var reverse = document.getElementById("reverse"); var checkbox =document.getElementsByTagName("input"); all.onclick = function(){ for (var i =0;i<checkbox.length;i++){ checkbox[i].checked=true; } } no.onclick = function(){ for(var i=0;i<checkbox.length;i++){ checkbox[i].checked=false; } } reverse.onclick = function(){ for(var i=0;i<checkbox.length;i++){ checkbox[i].checked=!checkbox[i].checked; } } </script> ~~~ ![](https://box.kancloud.cn/4743a9952fdb4693b56b613956aebf3a_250x256.gif) ### 具體實例（點擊切換）2 ~~~ <img src="images/placeholder.png" alt="" id="show"> <button id="modern">現代</button> <button id="old">古代</button> <script> var img = document.getElementById("show"); var modern = document.getElementById("modern"); var old = document.getElementById("old"); modern.onclick=function(){ img.src="images/現代.png"; } old.onclick=function(){ img.src="images/古典.png"; } </script> ~~~ ![](https://box.kancloud.cn/4135c1d9c86b13ad16321073189b39ba_465x256.gif) ### 具體實例（JS版下拉菜單）3 ~~~ <style> ul { list-style: none; float: right; margin-right: 100px; } ul>li { float: left; margin-left: 15px; } a { color: black; display: block; } a:hover { color: blue; } .none { display: none; } .show { display: block; } #parent { position: absolute; right: 90px; } .box::after { position: relative; content: ""; border: 7px solid transparent; border-top-color: black; right: -4px; top: 16px; } </style> ~~~ ~~~ <body> <ul> <li> <a href="#">新聞</a> </li> <li> <a href="#">hao123</a> </li> <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> <li id="toggle"> <a href="#" class="box">設置</a> <div class="none" id="parent"> <a href="#">搜索設置</a> <a href="#">高級搜索</a> <a href="#">關閉預測</a> <a href="#">隱私設置</a> </div> </li> </ul> <script> var toggle = document.getElementById("toggle"); var parent = document.getElementById("parent"); toggle.onclick = () => { if (parent.className == "none") { parent.className = "show" } else { parent.className = "none" } } </script> </body> ~~~ ![](https://box.kancloud.cn/1a96c9498281f8a1f5930ffdc4ef15b0_465x256.gif) ## 2.修改元素節點的內容,樣式 * 修改元素節點的內容 innerHTML ~~~ <div id="test"> hello world </div> <script> var test = document.getElementById("test"); test.onclick = function(){ this.innerHTML="<p>change</p>"; } </script> ~~~ ![](https://box.kancloud.cn/9e38177a660fa92a000ba26a5909e3c5_164x256.gif) * 修改樣式 ~~~ object.style.color="pink"; object.style["color"]="pink"; ~~~ ### 具體實例（隔行變色） ~~~ <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> ~~~ **css版本** ~~~ //偶數項 ul>li:nth-child(odd){ color:red; } //奇數項 ul>li:nth-child(even){ color:green; } ~~~ **JS版本** ~~~ <script> var lis = document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ if(i%2==0){ lis[i].style.backgroundColor = "#ff2d51"; }else{ lis[i].style.backgroundColor = "#44cef6" } } </script> ~~~ ## 3. textContent,nodeValue(了解) * node.textContent textContent屬性返回當前節點和它的所有后代節點的文本內容。 * Node.nodeValue 只有文本節點（text）和注釋節點（comment）,有文本值，因此這兩類節點的nodeValue可以返回結果，其他類型的節點一律返回null ## 4.節點的分類nodeType ~~~ a.nodeType==1 為元素節點 b.nodeType==2 為屬性節點 c.nodeType==3 位文本節點 d.nodeType==9 document ~~~ ~~~ <body id="body"> <p id="test"> hello world</p> <script> var attr = document.body.getAttributeNode("id"); var test = document.getElementById("test").firstChild; console.log(document.nodeType);//9 console.log(document.body.nodeType);//1 console.log(attr.nodeType);//2 console.log(test.nodeType);//3 </script> </body> ~~~ ### 4.1增加獲取節點 ### appendChild(node) ~~~ createElement(); //創建元素節點 createTextNode(); //創建文本節點 var p = document.createElement("p"); var txt = document.createTextNode("hello world"); //創建屬性節點 var attr = document.createAttribute("class"); attr.value = "democlass"; p.setAttributeNode(attr) p.appendChild(txt); document.body.appendChild(p) ~~~ ### parentNode.insertBefore(newNode,targetElementNode) ~~~ <ul id="parent"> <li>hello world</li> </ul> <script> var parent = document.getElementById("parent"); for(let i=0;i<3;i++){ let li = document.createElement("li"); li.innerHTML = "java"+i; parent.insertBefore(li,parent.firstElementChild) } </script> ~~~ ### 4.2刪除節點 `parentNode.removeChild(childNode)` ### 4.3修改節點(替換節點) > parentNode.replaceChild(newNode,oldNode); ~~~ <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script> ~~~ ### 4.4克隆節點 > 語法:node.cloneNode(true) ~~~ <p id="test">hello world</p> <script> var test = document.getElementById("test"); var cTest = test.cloneNode(true); console.log(cTest); document.body.appendChild(cTest); </script> ~~~