常用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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
javascript event 事件解析
Jan 31 Javascript
js精度溢出解决方案
Dec 02 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
JS class语法糖的深入剖析
Jul 07 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
php的memcached客户端memcached
2011/06/14 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
JavaScript入门之基本函数详解
2011/10/21 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
python选择排序算法的实现代码
2013/11/21 Python
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
英国网上电器商店:Electricshop
2020/03/15 全球购物
super()与this()的区别
2016/01/17 面试题
写好自荐信的要点
2013/11/06 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
党支部公开承诺书
2014/03/28 职场文书
怎样填写就业意向
2014/04/02 职场文书
会员卡清退活动总结
2014/08/27 职场文书
放射科岗位职责
2015/02/14 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers