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. CentOS6.3上搭建expect无交互开发环境

    1.背景 在面向shell编程时对于需要交互的场合则必须通过人工来干预,而对于这种方式是违反无人职守的原则:现在expect就解决了这个问题, Expect是一个免费的编程工具语言,用来实现自动和交互 ...

  2. C# ASP.NET Forms身份认证

    原文:https://www.cnblogs.com/kyo-lynn/p/3418577.html 原文:https://www.cnblogs.com/fish-li/archive/2012/0 ...

  3. ES6-你不知道的箭头函数

    一谈到ES6的箭头函数,大家可能想到的优点就是语法更简洁,因为去掉了return.function.{}等输入. 但是设计者果真就是出于简洁的目的推出的箭头函数吗?显然不是.   => 箭头函数 ...

  4. Codeforces Round #436 E. Fire(背包dp+输出路径)

    题意:失火了,有n个物品,每个物品有价值pi,必须在时间di前(小于di)被救,否则就要被烧毁.救某个物 品需要时间ti,问最多救回多少价值的物品,并输出救物品的顺序. Examples Input ...

  5. day51 JS基础

    复习 1.字体图标 用i标签, 设置类名, 与第三方字体图标库进行图标匹配 <link rel="stylesheet" href="font-awesome-4. ...

  6. Html 内容

    1.Html就是超文本标记语言的简写,是最基础的网页语言. 2.Html是通过标签来定义的语言,代码都是由标签组成的. 3.Html代码不用区分大小写. 4.Html代码由<html>开始 ...

  7. JavaWeb练习-网上名片管理系统

    实验项目名称 JavaWeb网上名片管理系统 实验目的 实现名片的增.删.改.查等操作. 实验基本原理 JSP指令.JSP动作.JSP内置对象等 主要仪器设备及耗材 Win10.Myeclipse 实 ...

  8. 自动化测试框架对比(UIAutomator、Appium)

    在Android端,appium基于WebDriver协议,利用Bootstrap.jar,最后通过调⽤用UiAutomator的命令,实现App的自动化测试. UiAutomator测试框架是And ...

  9. [原]Webpack 3 + AngularJS1.* + Bootstrap 4 + Mapbox-gl

    直接上步骤 一.创建项目 1. 使用VSCode建立项目目录结构如下: 文档结构 wabg ├── http │ ├── app.js │ ├── controllers │ │ └── index. ...

  10. 【转】.NET程序员提高效率的70多个开发工具

    原文:.NET程序员提高效率的70多个开发工具 工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为各ASP.NET 开发者介绍一些高效实用的工具,涉及SQL 管理,VS插件 ...