原生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 数据存储和DOM编程
数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员. ·要理解变量的访问速度,就要理解作用域.由于局部变量处于作用域的起始位置,因此访问速度比访问跨域作用域变量(即除起始位置之外的外层作用域变量)更快.即变量处在作用域的位置越深,访问速度越慢.这也就说明,访问全局变量的速度是最慢的. 总的来说,字面量和局部变量的访问速度快于数组和对象成员的访问速度. 因此,常见的一些提高数据访问速度的方法有: ①避免使用wi
-
如何用js判断dom是否有存在某class的值
例如: <html class="no-js"> <head> </head> <body> </body> </html> 判断html节点的class是否有no-js. 1.jquery的实现方式 $("html").hasClass('no-js'); jquery源码的实现方式: var rclass = /[\t\r\n\f]/g; jQuery.fn.extend({ hasClas
-
javascript DOM的详解及实例代码
javascript DOM 总结 一直以为DOM(文档对象模型)是JS中最简单的一部分.不可否认,它确实很简单,因为DOM的思维模式有点固定,只需要简单地记住一些固定的方法,所以DOM可以说是所有js(这里指的是客户端的js)入门的起手点. 最近我在做一些有用到DOM的练习时,发现自己的DOM知识非常零散(一直以为掌握的很好),可能有很多朋友都觉得,DOM嘛,也就调用调用几个方法,或者我直接使用jQuery,根本不用考虑DOM的细节.是,这也没错,jQuery对DOM的封装可谓前无古人,但是正
-
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
本文实例分析了javascript事件捕获机制.分享给大家供大家参考,具体如下: 1.什么是事件冒泡? 在排序算法中,我们学过冒泡排序法,所谓冒泡就是让底层的东西浮出水面,对于事件冒泡也同样是如此, 下面我们来看一个例子来说明什么是事件冒泡. <div> <button>测试</button> </div> <script> $("div").bind("click",function(){alert(&q
-
Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l
-
js常用DOM方法详解
介绍几个js DOM的常用方法 获取元素节点 getElementById getElementsByTagName getElementsByClassName 先写一个简单的网页做测试: /* test.html */ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <
-
原生JS和jQuery操作DOM对比总结
一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 `document.createTextNode("Text Content"); 通常创建文本节点和创建元素节点配合使用,比如: var textEl = document.createTextNode("He
-
详解Javascript中DOM的范围
前言 为了让开发人员更方便地控制页面,DOM定义了"范围"(range)接口.通过范围可以选择文档中的一个区域,而不必考虑节点的界限(选择在后台完成,对用户是不可见的).在常规的DOM操作不能更有效地修改文挡时,使用范围往往可以达到目的.本文将详细介绍DOM范围,下面来一起看看吧. 创建范围 Document类型中定义了createRange()方法.在兼容DOM的浏览器中,这个方法属于document对象.使用hasFeature()或者直接检测该方法,都可以确定浏览器是否支持范围
-
JS访问DOM节点方法详解
本文实例讲述了JS访问DOM节点方法.分享给大家供大家参考,具体如下: 查找并访问节点 你可通过若干种方法来查找您希望操作的元素: 通过使用 getElementById() 和 getElementsByTagName() 方法 通过使用一个元素节点的 parentNode.firstChild 以及 lastChild 属性 getElementById() 和 getElementsByTagName() getElementById() 和 getElementsByTagName()
-
原生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
-
jQuery原理系列-常用Dom操作详解
1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply修正this 的指向. if (element.addEventListener) { element.addEventListener(type, handler, useCapture); } else { if (element.attachEvent) { element.attachEve
-
jQuery中DOM操作原则实例分析
本文实例讲述了jQuery中DOM操作原则.分享给大家供大家参考,具体如下: 一丶Get and Set in One(读写一体) 原则 为了更加易于使用,jQuery提供了简洁的DOM操作API,其方法往往是读写一体的.也就是说,某个方法既可用于读取操作,也可用于设置操作.如果没有为其传入表示值的参数,则表示获取操作,将返回获取到的数据:如果为其传入了表示值的参数,则表示设置操作,它将设置DOM元素指定属性的值. 示例代码 // 没有传入value参数,返回第一个匹配元素的value元素 va
-
原生js实现仿window10系统日历效果的实例
舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒,年月日星期,动态生成选择年的select,月的select,然后根据你所选中的年月,显示该年月对应的这一个月的日期. 点击上一个月,下一个月按钮,在下拉列表中显示对应的年月. <!DOCTYPE html> <html lang="en"> <head>
-
原生js实现简单的链式操作
在jQuery中,一个jq对象能一直连续调用各种方法,因为jQuery把这些方法挂载他自定义的一个对象中,但是使用原生的js获取的DOM对象,只能使用一次addEventLisenter方法添加事件,如果要接着添加事件,还得再调用addEventLisenter. var area = document.querySelector('.area'); area.addEventListener('mouseenter', function(){ console.log( 'mouse enter
-
原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成动作并进行判断: 首先po一下代码: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie
-
原生js实现的金山打字小游戏（实例代码详解）
首先先来看一下效果图 如果感兴趣的就来看一下Js源码吧 //计分板 var board = { dom: document.getElementById("score"), maxLost: 3, //最大丢失量 lost: 0, //当前丢失了多少个 score: 0, //当前分数 render: function() { //显示 this.dom.innerHTML = "<p>得分:" + this.score + "</p&g
-
原生js实现数字字母混合验证码的简单实例
本文实例讲述了原生js实现数字字母混合验证码的全部代码,重点是注释很详细,便于大家理解,特分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> <style type="text/css"> body, div { margin:
-
C#封装的常用文件操作类实例
本文实例讲述了C#封装的常用文件操作类.分享给大家供大家参考.具体如下: 这个C#类封装了我们经常能用到的文件操作方法,包括读写文件.获取文件扩展名.复制文件.追加内容到文件.删除文件.移动文件.创建目录.递归删除文件及目录.列目录.列文件等,不可多得. using System; using System.Text; using System.Web; using System.IO; namespace DotNet.Utilities { public class FileOperate
-
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
本文实例总结了PHP常用字符串操作函数.分享给大家供大家参考,具体如下: /*常用的字符串输出函数 * * echo() 输出字符串 * print() 输出一个或多个字符串 * die() 输出一条信息,并退出当前脚本 * printf() 输出格式化字符串 * sprintf() 把格式化的字符串写入到一个变量中 * */ //ucfirst //将字符串中的首字母转换为大写 $str="string"; echo ucfirst($str); echo "<hr&