getElementByTagName与querySelectorAll的区别

最新推荐文章于 2021-05-20 11:16:09 发布
最新推荐文章于 2021-05-20 11:16:09 发布
阅读量390 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyizuishuai/article/details/109460678
版权

getElementByTagName与querySelectorAll的区别

通过getElementByTagName获取的是HTMLCollection是会更新的意思就是你如果后期加入getElementByTagName能选中的标签会进行更新获取的内容数组
而querySelectorAll获取的是NodeList节点:如何你后期添加到页面中的符合querySelectorAll能选中的dom元素标签,也不会更新结果数组。

点语法和getAttribute(“target”); setAttribute(“type”,“button”)的区别

用setAttribute标签添加的属性会放到html标签上,而用点语法添加的属性会放在dom节点上
getAttribute对应jQuery里面的attr方法
而点语法对应的是jQuery里面的props方法
使用setAttribute方法添加的自定义属性是添加在html标签上的,需要用配套的方法getAttribute方法去拿才能拿的到,用点语法去获取会出现undefined的情况在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
用点语法添加自定义属性,无法通过getAttribute去获取会报null的错误,因为setAttribute和getAttribute都是操作html标签上的方法,而点语法是操作dom节点的方法添加属性的，
但是如果用setAttribute或者点语法添加的是公共属性比如className value值那么用getAttribute或者用点语法两种方法都能获取到属性的值

HumanQualityMan
关注
专栏目录
querySelector 和 getElementsByTagName区别
chuidai7370的博客
12-19 894
css + js 的一些小知识，本整理给自己巩固，有缘者观之，大牛绕道. document.getElementById('idName');通过元素id名, document.getElementByTagName('TagName');通过标签名.返回的是一个对象数组（准确的说是...
querySelectorAll和getElementsByTagName获取元素的区别
BabyGod_Cheney的博客
04-06 308
querySelectorAll和getElementsByTagName获取元素的区别 1、document.querySelectorAll() 根据选择器获取所有匹配到的元素 返回的是NodeList，NodeList 不是一个数组，是一个类似数组的对象(Like Array Object)。虽然 NodeList 不是一个数组，但是可以使用 forEach() 来迭代。它有length...
querySelector与getElementBy等的区别
weixin_30535167的博客
12-15 61
获取元素DOM对象有很多种方法，以前一直在用getElementById和getElementsByTagName等，现在对这些方法和querySelector做一个总结． 常见的获取元素的方法有3种，分别是通过元素ID、通过标签名字和通过类名字来获取。 DOM提供了一个名为getElementById的方法，这个方法将返回一个与之对应id属性的节点对象，它是document对象特有的函数，只能通...
querySelector系列和getElement系列区别
橙煦媛的博客
04-01 1768
querySelector系列属于 W3C 中的 Selectors API 规范 querySeletor()返回一个对象 querySelectorAll()返回一个集合（NodeList） 参数均为：css selector字符串获取页面I属性D为test的元素： document.querySelector("#test"); document.querySelect
querySelectorAll( )和getElementsByTagName( )
追随大神的脚步
05-11 950
一. 区别 querySelectorAll()和getElementsByTagName()两者的主要区别就是返回值。 前者返回的是NodeList集合，是一个静态集合 后者返回的是HTMLCollection集合，是一个动态集合 二. NodeList集合 / HTMLCollection集合 （1）NodeList集合是由Node.childNodes和document.querySelectorAll()返回的。 NodeList并不是都是静态的，也就是说Node.childNodes返回的是动态的
getElementByTagName与querySelectorAll
weixin_43750811的博客
12-30 336
区别1 getElementByTagName： 这种方式获取到的类数组，无法通过 forEach 进行遍历（可以通过for循环） querySelectorAll： 可以通过forEach 进行遍历。 区别2 通过 getElementByTagName 获取这种方式获取到的类数组是动态的；而 querySelectorAll 这种方式获取到的是静态的（但是如果是 querySelectorAl...
html中报错cannot read propertise of null (reading 'getElementByTagName‘)。如何修改正确
06-06
最后，如果你确定元素存在且标签名正确，那么你也可以考虑使用其他 DOM 方法来获取元素，例如 `getElementById()` 或者 `querySelectorAll()`。这些方法也可以用来获取元素，并且拥有更强的灵活性和兼容性。
IE中getElementsByTagName无法获取元素BUG
03-20
2. **使用`querySelectorAll`代替**：`querySelectorAll`在所有现代浏览器以及IE8及以上版本中都可用，它可以替代`getElementsByTagName`，并且返回的是NodeList，而不是Live NodeList，这可能避免一些问题。...
获取input节点的正确方法
AS_Tammy的博客
01-08 4178
获取 input 节点的正确方法 （） <form class="file" name="upload"> <input id="file" name="file" /> </form>   A document.querySelectorAll('file')[0] B document.getElementById('fi
浏览器渲染基本原理：关键渲染路径与阻塞渲染
Caroline_Yang的博客
06-03 357
关键渲染路径与阻塞渲染 在浏览器拿到HTML、CSS、JS等外部资源到渲染出页面的过程，有一个重要的概念关键渲染路径（Critical Rendering Path）。例如为了保障首屏内容的最快速显示，通常会提到一个渐进式页面渲染，但是为了渐进式页面渲染，就需要做资源的拆分，那么以什么粒度拆分、要不要拆分，不同页面、不同场景策略不同。具体方案的确定既要考虑体验问题，也要考虑工程问题。了解原理可以让我们更好的优化关键渲染路径，从而获得更好的用户体验。 现代浏览器总是并行加载资源，例如，当 HTML 解析器
querySelectorAll()和getElementsByTagName()
qq_40155654的博客
08-15 408
getElementsByTagName() 方法返回对应标签名的元素的一个动态集合, 只要document发生变化,就会自动更新对应的元素。 因此, 下面的代码实际上是一个死循环: // XXX 实际中请注意... // 适当的中间变量是一个好习惯 var divs = document.getElementsByTagName("div"); var i=0; while(i <...
querySelectorAll 和 getElementByTagName()两种方法使用上的区别
Zero_Zhen10的博客
10-20 471
// var ul = document.getElementsByTagName('ul') // var lis = ul.getElementsByTagName('li') // for (var i = 0;i<lis.length;i++) { // var li = document.createElement('li') // ul.appendChild(li) // }动态获取 会造成死循环 lis.length...
getElementById和getElementByTagName的区别
qq_37493515的博客
05-01 1357
在原生js中获取元素的方法有很多，那么今天就重点说一下getElementById和getElementByTagName的区别： 1、getElementById前面必须是document；而getElementByTagName前面除了是document也可以是其他的元素；先来看一下简单的html代码 <ul> <li></li> <l...
querySelectorAll点击获取当前元素改变其属性
yuyu_2019的博客
05-20 2099
方法 描述 querySelector 获取某一元素 querySelectorAll 获取所有元素 e.currentTarget 获取当前对象的HTML标签 getAttribute 获取当前元素属性 setAttribute 设置当前元素属性 classList.add 添加class classList.remove 移除class var path = d.querySelectorAll('path') for (var i = 0; i < ...
getElementBy....（获取元素）
哈哈
05-02 4842
一、getElementById <div id="time"> 2021-5-2 </div> <script> var timer = document.getElementById('time'); console.log(timer);//得到id为time的div console.dir(timer); // 通过dir获取timer对象的属性和方法 console.log(typeof timer);// timer类型的
JavaScript querySelector()、querySelectorAll()方法介绍
热门推荐
路虽远，行则必至！
06-26 4万+
一、getElementsByClassName()方法不足之处 在之前的学习中，我们了解到，可以根据元素的 class 属性值查询一组元素节点对象，即：getElementsByClassName()，但是这个方法不支持 IE8 及以下的浏览器。 在我们的实际开发中，会特别的受限，为了兼容 IE8 及以下的浏览器，我们可以采用一种新的方法，这种方法在我们的实际开发中也很常用，因此我们要熟练掌握...
js中getElementBy**·
CoderLam的博客
10-15 1万+
错误示范：       点击后更改按钮颜色，getElementById，自己写了一个只有一个div的页面getElementsByTagName，.style.border=''缺报错，     getElementsByTagName() 方法可返回带有指定标签名的对象的集合 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&g...
getElementByTagName 和 getElementByName的区别
最新发布
06-07
getElementByTagName和getElementByName是两个不同的方法，用于访问HTML文档中的元素。 getElementsByTagName方法通过元素...可以看出，两者的区别在于获取元素的方式不同，一个是通过标签名称，一个是通过name属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值