西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > 开发教程 > JavaScript教程 >

使用原生的JavaScript操作DOM节点

时间:2016-05-09 21:26来源:未知 作者:好模板 点击:
DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API,DOM节点树是在文档中出现的空格、回车、标签、注释、文本、doctype、标签等都属于DOM节点。 操作DOM节点的方式无非就是

DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API,DOM节点树是在文档中出现的空格、回车、标签、注释、文本、doctype、标签等都属于DOM节点。

操作DOM节点的方式无非就是:创建、添加(插入)、移除、替换、查找(获取)、克隆DOM节点。

创建文本节点:var newText = document.createTextNode(‘文本节点’);
创建标签节点:var newNode = document.createElement(‘div’);

添加(插入)子节点至末尾:父节点.appendChild(子节点);
添加(插入)子节点至某节点前:父节点.insertBefore(子节点, 某节点);

移除子节点:父节点.removeChild(子节点);

替换节点:父节点.replaceChild(替换后的节点, 替换前的节点);

查找(获取)节点:
查找(获取)所有子节点:父节点.childNodes
查找(获取)所有是标签类型的子节点:父节点.children
查找(获取)下一个兄弟节点:某节点.nextSibling
查找(获取)上一个兄弟节点:某节点.previousSibling
查找(获取)父节点:子节点.parentNode
查找(获取)第一个子节点:父节点.firstChild
查找(获取)最后一个子节点:父节点.lastChild

也可以使用document.get方法来获取。

(责任编辑:好模板)
顶一下
(0)
0%
踩一下
(1)
100%
------分隔线----------------------------
栏目列表
热点内容