JS DOM操作基础
1、创建节点 |
//(1)、创建元素节点 |
var ele1 = document.createElement("div"); |
//(2)、创建文本节点 |
var text1 = document.createTextNode("这是一个文本节点"); |
2、复制节点 |
//(1)、包含所有子节点 |
var dd = document.getElementById("dd"); |
var ele2 = dd.cloneNode(true); //默认为true |
document.body.appendChild(ele2); |
//(2)、只复制指定节点(不含子节点) |
var ddd = document.getElementById("ddd"); |
var ele2 = ddd.cloneNode(false); |
document.body.appendChild(ele2); |
3、插入节点 |
//(1)、appendChild |
var obj = document.getElementById("obj"); |
document.body.appendChild(obj); |
//(2)、insertBefore |
var d = document.getElementById("d"); |
var dd = document.getElementById("dd"); |
var text = document.createTextNode("这是一个测试"); |
d.insertBefore(text,dd); |
4、删除节点 |
//(1)、删除d节点下的子节点ddd |
d.removeChild(ddd); |
//(2)、删除ddd节点,但不知他的父节点 |
ddd.parentNode.removeChild(ddd); |
//(3)、文档中删除d节点 |
document.body.removeChild(d); |
5、替换节点 |
//将文档中的li替换成a |
var li = document.getElementsByTagName("li")[0]; |
var a = document.createElement("a"); |
document.body.replaceChild(a,li); |
6、设置属性节点 |
//设置属性节点并赋值与清空 |
d.setAttribute("title","this is a test"); |
d.setAttribute("id",""); |
document.body.appendChild(d); |
7、查找节点 |
//(1)、查看属性节点值 |
d.getAttribute("title"); |
//(2)、hasChildNodes是判断是否有子节点,文本节点和属性节点永远返回false |
d.hasChildNodes(); |
//(3)、循环遍历节点 |
var img = document.getElementsBytagName("img"); |
8、节点属性 |
//节点类型 |
nodeName 节点名称 |
nodeType 节点类型 1为元素节点 2为属性节点 3为文本节点 |
如果这个元素节点是文本节点的话就可以给他赋值text2.nodeValue = "this is a text2"; |
9、遍历节点树 |
//获取各个节点 |
1)、获取所有节点,文本和属性节点返回空数组 childNodes |
2)、获取所有节点的第一个节点 firstChild 是个只读属性 |
3)、获取所有节点的最后一个节点 lastChild 是个只读属性 |
4)、获取所有节点的下一个节点 nextSibling 是个只读属性 |
5)、获取所有节点的上一个节点 previousSibling 是个只读属性 |
6)、获取给定节点的父节点 parentNode 是个只读属性 |
转载于:https://www.cnblogs.com/LiuRongQing/archive/2013/03/05/LiuRongQing.html
JS DOM操作基础相关推荐
- js DOM之基础详解
DOM(文档对象模型)是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.删除和修改页面的某一部分. HTML DOM 树形结构如下: 1.Node方面 1.1 节点类 ...
- js dom操作实现雪花下落
关于使用dom操作完成雪花下落的实现 关于实现雪花下落的实现 实现代码段如下 <!DOCTYPE html> <html lang="en"> <he ...
- JS的dom操作基础——获取元素
系统提供的方法 在H5之前的技术: 1.getElementById("目标元素的id值") 通过标签的id获取,如果未找到返回null. 2.getElementsByClas ...
- JS DOM 操作实现代码
简单的表格: 复制代码 代码如下: <table> <tr> <td id="TEST"> <input type="submi ...
- java冒泡函数解释,JS DOM操作 函数 事件 阻止事件冒泡
一 函数 1.字符串函数 s.tolowerCase( ): -- 变小写 s.toupperCase( ): -- 变大写 s.substr( 2 , 8 ): -- 截取 ...
- js dom 操作实例图解
以下操作的是www.ibm.com: 下面是在js调试控制台中操作: 根据id和name获取元素对象:获取对象后获取值用getAttribute: 遍历一个元素的属性集合,输出属性的名字和值: 遍历一 ...
- js DOM操作元素样式
element.style 行内样式操作 element.className 类名样式操作 1. element.style 上下文是获取到的元素: 通过element.style.某个css样式 设 ...
- 前端案例:像素鸟小游戏(js+dom操作,完整代码,附案例素材)
目录 一.案例效果 二.实现思路 三.完整代码+详细注释 四.案例素材 一.案例效果 二.实现思路 创建游戏背景板和小鸟,并分别设置相对定位与绝对定位: 初始化背景图的位置: 初始化小鸟的位置: 设置 ...
- js DOM操作自定义属性
自定义属性:在日常开发中,html的内置属性已经无法满足程序员的日常开发,所以需要我们自己定义属性,H5给我们新增了自定义属性,为了防止自定义属性和内置属性引起歧义,所以H5规定自定义属性以data- ...
最新文章
- Android消息机制学习笔记
- OPenfire简介
- ARTS打卡计划第三周-Tips
- BNU 26349——Cards——————【区间dp】
- 语言教案 小小计算机,小班《小小手机本领大》语言教案
- C语言弧长,在C ++中从给定角度的弧长?
- Invalid bound statement (not found)解决办法
- 汇编语言比C51需要效率高,汇编语言与C51语言实现跑马灯实验的比较 -
- Linux学习总结(12)——Linux必须学会的60个命令
- 最新语言表示方法XLNet
- [渝粤教育] 广东-国家-开放大学 21秋期末考试管理学原理★10013k1
- h3c服务器通过pxe安装系统,h3c服务器设置pxe启动
- CoCube传感器MPU6050笔记
- PHP入门《PHP程序设计案例教程》-- PHP语法基础
- 基于SSH开发报刊订阅管理系统的设计与实现
- discuz怎么自定义php,Discuz添加自定义数据调用模块
- mysql time over_mysql启动失败错误mysqld.service holdoff time over, scheduling restart.
- 【笛子的Spring5学习】AOP介绍
- spring-boot2 + vue2+ element-ui2 + avue 通用架构 xijia-plus (兮家 plus)
- linux让前台程序脱离终端运行