众所周知js具有改写html的强大功能,而由于html文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM
- 始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作:
- 更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容;
- 遍历:遍历该DOM节点下的子节点,以便进行进一步操作;
- 添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点;
- 删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点。
获取选定DOM节点
最常用的方法是document.getElementById()和 document.getElementsByTagName(),以及CSS选择器document.getElementsByClassName()
第二种方法是使用querySelector() 和 querySelectorAll()
// 通过querySelector获取ID为q1的节点:
var q1 = document.querySelector('#q1');
// 通过querySelectorAll获取q1节点内的符合条件的所有节点:
var ps = q1.querySelectorAll('div.highlighted > p');
DOM节点实际上是Node,在HTML中,Node包括Element、Comment、CDATA_SECTION等很多种,以及根节点Document类型,但是,绝大多数时候我们只关心Element,也就是实际控制页面结构的Node,其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document
eg:选择出指定条件的节点:
<!-- 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>
// 选择JavaScript:
var js = document.querySelector("#test-p");//id查询返回唯一一个Node
// 选择Python,Ruby,Swift:
var arr = document.querySelectorAll(".c-red")[1].children; //class查询返回NodeList
// 选择Haskell:
var haskell = document.querySelectorAll('.c-green')[1].children[1]; //class查询返回NodeList
更新DOM
通过上文的方法获取节点之后我们可以对其进行更新。以下介绍两种方法:
修改innerHTML属性
- 此种方法不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树
- 用innerHTML时要注意,是否需要写入HTML。如果写入的字符串是通过网络拿到了,要注意对字符编码来避免XSS攻击
// 获取<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>的内部结构已修改
修改innerText或textContent属性
- 此种方法可以自动对字符串进行HTML编码,保证无法设置任何HTML标签,比较保险
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码,无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p>
二者区别在于读取属性时,innerText不返回隐藏元素的文本,而textContent返回所有文本。
- DOM节点的style属性对应所有的CSS,可以直接获取或设置。因为CSS允许font-size这样的名称,但它并非JavaScript有效的属性名,所以需要在JavaScript中改写为驼峰式命名fontSize
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';
插入DOM
插入前老规矩,先获取节点。但是需判断此节点是否为空
- 节点为空时:
- 直接使用innerHTML = ‘child‘添加即可
- 节点非空时
- 现在就不能用刚才的方法了。强行使用会将原有节点覆盖掉。此时还有两种方法添加新节点:appendChild
- 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>
<!--把<p id="js">JavaScript</p>添加到<div id="list">的最后一项:-->
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>
- 动态添加新节点
- 从零创建一个新的节点,然后插入到指定位置
var
list = document.getElementById('list'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="haskell">Haskell</p>
</div>
- 动态创建节点并且添加到DOM树中
- eg:下面的代码动态创建了一个
var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);
insertBefore
- 使用parentElement.insertBefore(newElement, referenceElement);将节点插入指定位置,也就是referenceElement之前
eg:把Haskell插入到Python之前
<!-- 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); //ref为要插入的参考节点(插入到参考节点前)
<!-- 新的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>
使用insertBefore重点是要拿到一个“参考子节点”的引用。很多时候,需要循环一个父节点的所有子节点,可以通过++迭代children属性++实现
var
i, c,
list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
c = list.children[i]; // 拿到第i个子节点
}
eg:按字符串顺序重新排序DOM节点
<!-- HTML结构 -->
<ol id="test-list">
<li class="lang">Scheme</li>
<li class="lang">JavaScript</li>
<li class="lang">Python</li>
<li class="lang">Ruby</li>
<li class="lang">Haskell</li>
</ol>
// sort list:
var list = document.getElementById('test-list');
var lis = list.getElementsByClassName('lang');
for(var i = 0 ; i < lis.length ; i++){
for(var j = 1 ; j < lis.length-i ; j++){
var li1 = lis[j - 1];
var li2 = lis[j];
if(li1.innerText > li2.innerText){
list.insertBefore(li2,li1);
}
}
}
删除DOM
删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置
- 要删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的removeChild把自己删掉
// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true
当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新.即删除掉某节点后,通过parent.children[index]再也无法找到。
- eg:把与Web开发技术不相关的节点删掉
<!-- 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>
// TODO
var web = ["JavaScript", "HTML", "CSS"];
var ul = document.getElementById("test-list");
for (var li of ul.children) {
if(web.indexOf(li.innerText) === -1) {
ul.removeChild(li);
}
}