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操作的更多相关文章

  1. 封装的一些常见的JS DOM操作和数据处理的函数.

    //用 class 获取元素 function getElementsByClass(className,context) { context = context || document; if(do ...

  2. JS DOM操作(创建、遍历、获取、操作、删除节点)

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  3. js dom 操作

    JS的DOM操作   1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...

  4. JS—DOM操作

    节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...

  5. js——DOM操作(一)

    DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...

  6. JS DOM操作 函数 事件 阻止事件冒泡

    一 函数 1.字符串函数 s.tolowerCase( ):    -- 变小写 s.toupperCase( ):   -- 变大写 s.substr( 2 , 8 ):     -- 截取     ...

  7. JS DOM操作(五) Window.docunment对象——操作元素

    定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling;            -- 找 a ...

  8. JS DOM操作(二) Window.docunment对象——操作样式

    一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  -- ...

  9. JS DOM操作(一) 对页面的操作

    DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...

随机推荐

  1. Kafka运维填坑(转)

    前提: 只针对Kafka 0.9.0.1版本; 说是运维,其实偏重于问题解决; 大部分解决方案都是google而来, 我只是作了次搬运工; 有些问题的解决方案未必一定是通用的, 若应用到线上请慎重; ...

  2. 如何设置.net控件SplitContainer平均分配

    设置SplitterDistance为宽或者高的一半

  3. 初学python笔记---列表

    ---恢复内容开始--- 1.列表的格式:用方括号([])来表示的,逗号来分隔元素,下标从0开始 2.根据下标来查看列表中元素,当索引为-1时,显示的是最后一个元素 print(a[0])-----1 ...

  4. oracl遇到的问题

    使用oracl数据库用  ALTER TABLE Students ADD CONSTRAINT PRINF_NAME_UNIQUE UNIQUE (sname) 添加唯一性约束,出现问题,报错为:a ...

  5. Google开源软负载seesaw

    https://github.com/google/seesaw ------------------------ 在分布式系统中,负载均衡是非常重要的环节,通过负载均衡将请求派发到网络中的一个或多个 ...

  6. Flash AS3)actionScript代码制作文字渐变 + 描边

    var sp:Sprite = new Sprite; //容器,放置稍后的渐变背景和文本框 this.addChild(sp); //容器添加到舞台 var maskMC:MovieClip = n ...

  7. bootstrap日期选择

    <input type="text" class="form-control datepicker" style="padding: 0.375 ...

  8. ELK收集日志到mysql

    场景需求 在使用ELK对日志进行收集的时候,如果需要对数据进行存档,可以考虑使用数据库的方式.为了便于查询,可以同时写一份数据到Elasticsearch 中. 环境准备 CentOS7系统: 192 ...

  9. MyCP(课下作业,必做)- 20175218

    MyCP(课下作业,必做) 1.任务详情 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2 ...

  10. 项目总结20:阿里云免费https证书申请

    项目总结20:阿里云免费https证书申请 1. 登录阿里云控制台 www.aliyun.com,用账户信息登录 2. 在”产品与服务”搜索SSL,选择SSL证书 3. 点击购买证书 4. 选择” S ...