在针对element的操作里,查找附近的元素是一个不可少的过程,比如在实现tab时,其中的一个div增加了“on”class,其他的去除“on”class.如果用jquery的朋友就肯定不会陌生siblings,这个非常的好用,本文针对这个方法的实现进行分析和解剖. 身为一个菜鸟,我们很容易忽视了element的previousSibling 和 nextSibling 属性,previousSibling 属性可返回某节点之前紧跟的节点(处于同一树层级),nextSibling 属性可返回某个…

刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定的元素封装成DOM对象): (1)通过元素ID获取:document.getElementById(),示例如下: 我们在控制台输出,结果如下: 可以看到我们获取到了id为div1的元素代码了 (2)通过元素标签名获取:document.getElementsByTagName(),它以数组的形式返…

今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. 其次是指定ID 最后只能全页面进行匹配class,不过比较节省的性能的是,在指定class名称的时候,同时传入HTML标签的类型,用于节省遍历的范围! 因为水平有限,目前也只能写成这种,真的好好奇JQ的选择器是怎么去匹配DOM的,如果有大神看到这篇文章,请不要吝啬施教... 下面贴代码: func…

JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 获取html的方法(document.documentElement) document.documentElement是专门获取htm…

这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.screen.width > 1023) ? true : false; } /* * formatMoney(s,type) * 功能:金额按千位逗号分隔 * 参数:s,需要格式化的金额数值. * 参数:type,判断格式化后的金额是否需要小数位. * 返回:返回格式化后的数值字符串. */ formatM…

jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1>加油</h1>') 2.jQ代码 .html('加油')//会覆盖 A.append('<p>加油</p>')//不会覆盖,添加到A元素的最后面 A.prepend('<p>加油</p>')//不会覆盖,添加到A元素的最前面 A.before(…

getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=document.getElementById('box'); // 获取元素 alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离 alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离…

//js var a = document.querySelector('[data-word=a]') console.log(a) html <dl class="find-car-content"> <dt data-word=a>a</dt> <dd>奥迪</dd> <dd>奥迪</dd> <dd>奥迪</dd> <dd>奥迪</dd> <d…

var table = document.body.querySelector('.mui-table-view'); while(table.hasChildNodes()) //当table下还存在子节点时 循环继续 { table.removeChild(table.firstChild); }…

原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasClass,toggleClass:原生js添加删除class 原生js添加删除class 代码如下: var dom = { /** 功能说明:匹配元素是否含有指定class * @param el 指定的DOM元素 * @param className 匹配的class名 * */ hasClas…