[toc] ### 1. 如何獲取節點 `getElementById()` `getElementByClassName()` `getElementByTagName()`：獲取的是類數組對象 `querySelectorAll()`：選擇器獲取 ``` 獲取文檔中第一個 <p> 元素： document.querySelector("p"); ``` ``` 獲取文檔中 class="example" 的第一個元素: document.querySelector(".example"); ``` ``` querySelectorAll`選擇匹配到的所有元素 var lis = document.querySelectorAll(".one") ``` ### 2. 獲取子節點 children-->只獲取元素的子節點 childNodes-->所有類型的子節點 ie9以下 將childNodes識別為元素節點 ``` var childEle = document.getElementById("parent").children; var childs = document.getElementById("parent").childNodes; ``` > #### 2.1 demo：ul內點擊子li標簽變色 ``` <ul id="parent"> <li>1</li> <li>2</li> <li>3</li> </ul> var childs = document.getElementById("parent").childNodes; for(var i=0; i<childs.length; i++){ if(childs[i].nodeType==1){ childs[i].style.color = "red"; } } ``` #### 2.2 獲取第一個(最后一個)子節點 `firstChild `-- 獲取第一個子節點 `firstElementChild` -- 獲取第一個子元素 `lastChild` -- 獲取最后一個子節點 `lastElementChild` -- 獲取最后一個元素子節點 ``` var parent = document.getElementById("parent"); var first = parent.firstElementChild; if(first){ first.style.color = "red"; }else { parent.firstChild.style.color = "green"; //在ie9以下 } ``` ### 3. 獲取父節點 `child.parentNode` `child.parentElement`：父元素節點 ### 4. 獲取兄弟節點 `nextSibling` `nextElementSibling`：下一個兄弟元素節點 `prevSibling` `prevElementSibling`：上一個兄弟元素節點 ### 5. 如何添加一個節點 1. 創造一個元素節點：`document.createElement()` 1. 在節點之后添加 `test.append(p, h1)`：在父元素最后一位添加, 可添加多個 `test.after(p)` `test.appendChild(p)` 2. 在節點之前添加 `test.prepend(p)` 在父元素第一位添加子元素 `test.before(p)` `test.insertBefore(newElement, targetElement)` >#### 1 添加img節點 ``` var parent = document.getElementById("parent"); var img = document.createElement("img"); img.src = "images/現代.png"; img.id = "img"; img.className = "img"; //class屬性特殊，通過className設置 parent.appendChild(img); console.log(img); ``` >#### 2 添加文本節點 ``` <div id="parent"> <p id="one">hello world</p> </div> ``` ``` var parent = document.getElementById("parent"); //找到父元素 var one = document.getElementById("one"); //找到one var p = document.createElement("p"); //創建p標簽 var txt = document.createTextNode("first"); //創建內容 p.appendChild(txt); //將內容添加到p parent.insertBefore(p, one); //將p添加到one之前 ``` ### 6. 更改節點 #### 1. 移除節點 `node.removeChild()`：移除節點 ``` var parent = document.getElementById("parent"); var one = document.getElementById("one"); parent.removeChild(one); ``` #### 2. 替換節點 `node.replaceChild (newnode,oldnew ) ` ``` var parent = document.getElementById("parent"); var one = document.getElementById("one"); var h1 = document.createElement("h1"); h1.innerHTML = "h1"; parent.replaceChild(h1, one); ``` #### 3. 克隆節點 `node.cloneNode(true)` `var cTest = test.cloneNode(true)` ### 7. 節點的分類(nodeType) 元素節點: 1 屬性節點: 2 文本節點: 3 document: 9 ``` <p id="test">hello world</p> var test = document.getElementById("test").firstChild; console.log(test.nodeType); //3 因為firstChild為"hello world" ```