常见的js dom操作
1、查找
| document.getElementById('id属性值'); | 返回拥有指定id的第一个对象的引用 |
| document/element.getElementsByClassName('class属性值'); | 返回拥有指定class的对象集合 |
| document/element.getElementsByTagName('标签名'); | 返回拥有指定标签名的对象集合 |
| document.getElementsByName('name属性值'); | 返回拥有指定名称的对象结合 |
2、创建
| document.createElement('元素名') | 创建新的元素节点 |
| document.createAttribute('属性名') | 创建新的属性节点 |
| document.createTextNode('文本内容') | 创建新的文本节点 |
3、添加
| parent.appendChild( element/txt/comment/fragment ); | 向父节点的最后一个子节点后追加新节点 |
| element.setAttribute( attributeName, attributeValue ); | 给元素增加指定属性,并设定属性值 |
4、删除
| arentNode.removeChild( existingChild ); | 删除已有的子节点,返回值为删除节点 |
| element.removeAttribute('属性名'); | 删除具有指定属性名称的属性,无返回值 |
| element.removeAttributeNode( attrNode ); | 删除指定属性,返回值为删除的属性 |
5、修改
| element.setAttribute( attributeName, attributeValue ); | 若原元素已有该节点,此操作能达到修改该属性值的目的 |
常见的js dom操作的更多相关文章
- 封装的一些常见的JS DOM操作和数据处理的函数.
//用 class 获取元素 function getElementsByClass(className,context) { context = context || document; if(do ...
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- js dom 操作
JS的DOM操作 1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...
- JS—DOM操作
节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...
- js——DOM操作(一)
DOM:Document Object Model 文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义 为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...
- JS DOM操作 函数 事件 阻止事件冒泡
一 函数 1.字符串函数 s.tolowerCase( ): -- 变小写 s.toupperCase( ): -- 变大写 s.substr( 2 , 8 ): -- 截取 ...
- JS DOM操作(五) Window.docunment对象——操作元素
定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling; -- 找 a ...
- JS DOM操作(二) Window.docunment对象——操作样式
一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class 用在客户端 name 用在服务端 用 id 定位 -- ...
- JS DOM操作(一) 对页面的操作
DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...
随机推荐
- 关于Eclipse for Python
学习Python一段时间,一直用Python的IDE进行开发,过程蛮顺利,但是,基于Visual Studio的使用经验,就希望尝试一种更友好的,更方便管理项目的IDE,分别尝试了PyCharm和Ec ...
- 解决laravel使用QQ邮箱发邮件失败
在 laravel 中使用 QQ 发送邮件的时候莫名其妙的出现了如下错误:Connection could not be established with host smtp.exmail.qq.co ...
- getPageNumRange
<script> function getPageNumRange(pagenumstr) { var pages=pagenumstr.split(";"); pag ...
- easyui的datagrid某个字段return一个a链接
实现方法用 formatter formatter: function(value, row, index) { return '<a href="javascript:void(0) ...
- P61 实践作业
网络攻防实验环境搭建 根据链接下载的实验工具包,将其解压 打开VM虚拟机,点击图中红色框,扫描虚拟机 选择文件所在位置 点击下一步,完成.即可 在VM虚拟机设置中把网络适配器修改为桥接模式.如下图 在 ...
- ALV 动态行列
动态ALV显示的行列,解决部分报表需求. 运行截图如下: 选择屏幕: ALV输出效果1: ALV输出效果2:: ABAP代码: *&------------------------------ ...
- 区块链之Hyperledger(超级账本)Fabric v1.0 的环境搭建(更新)
参考链接:https://blog.csdn.net/so5418418/article/details/78355868 https://blog.csdn.net/wgh1015398431/ ...
- Android 网络编程的陷阱
陷阱一,不要在主线程或者UI线程中建立网络连接 Androd4.0以后,不允许在主线程中建立网络连接,不然会出现莫名其妙的程序退出情况.正确的做法是在主线程中,创建新的线程来运行网络连接程序. // ...
- linux 网络管理的三种方式
修改网络IP的三种方式 1.修改配置文件 1.1dhcp自动获取 配置文件地址/etc/sysconfig/network-scripts TYPE=Ethernet #类型=以太网 PROXY_M ...
- Docker: 创建带数据的MySql container
如果需要想要在一个装有docker的机器上启动一个MySql的container,并且整个MySql container有我想要的数据: 1. 先在已有的MySql instance上准备好数据 2. ...