这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇原生 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
- } //用法: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 实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0530/328367.html