Dom节点操作常用方法
1.访问/获取节点
document.getElementById(id); //返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name); //返回带有指定名称的节点集合 注意拼写:Elements
document.getElementsByTagName(tagname); //返回带有指定标签名的对象集合 注意拼写:Elements
document.getElementsByClassName(classname); //返回带有指定class名称的对象集合 注意拼写:Elements
2.创建节点/属性
document.createElement(eName); //创建一个节点
document.createAttribute(attrName); //对某个节点创建属性
document.createTextNode(text); //创建文本节点
3.添加节点
document.insertBefore(newNode,referenceNode); //在某个节点前插入节点
parentNode.appendChild(newNode); //给某个节点添加子节点
4.复制节点
cloneNode(true | false); //复制某个节点 参数:是否复制原节点的所有属性
5.删除节点
parentNode.removeChild(node); //删除某个节点的子节点 node是要删除的节点
注意:为了保证兼容性,要判断元素节点的节点类型(nodeType),若nodeType==1,再执行删除操作。通过这个方法,就可以在 IE和 Mozilla 完成正确的操作。
nodeType 属性可返回节点的类型.最重要的节点类型是:
| 元素类型 | 节点类型 |
|---|---|
| 元素element | 1 |
| 属性attr | 2 |
| 文本text | 3 |
| 注释comments | 8 |
| 文档document | 9 |
6.修改文本节点
| 方法 | 作用 |
| appendData(data); | 将data加到文本节点后面 |
| deleteData(start,length); | 将从start处删除length个字符 |
| insertData(start,data); | 在start处插入字符,start的开始值是0; |
| replaceData(start,length,data); | 在start处用data替换length个字符 |
| splitData(offset); | 在offset处分割文本节点 |
| substringData(start,length); | 从start处提取length个字符 |
7.属性操作
getAttribute(name) //通过属性名称获取某个节点属性的值
setAttribute(name,value); //修改某个节点属性的值
removeAttribute(name); //删除某个属性
8.查找节点
parentObj.firstChild; //如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用 parentObj.firstChild.firstChild.....
parentObj.lastChild; //获得一个节点的最后一个节点,与firstChild一样也可以进行递归使用 parentObj.lastChild.lastChild.....
parentObj.childNodes; //获得节点的所有子节点,然后通过循环和索引找到目标节点
9.获取相邻的节点
curtNode.previousSibling; //获取已知节点的相邻的上一个节点
curtNode.nextSlbling; // 获取已知节点的下一个节点
10.获取父节点
childNode.parentNode; //得到已知节点的父节点
11.替换节点
replace(newNode,oldNode);
Dom节点操作常用方法的更多相关文章
- 【转】Dom节点操作常用方法
1.访问/获取节点 document.getElementById(id); //返回对拥有指定id的第一个对象进行访问 document.getElementsByName(name); //返回带 ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- 04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
- 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作
jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...
- 前端JavaScript之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...
- Dom节点操作总结
Dom 一:Dom的概念 Dom的简介: 全称为 document object model 文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...
- 第6章 DOM节点操作
一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...
- 通过DOM节点操作来获取表单信息
这是之前突发奇想地用dom节点的关系来操作表单的故事.. 事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复.这个页面呢,就是通过foreach获取到数据库里的 ...
随机推荐
- typeof的使用技巧
typeof 对于基本类型,除了 null 都可以显示正确的类型 <template> <section class="p-10"> <el-b ...
- Linux中的环境变量配置文件及其作用
登录相关的配置文件: /etc/profile 范围:对所有用户生效 作用: a.定义USER变量 b.定义LOGNAME变量 c.定义MAIL变量 d.定义PATH变量 e.定义HOSTNAME变量 ...
- ModelSim之TCL仿真
在使用ModelSim时,我们一般都是从界面UI进行操作的,这样也比较直观易学.但是在很多的调试时,发现很多操作都是重复的,修改一下代码就要再次进行相关操作,这样很没有效率.其实,ModelSim是可 ...
- 流量分析系统----讲解-echarts模拟迁移(结合china.js)
百度 Echarts 地图->模拟迁徙,实现自动切换地图 小航哥注释: 1.本文主要是把模拟迁移的流程讲了一遍,讲的很好.具体实现参考航哥这篇随笔“流量分析系统----实现-echarts模拟迁 ...
- loadrunner之脚本篇——录制方式HTML-based和URL-based Script
A. HTML-based Script 针对 Web (HTTP/HTML)虚拟用户的缺省录制级别.它指示VuGen录制当前web页面上下文中的HTML action.录制会话期间并不录制所有资 ...
- 06_Hadoop配置伪分布式模式详解
查看IP地址,设为手动模式: 配置hadoop用户sudo权限 su切换到root身份,配置vim /etc/sudoers文件,加入 hadoop ALL=(root)NOPASSWD:ALL ...
- python中编写无参数decorator
Python的 decorator 本质上就是一个高阶函数,它接收一个函数作为参数,然后,返回一个新函数. 使用 decorator 用Python提供的 @ 语法,这样可以避免手动编写 f = de ...
- Too many open files 问题
1.解决办法 (1)查看 查看当前系统打开的文件数量 lsof | wc -l watch "lsof | wc -l" 查看某一进程的打开文件数量 lsof -p pid | w ...
- requests.post处理Content-Type: multipart/form-data的请求
前几天遇到一个需求,要调用一个接口发送请求,抓包之后得到的数据是这样的 上网看了一些资料得知,原来这个接口的数据是通过multipart/form-data格式传过去的,multipart/form- ...
- 克隆VMware虚拟机
虚拟机使用过程需要用到多个进行实验.重新安装时间又太长,通过vmware虚拟机自带软件能够很好的快速克隆出完全相同的系统. 环境:关闭VMware,不要在开启状态哦~ 步骤: 选中需要被克隆的系统 菜 ...