在操作一个DOM节点前,我们需要通过各种方式先拿到这个DOM节点。
<!-- HTML结构 --> <div id="test-div"> <div class="c-red"> <p id="test-p">JavaScript</p> <p>Java</p> </div> <div class="c-red c-green"> <p>Python</p> <p>Ruby</p> <p>Swift</p> </div> <div class="c-green"> <p>Scheme</p> <p>Haskell</p> </div> </div>
'use strict'; // 选择<p>JavaScript</p>: var js = document.getElementById("test-p"); // 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>: var arr = document.getElementsByClassName("c-red c-green")[0].children; // 选择<p>Haskell</p>: var haskell = document.getElementsByClassName("c-green")[1].children[1];
// 测试: if (!js || js.innerText !== 'JavaScript') { alert('选择JavaScript失败!'); } else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') { console.log('选择Python,Ruby,Swift失败!'); } else if (!haskell || haskell.innerText !== 'Haskell') { console.log('选择Haskell失败!'); } else { console.log('测试通过!'); }
更新DOM
// 获取<p id="p-id">...</p> var p = document.getElementById('p-id'); // 设置文本为abc: p.innerHTML = 'ABC'; // <p id="p-id">ABC</p> // 设置HTML: p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ'; // <p>...</p>的内部结构已修改
练习:
<!-- HTML结构 --> <div id="test-div"> <p id="test-js">javascript</p> <p>Java</p> </div>
'use strict'; // 获取<p>javascript</p>节点: var js = document.getElementById("test-js"); // 修改文本为JavaScript: // TODO: js.innerHTML = 'JavaScript'; // 修改CSS为: color: #ff0000, font-weight: bold // TODO: js.style.color = '#ff0000'; js.style.fontWeight= 'bold';
// 测试: if (js && js.parentNode && js.parentNode.id === 'test-div' && js.id === 'test-js') { if (js.innerText === 'JavaScript') { if (js.style && js.style.fontWeight === 'bold' && (js.style.color === 'red' || js.style.color === '#ff0000' || js.style.color === '#f00' || js.style.color === 'rgb(255, 0, 0)')) { console.log('测试通过!'); } else { console.log('CSS样式测试失败!'); } } else { console.log('文本测试失败!'); } } else { console.log('节点测试失败!'); }
插入DOM
使用appendChild
,把一个子节点添加到父节点的最后一个子节点。
<!-- HTML结构 --> <p id="js">JavaScript</p> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> </div>
var js = document.getElementById('js'), list = document.getElementById('list'); list.appendChild(js);
现在,HTML结构变成了这样:
<!-- HTML结构 --> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> <p id="js">JavaScript</p> </div>
把子节点插入到指定的位置:
<!-- HTML结构 --> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> </div>
var list = document.getElementById('list'), ref = document.getElementById('python'), haskell = document.createElement('p'); haskell.id = 'haskell'; haskell.innerText = 'Haskell'; list.insertBefore(haskell, ref);
新的HTML结构如下:
<!-- HTML结构 --> <div id="list"> <p id="java">Java</p> <p id="haskell">Haskell</p> <p id="python">Python</p> <p id="scheme">Scheme</p> </div>
删除DOM
删除多个节点时,要注意children
属性时刻都在变化。
<!-- HTML结构 --> <ul id="test-list"> <li>JavaScript</li> <li>Swift</li> <li>HTML</li> <li>ANSI C</li> <li>CSS</li> <li>DirectX</li> </ul>
把与Web开发技术不相关的节点删掉:
'use strict'; var parent = document.getElementById('test-list'); parent.removeChild(parent.children[1]); parent.removeChild(parent.children[2]); parent.removeChild(parent.children[3]);
// 测试: ;(function () { var arr, i, t = document.getElementById('test-list'); if (t && t.children && t.children.length === 3) { arr = []; for (i = 0; i < t.children.length; i ++) { arr.push(t.children[i].innerText); } if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) { console.log('测试通过!'); } else { console.log('测试失败: ' + arr.toString()); } } else { console.log('测试失败!'); } })();