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. 利用selenium爬取京东商品信息存放到mongodb

    利用selenium爬取京东商城的商品信息思路: 1.首先进入京东的搜索页面,分析搜索页面信息可以得到路由结构 2.根据页面信息可以看到京东在搜索页面使用了懒加载,所以为了解决这个问题,使用递归.等待 ...

  2. redis+thinkphp5的注册、登陆、关注基础例子

    最近初步接触redis,结合thinkphp5与redis,写了一个用户注册的基础例子,用于学习. 这个例子是结合了兄弟连的redis视频,最后两节的内容写的:https://study.163.co ...

  3. Android Studio上传代码到Coding.net

    1.官方帮助文档:https://coding.net/help/doc/git/import-from-local.html 2.简单点: https://git.coding.net/javaka ...

  4. 函数function

    function add(x,y,z){ sum = x + y +z; document.write(x+"+"+y+"+"+z+"="+ ...

  5. JS应用猜数游戏

    (function(){ let rs = require("readline-sync"); let guessNumber = new Set(); function getN ...

  6. 视频修复工具recover_mp4,视频录制一半掉电,如何查看已保存数据?

    在生产环境中,视频通常是一种重要的文件证据,但是,如果因为各种原因,导致视频在录制到一半过程中失败, 比如:监控到一半,录制设备掉电.虽然,掉电后的视频肯定找不到,但是,有时,长时间工作生产的视频通常 ...

  7. Taro之百度地图显示定位点和信息

    由于没有后台数据就随机生成点来模拟了.具体代码如下. componentDidMount = () => { const { BMap, BMAP_STATUS_SUCCESS } = wind ...

  8. Win10 远程桌面连接出现“要求的函数不受支持”的解决办法之修改注册表

    问题起因 笔者自己在阿里云上搞服务器,有一台 Windows Server 必须通过远程桌面连接来管理,由于没能完全关掉 Win10 自带的烦人的系统更新,导致昨天安装完更新后出现了连接远程桌面时“要 ...

  9. css第三天

    三 1.标准模式与怪异模式(针对盒子模型)与边框,填充,边界,有关 标准模式(默认):元素的总宽度 = 盒子的宽度 + 左右填充宽度 + 左右边框宽度元素的总高度 = 盒子的高度 + 上下填充高度 + ...

  10. 大数据入门到精通15--hive 对 date类型的处理

    一.基础日期处理 //date 日期处理select current_date;select current_timestamp;//to_date(time) ;to_date(string)sel ...