首頁技術(shù)文章正文

JS獲取dom元素的方法有哪些？

更新時間:2021年06月17日14時53分來源:傳智教育瀏覽次數(shù):

好口碑IT培訓(xùn)

在開發(fā)中，想要操作頁面上的某個部分（如控制一個div元素的顯示或隱藏、修改div元素的內(nèi)容等），需要先獲取到該部分對應(yīng)的元素，再對其進(jìn)行操作。下面我們將分別介紹獲取元素的幾種常見方式。

1.根據(jù)id獲取元素

getElementById0方法是由document對象提供的用于查找元素的方法。該方法返回的是擁有指定id的元素，如果沒有找到指定id的元素則返回null, 如果存在多個指定id的元素則返回undefined。需要注意的是，JavaScript中嚴(yán)格區(qū)分大小寫，所以在書寫時一定要遵守書寫規(guī)范，否則程序會報錯。下面我們通過代碼演示document.getElementById('id')方法的使用，示例代碼如下。

<body>
    <div id="box">你好</div>
    <script>
        var Obox = document.getElementById('box');
        console.log(Obox);          //結(jié)果為: <div id="box">你好</div>
        console.log(typeof Obox);   //結(jié)果為: object
        console.dir(Obox);          //結(jié)果為: div#box
    </script>
</body>

在第2行定義了一個<div>標(biāo)簽，由于文檔是從上往下加載的，所以第3~8行的<script>標(biāo)簽和JavaScript代碼要寫在第2行代碼的下面，這樣才可以正確獲取到div元素。第4行代碼用于獲取HTML中id為box的元素，并賦值給變量Obox。需要注意的是，id值不能像CSS那樣加“#”，如getElementById("#box")是錯誤的。第7行的console.dir()方法用來在控制臺中查看對象的屬性和方法。

2.根據(jù)標(biāo)簽獲取元素

根據(jù)標(biāo)簽名獲取元素有兩種方式，分別是通過document對象獲取元素和通過element對象獲取元素，如下所示。

document.getElementsByTagName('標(biāo)簽名');
element.getElementsByTagName('標(biāo)簽名');

上述代碼中的element是元素對象的統(tǒng)稱。通過元素對象可以查找該元素的子元素或后代元素，實現(xiàn)局部查找元素的效果，而document對象是從整個文檔中查找元素。由于相同標(biāo)簽名的元素可能有多個，上述方法返回的不是單個元素對象，而是一個集合。這個集合是一個類數(shù)組對象，或稱為偽數(shù)組，它可以像數(shù)組一樣用索引來訪問元素，但不能使用push()等方法。使用Array.isArray()也可以證明它不是一個數(shù)組。下面我們通過具體代碼進(jìn)行演示。

<body>
    <ul>
        <li>蘋果</li><li>香蕉</li><li>西瓜</li><li>櫻桃</li>
    </ul>
<ol id="ol">
    <li>綠色</li><li>藍(lán)色</li><li>白色</li><li>紅色</li>
</ol>
<script>
    var lis = document.getElementsByTagName('li');  
    // 結(jié)果為: HTMLCollection(8) [li, li, li, li, li, li, li, li]   
    console.log(lis);
    // 查看集合中的索引為0的元素，結(jié)果為: <li>蘋果</li>               
    console.log(lis[0]);
    //遍歷集合中的所有元素
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    // 通過元素對象獲取元素
    var ol = document.getElementById('ol');
    //結(jié)果為: HTMLCollection(4) [li, li, li, li]
    console.log(ol.getElementsByTagNamel('li'));
</script>
</body>

上述代碼中，第2 ~ 4行代碼定義了一個<ul>無序列表，第5 ~ 7行代碼定義了一個id為ol的<ol>有序列表。第9 ~ 17 行代碼演示了document.getElementsByTagName()的用法，其中第9行代碼返回的是所有<li>標(biāo)簽元素對象的集合。需要注意的是，即使頁面中只有一個li元素，返回結(jié)果仍然是一個集合，如果頁面中沒有該元素，那么將會返回一個空的集合。通過第11行代碼的輸出結(jié)果可以看出，lis是一個包含8個li元素的集合對象，這個對象的構(gòu)造函數(shù)是HTMLolletiono第13行代碼返回了集合中的第1個上元素。第15~ 17行代碼采用遍歷的方式依次打印了集合里面的元素對象。第18 ~ 21行代碼演示了element. gelElementsByTagName()的用法，這里的element必須是單個元素對象，不能是一- 個集合，所以需要用document.getElementById0獲取元素，再調(diào)用方法。第21行代碼使用getElementsByTagName()去獲取ol中的所有l(wèi)i元素。

3.根據(jù)name獲取元素

通過name屬性來獲取元素應(yīng)使用document.getElementsByName()方法，一般用于獲取表單元素。name屬性的值不要求必須是唯一的，多個元素也可以有同樣的名字，如表單中的單選框和復(fù)選框。下面我們以復(fù)選框為例進(jìn)行代碼演示。

<body>
    <p>請選擇你最喜歡的水果(多選)</p>
    <label><input type="checkbox" name="fruit" value="蘋果">蘋果</label>
    <label><input type="checkbox" name="fruit" value="香蕉">香蕉</label>
    <label><input type="checkbox" name="fruit" value="西瓜">西瓜</label>
    <script>
        var fruits = document.getElementsByName('fruit');
        fruits[0].checked = true;
    </script>
</body>

在上述代碼中，getElementsByName()方法返回的是一個對象集合，使用索引獲取元素。fruits[0].checked為true，表示將fruits中的第1個元素的checked屬性值設(shè)置為true，表示將這一項勾選。瀏覽器的預(yù)覽效果如下圖所示。

1623912256283_name獲取元素.png

HTML.5新增的獲取方式

HTML5中為document對象新增了gelElentsByClassName()、 querySelector()和querSelectorAlI()方法，在使用時需要考慮到瀏覽器的兼容性問題。接下來我們就來講解這3種方法的具體使用情況。

1.根據(jù)類名獲取

document.getElementsByClassName()方法，用于通過類名來獲得某些元素集合。下面通過案例代碼進(jìn)行演示。

<body>
    <span class="one"> 英語</span> <span class="two">數(shù)學(xué)</span>
    <span class="one">語文</span> <span class="two"> 物理</span>
    <script>
        var Ospanl = document.getElementsByClassName('one');
        var Ospan2 = document.getElementsByClassName('two');
        Ospanl[0].style.fontWeight = 'bold';
        Ospan2[1].style.background = 'red';
    </script>
</body>

分別使用getElementsByClassName()方法獲取類名為one和two的集合，并分別存儲在Ospan1和Ospan2中。使用下標(biāo)的形式，查找并設(shè)置Ospan1數(shù)組中下標(biāo)為0所對應(yīng)的第1個元素的fontWeight屬性為bold，Ospan2 數(shù)組中下標(biāo)為1所對應(yīng)的第2個元素的background屬性為red。瀏覽器預(yù)覽效果如下圖所示。

1623912274277_根據(jù)類名獲取.png

2.querySelector()和querySelectorAlI()

querySelector()方法用于返回指定選擇器的第一個元素對象。querySelecorAlI()方法用于返回指定選擇器的所有元素對象集合。下面通過案例代碼進(jìn)行演示。

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首頁</li>
            <li>產(chǎn)品</li>
        </ul>
    </div>
    <script>
        var firstBox = document.querySelector('.box');
        console.log(firstBox);  // 獲取class為box的第1個div
        var nav = document.querySelector('#nav');
        console.log(nav);       // 獲取id為nav的第1個div
        var li = document.querySelector('li');
        console.log(li);        // 獲取匹配到的第1個li
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);    //獲取class為box的所有div
        var lis = document.querySelectorAll('li');
        console.log(lis);      //獲取匹配到的所有l(wèi)i
    </script>
</body>

從上述代碼可以看出，在利用querySelector0和querySelectorAl0方法獲取操作的無系時，直接書寫標(biāo)簽名或CSS選擇器名稱即可。根據(jù)類名獲取元素時在類名前面加上“.”，根據(jù)id獲取元素時在id前面加上“#”。最后的輸出結(jié)果如下圖所示。

1623912364399_通過CSS選擇器獲取元素.png