原生js 查找所有拥有ID属性的元素

2024-11-10

关于原生JS获取class，ID等属性的一些封装

一.传统上获取是通过document.getElementById获取元素的ID属性,通过总结与学习总结一下获取元素class以及id属性的一些封装; 1.创建构造函数,这里面不需要多解释什么:(主要本人也是菜鸟一枚); 2.既然有了构造函数,那么我们只需要实例化进行使用,这里面我就不去描述了,直接进行JS库的封装: 下面是获取ID的方法: Ps:这里面应该不用介绍,通过判断返回指定的值: 3.ID是独一无二的所以使用起来比较不灵活,class类可以是多个或者重复使用,但是传统的JS并没有获取c

判断JS对象是否拥有某属性的方法举例

判断JS对象是否拥有某属性 JS是否拥有某属性的判断方法,这里提供两种方式,供大家参考. 1.in 运算符 var obj = {name:'jack'}; alert('name' in obj); // --> true alert('toString' in obj); // --> true 说明:无论是name,还是原形链上的toString,都能检测到返回true. 2.hasOwnProperty 方法 var obj = {name:'jack'}; obj.hasOwnPr

原生JS查找元素

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

原生js删除增加修改class属性

其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. HTML DOM classList 属性 classList属性的方法有: add(value) 添加类名,如果有则不添加 contains(value) 判断是否存在类名,返回Boolean值 remove(value) 从列表中删除类名 toggle(value) 切换类名:如果列表中存在则删除,否则添加根据红宝书的介绍,目前支持classList属性的浏览器有FireFo

原生JS和JQ窗口定位属性对照表

位置 javascript jquery 兼容性窗口位置离屏幕左偏移 var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; 浏览器兼容性问题可能不准确,建议用moveTo 窗口位置离屏幕上偏移 var topPos = (typeof window.screenTop == "number") ? window.screenTop : w

原生js通过最外层id获取下面指定的子元素

需求:在vue中使用v-for循环出来的元素,设置动态id,之后获取下面的所有textarea标签 template: <table cellpadding = 2 v-for="(item, index) in arrData" :key="index" cellspacing = 0 :id="'table' + index"> <thead> <tr> <th>本周计划</th>

判断JS对象是否拥有某属性

两种方式,但稍有区别 1.in 运算符

jQuery 查找带有某一属性的元素

$('*[name="username"]') 要在前面加个*表示所有的DOM,如果只是查找带有name属性的DOM的话则是这样的 $('*[name]')//其实, $('[name]')就可以了.$('[i18n]');$($('*[i18n]')[1]).html = $($('*[i18n]')[1]).attr('i18n');-------------------------------------------------------------------------

使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after

在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在HTML中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的.在使用伪元素的时候,会发现js并不真能直接控制它,这篇文章主要就介绍下如果间接的控制.修改css中伪元素的方法. 例如,我的样式表有以下规则,需要把伪元素的content内容进行修改 <style> p:after{content:'after伪元素'} </style> <p id="dome"

原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

一.前言相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,

原生JS中DOM节点相关API合集

节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写 Node.baseURI //返回当前网页的绝对路径 Node.ownerDocument //返回当前节点所在的顶层文档对象,即document Node.nextSibling //返回紧跟在当前节点

原生js获取宽高与jquery获取宽高的方法的关系

说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> 在原生JS中表示DOM对象:在JQuery中表示JQuery对象 Width -> obj.style.width OffsetWidth -> obj.offsetWidth $width -> obj.width() $innerWidth -> obj.innerWi

[attribute] 匹配包含给定属性的元素

描述: 查找所有含有 id 属性的 div 元素 HTML 代码: <div> <p>Hello!</p> </div> <div id="test2"></div> jQuery 代码: $("div[id]") 结果: [ <div id="test2"></div> ]

[Web 前端] 023 js 的流程控制、循环和元素的获取、操作

1. Javascript 流程控制用于"基于不同条件执行不同的动作"的场合 1.1 if 语句三种形式 // 第一种 if... // 第二种 if... else ... // 第三种 if... else if... else... 支持单分支双分支多分支注意 else if 中间必须要有空格对第二种形式举例 if(1+1=2){ console.log("true"); } else{ console.log("false"

HTML DOM对象的属性和方法介绍(原生JS方法)

HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口),它允许程序和脚本动态地访问和更新文档的内容,结构和样式. W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 HTML DOM 定义了所有 HTML 元

JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）

JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性二.设置元素的属性三.删除元素的属性一.获取元素的属性 1-原生JS 获取属性 .getAttribute("属性") 2-jquery 获取属性 .attr("属性") 示例代码 /*jq获取属性*/ var temp = $('.test1').attr('class'); /*js获取属性*/ var temp = document.getElem

JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件一丶DOM树 DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的:HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树.如下

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

基于css3新属性transform,实现3d立方体的旋转通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" clas

js原生设计模式——8单例模式之简约版属性样式方法库

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单例模式——在js中就是指的单个对象,可用于命名空间声明</title> </head><body> <div id="box"></div></body><

判断js对象是否拥有某一个属性的js代码

js对象是否拥有某一个属性的判断方法有很多. 本文分享一个简单的方法,如下: <script> /** * 判断js对象是否具有某属性 * by www.jbxue.com */ var obj = {name:'jack'}; obj.hasOwnProperty('name'); // --> true obj.hasOwnProperty('toString'); // --> false </script>

原生js 查找所有拥有ID属性的元素

热门专题