常用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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
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下一个非常全面获取图象信息的函数
2008/11/20 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
JS实现页面打印功能
2017/03/16 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python opencv读mp4视频的实例
2018/12/07 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
Java面向对象面试题
2016/12/26 面试题
部队学习十八大感言
2014/01/11 职场文书
平民服装店创业计划书
2014/01/17 职场文书
美术国培研修感言
2014/02/12 职场文书
大学生简短的自我评价
2014/09/12 职场文书
六年级学生期末评语
2014/12/26 职场文书
委托书格式要求
2015/01/28 职场文书
化验室岗位职责
2015/02/14 职场文书
写给老师的保证书
2015/05/09 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers