常用DOM整理

2024-04-27 14:08:09

字体：大中小

来源：转载

供稿：网友

常用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.nextSibling3、获取节点信息获取元素或者属性节点的标签名称：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+$/,'');}

上一篇：React-Native入门指南（六）——JSX在React-Native中的应用