访问元素节点

最新推荐文章于 2022-01-30 22:47:34 发布

小豪boy

最新推荐文章于 2022-01-30 22:47:34 发布

阅读量762

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript学习笔记文章标签： html html5 javascript

本文链接：https://blog.youkuaiyun.com/qq_34771938/article/details/120317095

JavaScript学习笔记专栏收录该内容

40 篇文章

订阅专栏

所谓“访问”元素节点，就是指“得到”、“获取”页面上的元素节点。
对节点进行操作，第一步就是要得到它。
访问元素节点主要依靠document对象。

认识document对象

document对象是DOM中最重要的东西，几乎所有DOM的功能都封装在了document对象中。
document对象也表示整个HTML文档，它是DOM节点树的根。
document对象的nodeType属性值是9。

访问元素节点的常用方法

方法	功能	兼容性
document.getElementById()	通过id得到元素	IE6
document.getElementsByTagName()	通过标签名得到元素数组	IE6
document.getElementsByClassName()	通过类名得到元素数组	IE9
document.querySelector()	通过选择器得到元素	IE8部分兼容、 IE9完全兼容
document.querySelectorAll()	通过选择器得到元素数组	IE8部分兼容、 IE9完全兼容

getElementById()

document.getElementById()功能是通过id得到元素节点。
注意事项：

如果页面上有相同id的元素，则只能得到第一个。
不管元素藏的位置有多深，都能通过id把它找到。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">我是一个盒子</div>
    <div id="box">
        我是二个盒子
        <p id="para">我是一个段落</p>
        <p id="para">我是二个段落</p>
    </div>
    <script>
        // 参数就是元素节点的id ，注意不要写#号
        var oBox = document.getElementById('box');
        var oPara = document.getElementById('para');
        console.log(oBox);
        console.log(oPara);
    </script>
</body>

</html>

getElementsByTagName()

getElementsByTagName()方法的功能是通过标签名得到节点数组。
注意事项：

即使页面上只有一个指定标签名的节点，也将得到长度为1的数组。
数组方便遍历，从而可以批量操控元素节点。
任何一个节点元素也可以调用getElementsByTagName()方法，从而得到其内部的某种类的元素节点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <p>盒子一，段落一</p>
        <p>盒子一，段落二</p>
        <p>盒子一，段落三</p>
    </div>
    <div>
        <p>盒子二，段落一</p>
    </div>

    <script>
        // 获得div的节点数组
        var oBoxL = document.getElementsByTagName('div');
        console.log('获得div的节点数组');
        console.log(oBoxL);
        // 第一个div中的p节点数组
        var oPL1 = oBoxL[0].getElementsByTagName('p');
        console.log('第一个div中的p节点数组');
        console.log(oPL1);
        // 第二个div中的p节点数组
        var oPL2 = oBoxL[1].getElementsByTagName('p');
        console.log('第二个div中的p节点数组');
        console.log(oPL2);
    </script>
</body>

</html>

getElementsByClassName()

getElementsByClassName()方法的功能是通过类名得到节点数组。
注意事项：

getElementsByClassName()方法从IE9开始兼容。

某个节点元素也可以调用getElementsByClassName()方法，从而得到其内部的某类名的元素节点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <p class="para">盒子一，段落一</p>
        <p class="para">盒子一，段落二</p>
        <p class="para">盒子一，段落三</p>
    </div>
    <div class="box">
        <p class="para">盒子二，段落一</p>
    </div>

    <script>
        // 获得类名为box的节点数组
        var oBoxL = document.getElementsByClassName('box');
        console.log('获得类名为box的节点数组');
        console.log(oBoxL);
        // 第一个box中的类名为para的节点数组
        var oPL1 = oBoxL[0].getElementsByClassName('para');
        console.log('第一个box中的类名为para的节点数组');
        console.log(oPL1);
        // 第二个box中的类名为para的节点数组
        var oPL2 = oBoxL[1].getElementsByClassName('para');
        console.log('第二个box中的类名为para的节点数组');
        console.log(oPL2);
    </script>
</body>

</html>

querySelector()

querySelector()方法的功能是通过选择器得到元素。
注意事项：

querySelector()方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素。
querySelector()方法从IE8开始兼容，但从IE9开始支持CSS3的选择器，如:nth-child()等CSS3选择器形式都支持良好。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box1">
        <p class="para">盒子一，段落一</p>
        <p class="para">盒子一，段落二</p>
        <p class="para">盒子一，段落三</p>
    </div>
    <div class="box2">
        <p class="para">盒子二，段落一</p>
    </div>

    <script>
        // 获得类名为box1的div元素
        var oBox1 = document.querySelector('div.box1');
        console.log('获得类名为box1的div元素');
        console.log(oBox1);
        // 获得box1中类名为para的p元素
        // 虽然有多个符合选择器的p元素
        // 但是只会得到第一个复合条件的元素。
        var oPL1 = oBox1.querySelector('p.para');
        console.log('获得box1中类名为para的p元素');
        console.log(oPL1);
    </script>
</body>

</html>

querySelectorAll()

querySelectorAll()方法的功能是通过选择器得到元素数组。
即使页面上只有一个符合选择器的节点，也将得到长度为1的数组。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box1">
        <p class="para">盒子一，段落一</p>
        <p class="para">盒子一，段落二</p>
        <p class="para">盒子一，段落三</p>
    </div>
    <div class="box2">
        <p class="para">盒子二，段落一</p>
    </div>

    <script>
        // 获得类名为box1的所有div元素数组
        var oBox1 = document.querySelectorAll('div.box1');
        console.log('类名为box1的所有div元素数组');
        console.log(oBox1);
        // 获得box1中类名为para的所有p元素数组
        var oPL1 = oBox1[0].querySelectorAll('p.para');
        console.log('box1中类名为para的所有p元素数组');
        console.log(oPL1);
    </script>
</body>

</html>

延迟运行

在测试DOM代码时，通常JS代码一定要写到HTML节点的后面，否则JS无法找到相应HTML节点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 参数就是元素节点的id ，注意不要写#号
        var oBox = document.getElementById('box');
        var oPara = document.getElementById('para');
        console.log(oBox);
        console.log(oPara);
    </script>
    <div id="box">我是一个盒子</div>
    <div id="box">
        我是二个盒子
        <p id="para">我是一个段落</p>
        <p id="para">我是二个段落</p>
    </div>
</body>

</html>

可以使用window.onload = function(){} 事件，使页面加载完毕后，再执行指定的代码。
使用了window.onload = function(){} 事件后，JS代码不仅可以写到HTML节点的前面，还可以直接写在head标签对中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            // 参数就是元素节点的id ，注意不要写#号
            var oBox = document.getElementById('box');
            var oPara = document.getElementById('para');
            console.log(oBox);
            console.log(oPara);
        }
    </script>

</head>

<body>
    <div id="box">我是一个盒子</div>
    <div id="box">
        我是二个盒子
        <p id="para">我是一个段落</p>
        <p id="para">我是二个段落</p>
    </div>
</body>

</html>