JavaScript获取元素的方法-CSDN博客

一、获取元素的所有方法

通过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>
复制代码