js提取指定网站内容(解析JavaScript中querySelector与getElementById方法的区别的相关内容吗)

　　js提取指定网站内容(解析JavaScript中querySelector与getElementById方法的区别的相关内容吗)

　　想知道解析JavaScript中querySelector和getElementById方法区别的相关内容吗？明天我会努力给大家讲解js中querySelector和getElementById方法的相关知识以及一些代码示例。欢迎阅读和纠正我。重点：js、querySelector、js、getElementById、methods，一起来学习吧。

　　1. 概览

　　看代码的时候发现querySelector()和querySelectorAll()基本上都是用来获取元素的，不知道为什么不使用getElementById()。

　　可能是因为我没用过这两个，所以我不知道为什么。

　　1.1 querySelector() 和 querySelectorAll() 的用法

　　querySelector() 方法

　　定义：querySelector()方法返回文档中匹配指定CSS选择器的元素；

　　注意：querySelector() 方法只返回与指定选择器匹配的第一个元素。如果需要返回所有元素，请改用 querySelectorAll() 方法；

　　语法：document.querySelector(CSS selectors);

　　参数值：字符串 必需。为匹配元素指定一个或多个 CSS 选择器。使用它们的id、class、type、attribute、attribute value等来选择元素。

　　对于多个选择器，用逗号分隔它们并返回匹配的元素。

　　返回值：匹配指定 CSS 选择器的第一个元素。如果未找到，则返回 null。如果指定了非法选择器，则会抛出 SYNTAX_ERR 异常。

　　querySelectorAll() 方法

　　定义：querySelectorAll()方法返回文档中所有匹配指定CSS选择器的元素，并返回一个NodeList对象；

　　NodeList 对象表示节点的集合。可以通过索引访问，索引值从0开始；

　　提示：可以通过NodeList对象的length属性获取与选择器匹配的元素属性，然后遍历所有元素，得到你想要的信息；

　　语法：elementList = document.querySelectorAll(selectors);

　　elementList 是一个静态的 NodeList 类型对象；

　　selectors 是一个字符串，收录一个或多个用逗号连接的 CSS 选择器；

　　参数值：字符串 必需。指定一个或多个与 CSS 选择器匹配的元素。可以使用id、class、type、attribute、attribute value等作为选择器来获取元素。

　　多个选择器之间用逗号 (,) 分隔。

　　返回值：一个 NodeList 对象，表示文档中与指定 CSS 选择器匹配的所有元素。

　　NodeList 是一个静态的 NodeList 类型对象。如果指定的选择器不合法，则会抛出 SYNTAX_ERR 异常。

　　1.2 getElement(s)Byxxxx的用法

　　getElementById() 方法

　　定义：getElementById() 方法可以返回对具有指定 ID 的第一个对象的引用。

　　如果没有指定ID的元素，则返回null；

　　如果有多个指定ID的元素，则返回第一个；

　　如果需要查找那些没有ID的元素，可以考虑使用querySelector()；通过 CSS 选择器；

　　语法：document.getElementById(elementID);

　　参数值：字符串必须。元素 ID 属性值。

　　返回值：指定元素对象ID的元素

　　getElementsByTagName() 方法

　　定义：getElementsByTagName()方法可以返回指定标签名的对象集合；

　　提醒：参数值“*”返回文档的所有元素；

　　语法：document.getElementsByTagName(tagname)

　　参数：String 必须获取元素的标签名称；

　　返回值：NodeList对象指定标签名的元素集合

　　getElementsByClassName() 方法

　　定义：getElementsByClassName() 方法将文档中具有指定类名的所有元素的集合作为 NodeList 对象返回。

　　NodeList 对象表示节点的有序列表。 NodeList对象可以通过节点列表中的节点索引号（索引号从0开始）访问表中的节点。

　　Tips：可以通过NodeList对象的length属性来判断指定类名的元素个数，循环遍历每个元素得到自己需要的元素。

　　语法：document.getElementsByClassName(classname)

　　参数：String 必须是要获取的元素类的名称。使用空格分隔多个类名，如“test demo”；

　　返回值：NodeList 对象，表示指定类名的元素集合。集合中元素的顺序按它们在代码中出现的顺序排序。

　　2. 区别 2.1 getElement(s)Byxxxx 获取动态集合，querySelector 获取静态集合

　　动态是指被选中的元素会随着文档的变化而变化，静态的不会被取出，与文档的变化无关。

　　示例 1：

　　

测试1

测试2

测试3

//获取到ul，为了之后动态的添加li

var ul = document.getElementById('box');

//获取到现有ul里面的li

var list = ul.getElementsByTagName('li');

for(var i =0; i < list.length; i++){

ul.appendChild(document.createElement('li')); //动态追加li

}

　　上面的代码会陷入死循环，i

　　因为第一次拿到里面的3个li后，每次ul中加入一个新元素，list都会更新它的值，取回ul中的所有li。

　　即getElement(s)Byxxxx获取的是一个动态集合，它会随着dom结构的变化而变化。

　　也就是每次调用list都会重新查询文档，导致死循环。

　　示例1修改：

　　修改for循环条件为i

　　

测试1

测试2

测试3

var ul = document.getElementById('box');

var list = ul.getElementsByTagName('li');

for(var i = 0; i < 4; i++){

ul.appendChild(document.createElement('li'));

}

console.log('list.length：',list.length);

　　

　　示例 2：

　　下面代码的静态集合体现在.querySelectorAll(‘li’)中，获取ul中的所有li后，无论后面动态添加多少li，都不会影响其参数。

　　

测试1

测试2

测试3

var ul = document.querySelector('ul');

var list = ul.querySelectorAll('li');

for(var i = 0; i < list.length; i++){

ul.appendChild(document.createElement('li'));

}

console.log('list.length：',list.length); //输出的结果仍然是 3，不是此时 li 的数量 6

　　

　　为什么要这样设计？

　　W3C 规范中明确定义了 querySelectorAll 方法：

　　querySelectorAll() 方法返回的 NodeList 对象必须是静态的（[DOM], section 8).

　　我们来看看Chrome上的情况：

　　document.querySelectorAll('a').toString(); // 返回“[对象节点列表]”

　　document.getElementsByTagName('a').toString(); // 返回“[object HTML采集]”

　　W3C中HTML采集的定义如下：

　　HTML采集 是一个节点列表。可以通过序数索引或节点的名称或 id 属性访问单个节点。注意：HTML DOM 中的集合被假定为活动的，这意味着它们会在底层文档更改时自动更新。

　　其实HTML采集和NodeList很相似，都是动态的元素集合，每次访问都需要查询文档。

　　区别：HTML采集属于文档对象模型HTML规范，NodeList属于文档对象模型核心规范。

　　这有点难理解，但看下面的例子会更容易：

　　

var ul = document.getElementsByTagName('ul')[0],

lis1 = ul.childNodes,

lis2 = ul.children;

console.log(lis1.toString(), lis1.length); // "[object NodeList]" 11

console.log(lis2.toString(), lis2.length); // "[object HTMLCollection]" 4

　　NodeList 对象将收录文档中的所有节点，例如 Element、Text、Comment 等；

　　HTML采集 对象将只收录文档中的 Element 节点；

　　另外，HTML采集对象比NodeList对象提供了更多的namedItem方法；

　　所以在浏览器中，querySelectorAll的返回值是一个静态的NodeList对象，而getElementsBy系列的返回值实际上是一个HTML采集对象。

　　2.2 接收到的参数不同

　　querySelectorAll方法接收到的参数是一个CSS选择器；

　　getElementsBy系列接收到的参数只能是一个className、tagName和name；

　　

var c1 = document.querySelectorAll('.b1 .c');

var c2 = document.getElementsByClassName('c');

var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('c');

　　注意：querySelectorAll接收的参数必须严格遵守CSS选择器规范

　　下面的写法会抛出异常（CSS选择器中的元素名、类和ID不能以数字开头）。

　　

try {

var e1 = document.getElementsByClassName('1a2b3c');

var e2 = document.querySelectorAll('.1a2b3c');

} catch (e) {

console.error(e.message);

}

console.log(e1 && e1[0].className);

console.log(e2 && e2[0].className);

　　2.3 浏览器兼容性不同

　　querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 支持；

　　getElementsBy系列，以最新添加规范中的getElementsByClassName为例，IE 9+、FF 3+​​、Safari 3.1+、Chrome、Opera 9+均支持；

　　2.4 querySelector属于W3C的Selectors API规范，getElementsBy系列属于W3C的DOM规范

　　参考文章（入侵与删除）

　　相关文章