JavaScript中通过id和name属性获取Dom元素

最新推荐文章于 2023-04-23 16:59:36 发布

原创最新推荐文章于 2023-04-23 16:59:36 发布 · 9k 阅读

2 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在JavaScript中如何通过id属性和name属性访问HTML文档中的DOM元素，并提供了具体的示例代码。对于id属性，可以直接通过window对象或document.all访问；对于name属性，可通过全局变量或document访问，若存在多个相同name属性的元素，则返回NodeList。

在js中如果id名称不和内置属性或全局变量重名的话，该名称自动成为window对象的属性，而在一个html页面中，this===window

一、通过id属性获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <div id="box" style="width:100px;height: 50px;background-color: red" >dddd</div>
    <script type="text/javascript">
        alert(window.box.innerHTML);
        //或者下面写法也可以
        // alert(box.innerHTML);
        //alert(document.all('test').innerHTML);

    </script>
</body>
</html>

二、通过name属性获取

对于name属性来说，只有某些类型的html元素具有类似的方法，比如：form,img,iframe,applet,embed,object等。在这些元素中可以通过全局变量或者document的属性来访问name属性的元素；如果相同name属性的有多个元素，则返回一个NodeList的类似只读数组的对象。示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <div>
      <img name="pic" src="#" alt="pic_0" />
      <img name="pic" src="#" alt="pic_1" />
      <img name="pic" src="#" alt="pic_2" />
    </div>

    <script type="text/javascript">

        for(var i=0;i<pic.length;i++){
            console.log(pic[i].alt);
        }
    </script>
</body>
</html>