当前位置: 首页 > 编程笔记 >

常用DOM整理

赵夕
2023-03-14
本文向大家介绍常用DOM整理,包括了常用DOM整理的使用技巧和注意事项,需要的朋友参考一下

前言:

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

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

 类似资料:
  • 本文向大家介绍js常用DOM方法详解,包括了js常用DOM方法详解的使用技巧和注意事项,需要的朋友参考一下 介绍几个js DOM的常用方法 获取元素节点 getElementById    getElementsByTagName    getElementsByClassName 先写一个简单的网页做测试: 1.  getElementById   1.先定义变量 var contentId =

  • 本文向大家介绍redis常用命令整理,包括了redis常用命令整理的使用技巧和注意事项,需要的朋友参考一下 一、key 相关: (1)redis允许模糊查询 key(keys *)  有3个通配符 *、?、[] (2)randomkey:返回随机key   (3)type key:返回key存储的类型 (4)exists key:判断某个key是否存在 (5)del key:删除key FLUSH

  • 在了解DOM(文本对象模型)的框架和节点后,最重要的是使用这些节点处理html网页 对于一个DOM节点node,都有一系列的属性和方法可以使用。常用的有下表。 完善:http://www.w3school.com.cn/xmldom/dom_element.asp 1.访问节点 BOM提供了一些边界的方法访问节点,常用的就是getElementsByTagName(),和getElementByI

  • 本文向大家介绍jQuery原理系列-常用Dom操作详解,包括了jQuery原理系列-常用Dom操作详解的使用技巧和注意事项,需要的朋友参考一下 1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply修正this 的指向。 2.获取偏移量 $(el).po

  • 本文向大家介绍非常好用的sql语句(日常整理),包括了非常好用的sql语句(日常整理)的使用技巧和注意事项,需要的朋友参考一下 1. /* 得到trace文件路径和名称 */ 2./* 显示产生锁定的sql语句 */ 3./* 查看oracle隐藏参数 */ 4./* 根据系统中oracle的pid来查看sql */ 以上就是本文给大家分享几个比较好用sql语句,希望大家喜欢。

  • 本文向大家介绍Docker 常用命令整理(实用篇),包括了Docker 常用命令整理(实用篇)的使用技巧和注意事项,需要的朋友参考一下 1. 查看docker信息(version、info) 2. 对image的操作(search、pull、images、rmi、history) 3. 启动容器(run) docker容器可以理解为在沙盒中运行的进程。这个沙盒包 含了该进程运行所必须的资源,包括文