常用DOM整理


Posted in Javascript onJune 16, 2015

前言:

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+$/,'');
}

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

Javascript 相关文章推荐
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 #Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 #Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 #Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 #Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 #Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 #Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 #Javascript
You might like
十天学会php之第九天
2006/10/09 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
python使用Matplotlib画条形图
2020/03/25 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python实现银行实战系统
2020/02/26 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
农林环境专业求职信
2014/03/13 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
2015年母亲节寄语
2015/03/23 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
2016情人节宣传语
2015/07/14 职场文书
高中信息技术教学反思
2016/02/16 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书