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. 中兴iptv机顶盒破解教程图文:亲测中兴B760EV3、B860A、B860AV1.1完美安装应用!非ttl破解![转]

    一直以为中兴的这几个盒子只能通过ttl来破解,不过现在再也不用这么麻烦了,有了这个工具,前后破解不超3分钟!理论上支持所有中兴的iptv机顶盒的破解! 亲测中兴B760EV3.B860A.B860AV ...

  2. 两将军问题、拜占庭将军问题、TCP三路握手过程的联系

    2015年初时产生了一个疑问:基于不可靠的通信链路,为什么在两将军问题中永远无法达到共识,而在TCP三路握手中可以? 今天抽出了一些时间进行研究发现,实际上TCP三路握手也不是完全可靠的,只是一个近似 ...

  3. Oracle使用学习笔记(二)_Sql语句

    一.Sql语句的分类 数据操作语言,简称DML(data manipulation language),如增加,删除,修改,查询数据等 数据定义语言,简称DDL(data defination lan ...

  4. 安装USB驱动时报错“无法启动服务,原因可能是已被禁用或与其相关联的设备没有启动”

    今天在安装一个USB设备的时候报错“Windows已找到设备的驱动程序软件,但在试图安装它时遇到错误”. 这个错误的描述是“无法启动服务,原因可能是已被禁用或与其相关联的设备没有启动”. 事实上,这个 ...

  5. IDEA中使用中jetty启动java项目(非springboot)

    1.安装maven helper插件,略 2.项目pom.xml文件中添加jetty插件配置 <build> <plugins> <plugin> <grou ...

  6. 2019/2/11 LinuxRPM包管理

    一.RPM安装包管理: a.yum install  …… ,  yum remove ……,    yum update ……  , b.只下载安装包而不安装:yum install -y 包名 - ...

  7. nginx 做数据仓库时,location 404 Not Found,发现找不到要用的数据报:Not Found

    背景:  获得远程机器某个目录下的数据文件 方案:使用Nginx配置 1./home/ftp/www/ 下面有images 文件夹,为了访问images下面文件,配置Nginx如下: location ...

  8. CodeForces - 864C-Bus-(模拟加油站问题)

    https://vjudge.net/problem/CodeForces-864C 题意:两地之间有个加油站,往返走k个单程,最少加油多少次. 大佬几十行代码就解决,我却要用一百多行的if语句模拟解 ...

  9. echars踩坑之图表缓存

    针对echars 在一个图表内渲染多次数据时,图表会缓存上一次的数据导致下一次的数据图表变形.使用clear()清除图表缓存. 不让页面缓存的方法 按F12打开Network在Disable cach ...

  10. 关于第一个launcher开发笔记

    本笔记主要记录阅读关于launcher代码是的相关知识点. viewpager的简单使用(适配器模式):https://www.cnblogs.com/fuly550871915/p/4922953. ...