JavaScript获取元素的方法
2019-02-12 本文已影响0人
追逐_e6cf
一、获取元素的所有方法
- 通过id直接获取（极其不推荐），但是在调试代码的时候非常好用。
- 通过document直接获取，包括head、title、body。
- 通过类名获取，
getElementsByClassName获取的是HTMLCollection，是一个类数组，IE8以下不兼容。 - 通过标签名获取，
getElementsByTagName获取的是HTMLCollection，也是一个类数组。 - 通过name获取，
getElementsByName获取的是NodeList节点列表，也是一个类数组。 - 即便只有一个元素，也要通过[0]获取。
- 对于类名/标签名/name，我们可以先确定选择范围，再进行下一步选择。
- querySelector，IE7开始，微软率先提出了querySelector HTML5的标准，可以支持通过css3选择器的方式选择元素，querySelector如果选取的是一组元素的话，只会获得第一个。性能极低。
- querySelectorAll获取全部对象集合，是一个NodeList类数组，如果是单独的元素，也是放在类数组当中。
var oBox = document.getElementById("box");
console.dir(oBox);//打印对象详情
console.log(box);//通过id直接获取
console.log(document.head);
document.head.innerHTML += "<meta>";
console.log(document.title);
document.title = "哈喽";
console.log(document.body);
var aBox = document.getElementsByClassName('mybox');
console.log(aBox[0].innerHTML = "123");
var aBox = document.getElementsByTagName('div');
console.log(aBox[0]);
var aBox = document.getElementsByName('name');
console.log(aBox);
var myTxt= document.getElementsByTagName('ul')[1].getElementsByTagName('li')[1].innerHTML;
console.log(myTxt);
var myTxt = document.querySelector('.season>li:nth-child(2)').innerHTML;
console.log(myTxt);
二、动态获取与静态获取
- 静态获取：对于getElementById获取到元素之后，元素不会重新获取，可以对其进行随意更改。querySelector、querySelectorAll都为静态获取。
- 动态获取：对于getElementsByTagName、getElementsByClassName、getElementsByName，元素是动态获取的。
- 简单的说，静态获取页面的内容只有页面原本的内容，若是通过js动态添加了一个标签，静态获取的方式是获取不到的，只能通过动态获取的方法。
var oBox = document.getElementById('box');
oBox.id = 'myBox';
oBox.innerHTML = '111';//报错，页面中找不到id为box的元素
var aBox = document.getElementsByClassName('mybox');
aBox[0].className = 'newBox';
aBox[0].innerHTML = '222';
var oUl = document.getElementById('myul');
var oBtn = document.getElementById('btn');
// var oLis = document.getElementsByClassName('lis');
var oLis = document.querySelectorAll('.lis');
oBtn.onclick = function(){
oUl.innerHTML += "<li class='lis'>6</li>";
console.log(oLis.length);
}
三、伪元素的获取
- ::first-letter 特殊样式加到首字母。
- ::first-line 特殊样式加到首行。
- ::before 在元素之前插入。
- ::after 在元素之后插入。
- 伪元素是css渲染的，并不存在于document当中，无法获取。只能通过getComputedStyle()，括号里传入对象和伪类，然后获取样式采用getComputedStyle(1, 2)[attr]这样的方式，若没有伪类写null或者不写。
<style>
#box::after{
content: '456';
display: block;
}
</style>
<body>
<div id="box">123</div>
</body>
<script>
var oBox = document.getElementById('box');
// var oAf = document.querySelector('#box::after');//获取不到
// var oAf = document.querySelector('#box:after');//获取不到
console.log(getComputedStyle(oBox,':after')['content']);
</script>
