JavaScript(九)DOM
来源:互联网 发布:windows聚焦图片在哪 编辑:程序博客网 时间:2024/05/16 16:16
由于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
属性是一个只读属性,并且它在子节点变化时会实时更新。
- JavaScript(九)DOM
- javascript 图片库(javascript Dom)
- (十)javascript DOM
- JavaScript-DOM(上篇)
- JavaScript-DOM(下篇)
- JavaScript(4)- DOM
- JavaScript学习(九)
- Javascript对象(九)
- javascript(九)JSON
- JavaScript DOM(二)--DOM操作
- JavaScript DOM(三)-DOM事件
- [XML]学习笔记(九)DOM
- javascript实现DOM(基础)
- JavaScript 解析html(DOM)
- JavaScript-DOM操作(一)
- javaScript-DOM操作(二)
- javaScript-DOM操作(三)
- javaScript-DOM操作(四)
- Git-3、仓库内的文件操作
- jedis高级使用
- WPF转换器添加
- vue之mock.js模拟接口
- 输入流的数字求和(空格隔开)
- JavaScript(九)DOM
- android实现饼状图
- Caffe源码理解(2)——超级完整版教程:如何自定义一个新的层结构并重新编译Caffe
- Error C2061:语法错误
- Activity反复进入退出OOM
- 从redis获取图片展示到jsp
- 设计模式之单例模式
- 生成多个不重复的随机数字php
- JS对象:offset、scroll、event、client