由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作:
-
更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容;
-
遍历:遍历该DOM节点下的子节点,以便进行进一步操作;
-
添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点;
-
删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点。
在操作节点前可以通过这三种方法获得DOM节点:
- document.getElementById();通过元素ID获得
- document.getElementTagName();通过元素标签获得;
// 先定位ID为'test-table'的节点,再返回其内部所有tr节点: var trs = document.getElementById('test-table').getElementsByTagName('tr');
- CSS选择器document.getElementClassName(),通过类名获得;
// 先定位ID为'test-div'的节点,再返回其内部所有class包含red的节点: var reds = document.getElementById('test-div').getElementsByClassName('red');
一 更新DOM
(1)一种是修改
innerHTML
属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
(2)第二种是修改innerText或textContent属性,这样可以自动对字符串进行HTML编码,保证无法设置HTML标签
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码,无法设置一个<script>节点:
两者的区别在于读取属性时,
innerText
不返回隐藏元素的文本,而
textContent
返回所有文本。
二 插入DOM
(1)已有节点插入,一个是使用
appendChild
,把一个子节点添加到父节点的最后一个子节点
var js = document.getElementById('p');
var list = document.getElementById('list');
list.appendChild(js);
(2)从零创建一个节点,然后插入到指定位置。
var list = document.getElementById('list');
var php = document.createElement('p');
php.setAttribute("id","php");
php.innerHTML("php");
list.appendChild("php");
(3)insertBefore(插入到指定位置)
parentElement.insertBefore(newElement, referenceElement);
,子节点会插入到referenceElement
之前
例:
<!-- 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>
按字符串顺序重新排序DOM节点:
思路:
- 先遍历整个结构,之后在比较,比较之后在插入
- 取出每个
li
节点的文本信息,存入Array
队列中,然后针对文本进行排序,创建的节点,将文本赋值,替代父节点innerHTML信息; - 前面同2一样,后面不用创建新的节点,直接给父节点的
children
赋值; - 采用排序算法,直接取出最小或者最大的节点,插入到父节点中;
- 采用冒泡排序算法,使用
insertBefore
方法冒泡
处理;
var tmp = [],
ol = document.getElementById('test-list');
for(var i of ol.children){
tmp.push(i);
}
tmp.sort((x,y) =>{return x.innerText>y.innerText;});
for(var j of tmp){
ol.appendChild(j)};
三 删除DOM
要删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的
removeChild
把自己删掉。
当你遍历一个父节点的子节点并进行删除操作时,要注意,
children
属性是一个只读属性,并且它在子节点变化时会实时更新。