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

最新推荐文章于 2024-07-18 09:15:00 发布

chenyonken

最新推荐文章于 2024-07-18 09:15:00 发布

阅读量8.8k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/chenyonken/article/details/80955498

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在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>