【实用总结】DOM节点className操作

经常用到的小工具函数，每次用到都重写一遍，有点浪费体力，于是决定分阶段整理下，需要用到的时候就直接拷过来用了～

对于dom节点的className，常用操作不外乎增、删、查（改可以用增+删事先），由于代码比较简单，直接上源码+接口注释

/**

 * @description 给节点添加类

 * @param {DOMObject} node dom节点

 * @param {String} className 即将添加的类名

function addClass(node, className){

 var addClassName = trim(className);

 var oriClassName = node.className;

 if(oriClassName.indexOf(addClassName)===-1){

 node.className = oriClassName+   +className;

 * @description 删除节点某个类

 * @param {DOMObject} node dom节点

 * @param {String} className 即将删除的类名

function removeClass(node, className){

 var reg = new RegExp(\\b+ trim(className) +\\b, g);

 node.className = node.className.replace(reg, );

 * @description 判断节点是否具有某个类

 * @param {DOMObject} node dom节点

 * @param {String} className 查询的类名

 * @return {Boolean} true-有，false-没有

function hasClass(node, className){

 return node.className.indexOf(trim(className))!==-1;

 * @description 删除字符串首尾空格

 * @param {String} str 原始字符串

 * @return {String} 删除了首位空格后的字符串

 * @example trim( hello world ) === hello world

function trim(str){

 return str.replace(/^\s+/, ).replace(/\s+$/, );

}

其他如同时添加多个类、同时删除多个类等，实现原理类似，不赘述

JavaScript中DOM节点的查找(遍历) JavaScript中DOM节点的查找(遍历) 这篇文章讲一下DOM节点的查找，即DOM节点的遍历。说道遍历大家应该不陌生了，在js中，通过DOM节点的遍历，我么可以通过任意一个元素找到另外的任意一个元素。前期把这个学到位，到了后期开始学习jQuery时会感觉方便很多。 整个DOM中，节点与节点之间的关系只有两种，兄弟(同胞)关系和父子关系。遍历节点用到的属性也主要是这个两类。 HTML代码： div "feed-item-img" target="_blank" href="https://developer.aliyun.com/article/1135785">
DOM中的node(节点)有关的三个属性--nodeType、nodeName、nodeValue DOM中的node(节点)有关的三个属性–nodeType、nodeName、nodeValue 上篇博文我们讲到了如何通过DOM获取HTML文档中的元素，在这里要明白一点，当我们获取到具体的某一个元素的时候这个元素就是一个元素节点。说到节点，我们不可避免的有三个属性很有必要了解一下：nodeType、nodeName、nodeValue。 1.nodeType属性 每个节点都有一个 nodeType 属性，用于表明节点的类型，节点类型由 Node 类型中定义12个常量表示： 常量名 常量(返回)值 节点类型 描述 Node.ELEMENT_NODE 1 Element 代表元素
同样的 DOM 操作为什么会有不一样的结果？ 深夜光顾小网站，一进去竟然全部是广告，可惜 wuhen 模式下无法开启我的 Adblock，可我再转念一下，删广告这种事还用得着浏览器插件，不就是一个 DOM 操作？我直接一行代码删完
DOM 精通了？请问 Node 和 Element 有何区别？ 相信我们很多同学都经常会使用到 Node（节点）和 Element（节点）的概念，那么这两者到底有何区别，不知道有多少人能够答得上来这个问题？
41、Element 节点 Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。
节点对象图与DOM树形图 节点对象图 DOM树形图 我的GitHub地址：https://github.com/heizemingjun 我的博客园地址：http://www.cnblogs.com/chenmingjun 我的蚂蚁笔记博客地址：http://blog.