原生JS实现几个常用DOM操作API实例
更新时间：2017年01月19日 09:22:59 投稿：jingxian
下面小编就为大家带来一篇原生JS实现几个常用DOM操作API实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
原生实现jQuery的sibling方法
<body>
<span>我是span标签</span>
<div>我是一个div</div>
<h1 id="h1">我是标题</h1>
<p>我是一个段落</p>
<script type="text/javascript">
//获取元素的兄弟节点
function siblings(o){//参数o就是想取谁的兄弟节点，就把那个元素传进去
var a = [];//定义一个数组，用来存储o的兄弟元素
//previousSibling返回位于相同节点树层级的前一个元素
var p = o.previousSibling;
while(p){//先取o的前面的兄弟元素 判断有没有上一个兄弟元素，如果有则往下执行，p表示previousSibling
if(p.nodeType === 1){
a.push(p);
}
p = p.previousSibling//最后把上一个节点赋给p
}
a.reverse();//把顺序反转一下，这样元素的顺序就是按先后的了
//nextSibling返回位于相同节点树层级的下一个节点
var n = o.nextSibling;//再取o下面的兄弟元素
while(n){//判断有没有下一个兄弟结点，n是nextSibling的意思
if(n.nodeType === 1){//判断是否是元素节点
a.push(n);
}
n = n.nextSibling;
}
return a//最后按从老大到老小的顺序，把这一组元素返回
}
var oH = document.getElementById("h1");
console.log(siblings(oH));//[span, div, p, script]
</script>
</body>
原生实现jQuery的class选择器
//用数组模拟jQuery的class选择器
function getClassName(ParentId,NewClassName){
var AllClassElem = ParentId.getElementsByTagName(“*”);
var AllClass = [];
var i=0;
for(var i=0; i<AllClassElem.length; i++){
if(AllClassElem[i].className == NewClassName){
AllClass.push(AllClassElem[i]);
}
}
return AllClass;
}
//用法：
var PElementId=document.getElementById("bar");
var buttons = getClassName(PElementId,"sco");
//取id="bar"下class="sco"的元素；
getElementsByClassName()
/**
* 获取指定类名的元素对象集合
* @param {Object} node 父节点
* @param {String} classname 指定类名
* @return {[Object]}目标对象集合
*/
function getElementsByClassName(node,classname) {
//如果浏览器支持则直接使用
if (node.getElementsByClassName) {
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
addLoadEvent()
/**
* 方便的将在文档加载后运行的函数添加到window.onload中
* @param {function} func 待运行函数
*/
function addLoadEvent(func){
var oldOnload = window.onload;
//typeof 返回String类型
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldOnload();
func();
}
}
}
addClass()
/**
* 为指定元素结点添加新类名
* element 元素结点
* value 类名
*/
function addClass(element,value){
//如果元素类名为空，直接将value赋值给相应的元素类名
if(!element.className){
element.className = value;
}else{
//否则需要将类名之间用空格隔开
newClassName = element.className;
//多个类名间添加空格
newClassName += ' ';
newClassName += value;
element.className = newClassName;
}
}
insertAfter()
/**
* 在目标元素结点后面插入新的元素结点
* newElement 待插入的新元素结点
* targetElement 目标元素结点
*/
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
getNextElement()
/**
* 获取下一个元素结点
* @param {Object} node 兄结点
* @return {Object || null}下一个元素结点或未获取到
*/
function getNextElement(node){
var sibNode = node.nextSibling;
if (sibNode.nodeType == 1) {
return node;
}
if (sibNode.nextSibling) {
//递归调用
return getNextElement(node.nextSibling);
}
return null;
}
以上这篇原生JS实现几个常用DOM操作API实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
相信大家也都发现了，在网上关于JS的变量和作用域的文章有很多，但真正能讲清楚，能深入理解的文章很少。在阅读了很多人的文章以后，我决定综合起来，结合实际代码，希望能够以一个比较清楚完整的方式让大家真正理解。有需要的朋友们下面来一起看看吧。2016-10-10
javascript实现在网页任意处点左键弹出隐藏菜单的方法
这篇文章主要介绍了javascript实现在网页任意处点左键弹出隐藏菜单的方法,设计鼠标事件及css样式操作的相关技巧,需要的朋友可以参考下2015-05-05
整理Javascript函数学习笔记，之前一系列的文章是跟我学习Javascript，本文就是进一步学习Javascript函数，希望大家继续关注2015-12-12![[全兼容哦]--实用、简洁、炫酷的页面转入效果loing](//img.jbzj.com/images/xgimg/bcimg3.png)
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing...2007-05-05
下面小编就为大家带来一篇JS 对象(Object)和字符串(String)互转方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
Bootbox.js 是一个小型的 JavaScript 库用来创建简单的可编程对话框，基于 Twitter 的 Bootstrap 开发。今天我们就来研究下，如何使用bootbox插件来实现自定义弹窗。2015-04-04
Print.js是一个小的javascript库,可帮助您从网络上打印,这篇文章主要给大家介绍了关于前端printjs的使用实战案例,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-06-06
JavaScript返回当前会话cookie全部键值对照的方法
这篇文章主要介绍了JavaScript返回当前会话cookie全部键值对照的方法,涉及javascript操作cookie的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了JavaScript实现答题评分功能页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了JS实现图片放大缩小的方法,结合实例形式分析了javascript动态操作页面元素属性的相关技巧,需要的朋友可以参考下2017-02-02
![[全兼容哦]--实用、简洁、炫酷的页面转入效果loing](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论