定位页面元素

定位页面元素方法

Document对象提供了属性和方法实现定位页面元素功能，这也是DOM的标准规范中Docu ument对象的主要应用之一。

Document对象提供实现定位页面元素的方法具有如下几种:

● getElementByld()方法:  通过页面元素的id属性值定位元素。.

● getElementsByName()方法:  通过页面元素的name属性值定位元素。

● getElementsByTagName()方法: 通过页面元素的元素名定位元素。

● getElementsByClassName()方法:  通过页面元素的class属性值定位元素。

使用getElementByld()方法定位页面元素：

HTML页面元素的id属性的特点是唯一、不可重复的，所以通过这种方式定位的HTML页面元素也是唯一的。

// 通过id名来对元素进行定位
        var btn = document.getElementById('btn');
        console.log(btn);

使用getElementsByName()方法定位页面元素：

// 通过页面中Class名来对元素进行定位;
        var btn = document.getElementsByClassName('btn');
        // 得到HTMLCollection集合 -> 类数组对象;
        console.log(btn);

注意：使用getElementsByName()方法定位页面元素时，正确写法为：

// 通过页面中Class名来对元素进行定位;
        var btn = document.getElementsByClassName('btn')[0];
        // 得到页面内类名为btn的元素;
        console.log(btn);

使用getElementsByTagName()方法：

<body>
    <button name="btns"></button>
    <button name="btns"></button>
    <button name="btns"></button>
    <button name="btns"></button>
    <button name="btns"></button>
    <script>
        // 通过页面中name属性名来对元素进行定位;
        var btn = document.getElementsByName('btns')[0];
        // 输出的是一个索引数组,NodeList;里面有5个button按钮;
        console.log(btn);
        console.log(btn instanceof NodeList); // true;
    </script>
</body>

使用getElementsByClassName()方法：

<body>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <script>
        // 通过页面中标签名来对元素进行定位;
        var btn = document.getElementsByTagName('button')[0];
        // 得到页面内标签名为button的元素;
        console.log(btn);
        console.log(btn instanceof HTMLCollection); // true
    </script>
</body>

总结：
getElementsByName()方法
getElementsByTagName()方法
getElementsByClassName()方法
以上三种方法，在使用时后面加上[0]，方便实际应用中得获取元素得正确性;

DOM获取页面元素

定位页面元素

定位页面元素方法

猜你喜欢