querySelector和querySelectorAll
是html5新引入的api,但是比docmentsByClassName还要早出
兼容性
- querySelector和querySelectorAll： IE6及以下不支持
- getElementsByClassName:IE8及以下不支持
- getElementsByName: 全部；浏览器都支持
BUG
ie8及以下getElementById不区分大小，并且若有元素的属性name与getElementById的参数相同，也会被匹配到。
参数
getElementBy只能单一的使用id属性、标签名、name属性、class属性来获取元素
querySelectorAll通过css选择器来获取元素
document.getElementById('div1')
document.getElementsByClassName('div1')
document.getElementsByTagName('div')
document.getElementsByName('div')
querySelectorAll('#id')
querySelectorAll('tagName')
querySelectorAll('.className')
querySelectorAll("parentTag.childTag");
返回的类型
例：
<body>
<div></div>
<div></div>
<script>
let ByTagList = document.getElementsByTagName('div'),
QSTagList = document.querySelectorAll('div');
let oBody = document.body,
oDiv = document.createElement('div');
oBody.appendChild(oDiv);
console.log('getElementsByTagName:' , ByTagList);
console.log('querySelectorAll:', QSTagList);
</script>
</body>
结果：
-
getElementBy返回一个动态的HTML集合HTMLCollection。
-
querySelectorAll返回一个静态的NodeList。
-
返回值都是类数组
HTMLCollection和NodeList
HTMLCollection
是html元素节点的集合，节点可通过索引，id,name进行访问，并且是实时的
w3c的定义是An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node's name or id attributes. Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.
特性：
length: 返回集合当中元素的数量
方法：
- HTMLCollection.item(i)：
通过索引（深度优先）进行访问，参数要获取的节点的索引，从0开始，如索引的位置存在节点，则返回节点，无则null。
等价写法: dom[i],但dom[i]如果索引没有值返回的是undefined,而不是null
<body>
<div id="div1"></div>
<div id="div2"></div>
<script>
let ByTagList = document.getElementsByTagName('div');
let oBody = document.body,
oDiv = document.createElement('div');
oBody.appendChild(oDiv);
console.log('第一个', ByTagList.item(0))
console.log('第二个', ByTagList.item(1))
console.log('第三个', ByTagList.item(2))
console.log('第四个', ByTagList.item(3))
console.log('等价第一个写法', ByTagList[0])
console.log('等价第四个写法', ByTagList[3])
</script>
</body>
结果：
- HTMLCollection.namedItem(parameters) 通过传入的parameters进行搜索，先匹配id值为parameters的节点,如找不到，就匹配name值为parameters的节点，如果都没有，返回null,注：只能匹配标签特性含有name的属性
<body>
<div id="div1" name="div3"></div>
<div name="div2"></div>
<ul id="ui" name="ui"></ul>
<script>
let ByTagList = document.getElementsByTagName('div');
let oBody = document.body,
oDiv = document.createElement('div');
oBody.appendChild(oDiv);
console.log('第一个', ByTagList.namedItem('div1'))
console.log('第二个', ByTagList.namedItem('div2'))
console.log('第三个', ByTagList.namedItem('div3'))
console.log('第四个', ByTagList.namedItem('ul')) //ul标签没有name特性，所以匹配不到
console.log('第四个', ByTagList.namedItem('div'))
</script>
</body>
结果：
NodeList
是节点的集合 分两种：live和static; live是由Node.childNodes返回,实时变化 static是由document.querySelectorAll，静态不变化,相当于一个数据快照
const parent = document.getElementById('parent');
let child_nodes = parent.childNodes;
console.log(child_nodes,'元素个数' + child_nodes.length + '个');
parent.appendChild(document.createElement('div'));
console.log(child_nodes, '元素个数' + child_nodes.length + '个');
结果
特性和方法
从原型上看，方法有5个，特性一个， 方法分别是entries、forEach、item、keys、values。
特性:length
方法:
-
NodeList.item
与HTMLCollection.item相同，参上
NodeList.keys:返回一个迭代器，用于遍历这个对象中包含的所有的键
NodeList.values:返回一个迭代器，用于遍历这个对象中包含的所有的值
NodeList.entries:返回一个迭代器，允许遍历此对象中包含的所有键和值
NodeList.forEach：类似数组的forEach
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<script>
let ByTagList = document.querySelectorAll('div');
let oBody = document.body,
oDiv = document.createElement('div');
oBody.appendChild(oDiv);
for(let key of ByTagList.values()){
console.log(key);
}
for(let key of ByTagList.keys()){
console.log(key);
}
for(let key of ByTagList.entries()){
console.log(key);
}
ByTagList.forEach((elem, idx, arr) => {
console.log(elem, idx, arr);
}, undefined)
</script>
</body>
结果：
- values
- keys
- entries
forEach
