[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" ```