常用DOM整理

前言:

html为document搭建了一棵DOM树,这棵树就是有一系列Node节点所构成的。他为我们定义了文档的结构。

Node类型:

Node.ELEMENT_NODE(1);      //元素节点较常用
Node.ATTRIBUTE_NODE(2);    //属性节点较常用
Node.TEXT_NODE(3);          //文本节点较常用
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9);   //文档节点较常用
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);

相关函数:

1、取得节点:

document.getElementById('element');
 document.getElementsByTagName('element');         返回类数组对象
 document.getElementsByName('element');            返回类数组对象
 document.getElementsByClassName('className')      返回类数组对象,IE7及以下并不支持;
 document.querySelectorAll('class' | 'element')    返回类数组对象

2、遍历节点

查找子节点:element.childNodes        返回类数组对象
 查找第一个子节点:element.firstChild
 查找最后一个子节点:element.lastChild
 查找父元素:element.parentNode
 查找前一个兄弟元素: element.previousSibling
 查找后一个兄弟元素: element.nextSibling

3、获取节点信息

获取元素或者属性节点的标签名称:elementNode.nodeName
 获取文本节点的内容:    textNode.nodeValue;
 获取并设置元素节点的内容(可能会包含HTML标签):  elementNode.innerHTML
 获取并设置元素节点的纯文本内容:element.innerText(IE) | element.textContent(FF) 
 获取属性节点的值:      attrNode.getAttribute(AttrName);
 设置属性节点的值:      attrNode.setAttribute(AttrName,AttrValue);
 获取节点的类型:        node.nodeType;
  元素节点: 1;
  属性节点: 2;
  文本节点: 3;
  文档节点: 9;
  注释节点: 8;

4、操作节点

创建元素节点:       document.createElement('element');
 创建文本节点:       document.createTextNode('text');
 创建属性节点:       document.createAttribute('attribute');
 删除节点:               node.remove();
 删除子节点:           parentNode.removeChild(childNode);
 插入节点:               parentNode.appendChild(childNode);  //插入到父节点的尾部
                             parentNode.insertBefore(newNode,existingNode)  //插入到已存在节点的前面;
 克隆节点:               node.cloneNode([true])     //传入true为深度复制
 替换节点:               parentNode.replaceChild(newNode,oldNode);

相关拓展:

1、由于IE低版本浏览器和其他浏览器在处理DOM中存在不兼容,因此要做一些简单的封装处理。


//=================
function getElementChildren(element) {
   var children = [],
   oldChildNodes = element.childNodes;
   for(var i=0, len=oldChildNodes.length; i<len; i+=1) {
     if(oldChildNodes[i].nodeType == 1) {
        children.push(oldChildNodes[i]);
     }
   }
 return children;
}

//==================
function getElementNext(element) {
   var next = element.nextSibling || null;
     if(next) {
       if(next.nodeType == 1) {
          return next;
       } else {
          return arguments.callee(next);
       }
     } else {
     throw new Error("下一个兄弟元素不存在!");
     }
}

//======================
function getElementPrev(element) {
   var prev = element.previousSibling || null;
   if(prev) {
     if(prev.nodeType == 1) {
       return prev;
     } else {
       return arguments.callee(prev);
     }
   } else {
     throw new Error("上一个兄弟元素不存在!");
   }
}

2、操作DOM元素的样式

//=========================
function getElementStyle(element,styleName) {
   if(typeof getComputedStyle != 'undefined') {
     return getComputedStyle(element,null)[styleName];
   } else {
     return element.currentStyle[styleName];
   }
}

//==========================
function addClass(element,className) {
   element.className += className;
}

//==========================
function removeClass(element,removeClassName) {
   var classStr = element.className;
   element.className = classStr.replace(removeClassName,'').split(/\s+/).join(' ').replace(/^\s+/,'').replace(/\s+$/,'');
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

(0)

相关推荐

  • jquery对dom的操作常用方法整理

    Jquery对dom的操作也是很总要的. 1.三个简单实用的用于 DOM 操作的 jQuery 方法: · text() - 设置或返回所选元素的文本内容 · html() - 设置或返回所选元素的内容(包括 HTML 标记) · val() - 设置或返回表单字段的值 2.attr()获取属性.当然这两也是可以自己设置值来修改的, 3.对html内容的添加.添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法: · append() - 在被选元素的结尾插入内容 · p

  • Python random模块常用方法

    复制代码 代码如下: import random print random.random() 获取一个小于1的浮点数 复制代码 代码如下: import random random.randint(1,10) 获取一个从1到10的整数 复制代码 代码如下: import random print random.uniform(0,2) 获取一个大于0小于2的浮点数 复制代码 代码如下: import random print random.randrange(1,10,4) 获取一个从1到10步

  • Python random模块(获取随机数)常用方法和使用例子

    random.randomrandom.random()用于生成一个0到1的随机符点数: 0 <= n < 1.0 random.uniformrandom.uniform(a, b),用于生成一个指定范围内的随机符点数,两个参数其中一个是上限,一个是下限.如果a > b,则生成的随机数n: a <= n <= b.如果 a <b, 则 b <= n <= a 复制代码 代码如下: print random.uniform(10, 20)print rand

  • DOM操作一些常用的属性汇总

    1.DOM:文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 2.DOM的一些常用的属性 2.1 通过ID获取元素 (1)语法: 复制代码 代码如下: document.getElementById("id"); (2)作用:id就向一个人的身份证,我们可以通过寻找标签的id来寻找标签,然后进行相应的操作. (3)注意:不要忘记写document! 2.2 inne

  • 常用DOM整理

    前言: html为document搭建了一棵DOM树,这棵树就是有一系列Node节点所构成的.他为我们定义了文档的结构. Node类型: Node.ELEMENT_NODE(1);      //元素节点较常用 Node.ATTRIBUTE_NODE(2);    //属性节点较常用 Node.TEXT_NODE(3);          //文本节点较常用 Node.CDATA_SECTION_NODE(4); Node.ENTITY_REFERENCE_NODE(5); Node.ENTIT

  • 原生JS实现几个常用DOM操作API实例

    原生实现jQuery的sibling方法 <body> <span>我是span标签</span> <div>我是一个div</div> <h1 id="h1">我是标题</h1> <p>我是一个段落</p> <script type="text/javascript"> //获取元素的兄弟节点 function siblings(o){//参数o

  • jQuery原理系列-常用Dom操作详解

    1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply修正this 的指向. if (element.addEventListener) { element.addEventListener(type, handler, useCapture); } else { if (element.attachEvent) { element.attachEve

  • redis常用命令整理

    一.key 相关: (1)redis允许模糊查询 key(keys *) 有3个通配符 *.?.[] (2)randomkey:返回随机key (3)type key:返回key存储的类型 (4)exists key:判断某个key是否存在 (5)del key:删除key FLUSHALL: 删除所有key(慎用) 二.数据操作: Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及 zset(sorted set:有序集合). 1.stri

  • Oracle数据库常用命令整理(实用方法)

    这篇文章主要介绍了oracle查询语句,有助于新手迅速熟悉ORACLE基本语法有助于新手迅速熟悉ORACLE基本语法,需要的朋友可以收藏下 oracle查看用户状态 select username,account_status from dba_users; 查看所有角色 select * from dba_roles; 锁定用户 alter user XXX account lock; Linux下新建用户 useradd -d /home/XXX -s /usr/bin/ksh -m XXX

  • Linux全网最全面常用命令整理(附实例)

    目录 一.基本命令 1.1 关机和重启 1.2 帮助命令 二.目录操作命令 2.1 目录切换 cd 2.2 目录查看 ls [-al] 2.3 目录操作[增,删,改,查] 2.3.1 创建目录[增] mkdir 2.3.2 删除目录或文件[删]rm 2.3.3 目录修改[改]mv 和 cp 2.3.4 搜索目录[查]find 三.文件操作命令 3.1 文件操作[增,删,改,查] 3.1.1 新建文件[增]touch 3.1.2 删除文件 [删] rm 3.1.3 修改文件[改] vi或vim 3

  • docker常用命令整理汇总(新手必备!)

    目录 1.docker的启动.停止.重启 2.docker创建一个容器 3.docker启动的容器列表 3.查看docker创建的所有容器 4.启动.停止.重启某个docker 容器 5.查看指定容器的日志记录 6.删除某个容器,若正在运行,需要先停止 7.删除所有容器 附:Docker 如何保存对容器的修改 总结 具体docker的优势我就不说了,下面就使用docker的一些常用命令具体详细说下: 1.docker的启动.停止.重启 [root@localhost ~]# service do

  • Redis入门基础常用操作命令整理

    目录 Redis基础 一.redis是单线程 二.关于数据库的常用操作 1. 默认数据库 2. 切换数据库 3. 查看数据库大小 4. 清空数据库 三.关于Redis-Key的常用操作 1. set 设置key 和 value 2. keys * 查看所有的key 3. get key 的 value 4. exists key 是否存在key 5. move 移动 key 6. 设置key过期时间 7. 查看key的剩余时间 8. 查看key的类型 Redis基础 Redis 是一个开源(BS

  • Linux中sftp常用命令整理

    SFTP的概念 sftp是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的网络的加密方法.sftp 与 ftp 有着几乎一样的语法和功能.SFTP 为 SSH的其中一部分,是一种传输档案至 Blogger 伺服器的安全方式.其实在SSH软件包中,已经包含了一个叫作SFTP(Secure File Transfer Protocol)的安全文件信息传输子系统,SFTP本身没有单独的守护进程,它必须使用sshd守护进程(端口号默认是22

  • conda常用命令整理及用法详解

    目录 Conda 1 创建.删除和复制虚拟环境 2 激活虚拟环境 3 查看当前虚拟环境列表 4 给虚拟环境装包 5 配置Anaconda的镜像网址 6 给jupyter notebook添加虚拟环境的内核 7 版本控制 8 jupyter notebook安装插件 9 Anaconda从本地安装包 10 导出配置文件和通过配置文件安装 Conda Conda是Anaconda中一个强大的包和环境管理工具,可以在Windows系统中的的Anaconda Prompt命令行使用,也可以在macOS或

随机推荐