JavaScript中访问id对象属性的方式访问属性(实例代码)

2023年5月27日上午7:56 • JavaScript

JavaScript中访问id对象属性的方式，常用的有两种方法： DOM和jQuery。下面将分别介绍这两种方法的实现。

使用DOM访问id对象属性

DOM(Document Object Model) 是一种树状结构，它把HTML文档看作是一个由节点和对象组成的树形结构，通过DOM可以对HTML文档进行访问和操作。在DOM上访问id对象属性，可以使用document对象的getElementById()方法。

下面是一个使用DOM访问id对象属性的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>DOM访问id对象属性示例</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="mydiv">
        <p>这是一个段落</p>
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
        </ul>
    </div>
    <script type="text/javascript">
        var mydiv = document.getElementById("mydiv");
        var p = mydiv.getElementsByTagName("p")[0];
        var ul = mydiv.getElementsByTagName("ul")[0];

        console.log(p.innerHTML);  //输出这是一个段落
        console.log(ul.innerHTML); //输出<li>列表项1</li><li>列表项2</li>
    </script>
</body>
</html>

在上面的代码中，我们首先使用document对象的getElementById()方法获取了id为“mydiv”的元素，然后使用其getElementsByTagName()方法分别获取了内部的p和ul元素，并通过innerHTML获取了相关内容。可以看到，使用DOM访问id对象属性需要先获取到对应的HTML对象，再通过该对象的相关方法获取内部元素的属性。

使用jQuery访问id对象属性

jQuery是目前最流行的JavaScript库之一，在使用jQuery时，访问id对象属性非常方便，可以直接通过$符号访问。

下面是一个使用jQuery访问id对象属性的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery访问id对象属性示例</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="mydiv">
        <p>这是一个段落</p>
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
        </ul>
    </div>
    <script type="text/javascript">
        var p = $("#mydiv p");
        var ul = $("#mydiv ul");

        console.log(p.html()); //输出这是一个段落
        console.log(ul.html()); //输出<li>列表项1</li><li>列表项2</li>
    </script>
</body>
</html>

在上面的代码中，我们使用$符号选择器获取了id为“mydiv”的元素，然后分别获取了内部的p和ul元素，并通过html()方法获取了相关内容。使用jQuery访问id对象属性非常便捷，适用于快速开发中需要频繁进行DOM操作的场景。

无论是使用DOM还是jQuery访问id对象属性，都需要通过选择器获取对应元素，再通过相关方法获取内部元素的属性。因此，在实际开发中应选择适合自己的方式并善于运用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript中访问id对象属性的方式访问属性(实例代码) - Python技术站