常用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 相关文章推荐
图片上传即时显示缩略图的js代码
May 27 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
js实现简单抽奖功能
Nov 24 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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实现文件下载更能介绍
2012/11/23 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python编写一个优美的下载器
2018/04/15 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
经济管理专业毕业生推荐信
2013/11/11 职场文书
校园新闻广播稿
2014/01/10 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
python基础之停用词过滤详解
2021/04/21 Python
pt-archiver 主键自增
2022/04/26 MySQL