getElementsByTagName 与 $(élement)的区别

js 的 getElementsByTagName 和 jq的 $(élement) 都是取得dom中的元素,但它们也有一些区别,贴上代码:

var el = document.getElementsByTagName(‘p‘);
var p = ‘<p class="aa"></p>‘;
$(‘body‘).append(p);
console.log(el.length)   // p标签长度+1;

var el = $(‘p‘);
var p = ‘<p class="aa"></p>‘;
$(‘body‘).append(p);
console.log(el.length)   //p标签长度为dom原先长度

这样,可以看为,当dom添加元素时,getElementsByTagName集合自动更新元素数量,而$(élement)仍为原先元素集合的快照。

时间: 2024-09-29 00:45:44

getElementsByTagName 与 $(élement)的区别的相关文章

getElementById() getElementsByTagName() getElementsByClassName() querySlector() querySlectorAll()区别

1. getElementById() getElementsByTagName()  javascript原生的方法,这两个不会有兼容性问题. 2. getElementsByClassName()是HTML5的DOM API ,IE8以下不支持(不支持HTML5的浏览器). 对于现代浏览器,document.getElementsByClassName( 'wrap' )获取的是DOM中所有class为wrap的元素 在IE8以下,可以模拟实现这种效果 function getElement

认识DOM(上)

认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title

js操作dom对象

属性: 1Attributes     存储节点的属性列表(只读) 2childNodes     存储节点的子节点列表(只读) 3dataType     返回此节点的数据类型 4Definition     以DTD或XML模式给出的节点的定义(只读) 5Doctype     指定文档类型节点(只读) 6documentElement     返回文档的根元素(可读写) 7firstChild     返回当前节点的第一个子节点(只读) 8Implementation     返回XMLD

2. JS基础第二课:

1. getElementsByTagName("")与getElementById("")的区别: 2. 获取页面中唯一元素的方法: 总结: 至此,已经有三种获取元素的方法,分别是: 1) 2) 3) 3. for循环: 4. for循环影响性能的地方: 1) 2) 5. for循环动态生成n个元素,且规定它们的坐标(位置): 6. cssText 7. 点击一次自动生成新闻,再点击页面不变,思路:

JavaScript 进阶篇的学习~

---恢复内容开始--- 让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已.我们还需使用JavaScript增加行为,为网页添加动态效果.准备好,让JavaScript带你进入新境界吧! JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等

JavaScript进阶--慕课网学习笔记

                     JAVASCRIPT-进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字母.下划线.美元符号和数字.如下: 正确: mysum _mychar $numa1 错误: 6num  //开头不能用数字 %sum //开头不能用除(_ $)外特殊符号,如(%  + /等) sum+num //开头中间不能使用除(_ $)外特殊符号,如(%  + /等) 2.变量名区分大小写,

认识DOM和一些方法

认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合,DOM节点有: 1. 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2. 文本节点:向用户展示的内容,如<li>...</li>中的Java

JavaScript学习笔记九

本文根据慕课网课程<JavaScript进阶>学习整理 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合,DOM节点有: 1. 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2. 文本节点:向用户展示的

区别getElementByID,getElementsByName,getElementsByTagName

以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人.小孩.老人)等. 1. ID 是一个人的身份证号码,是唯一的.所以通过getElementById获取的是指定的一个人. 2. Name 是他的名字,可以重复.所以通过getElementsByName获取名字相同的人集合. 3. TagName可看似某类,getElementsByTagName获取相同类的人集合.如获取小孩这类人,getElementsByTagName("小孩"). 把上面的例子转换到HTML中,如下: