DOM操纵：如何使用其方法与网页交互-DEV365 开发者社区

文档对象模型（DOM）提供了多种方法，使Web开发人员可以动态访问和操纵Web页面的内容，结构和样式。这是一些最常用的DOM方法：

getElementById（）

此方法用于使用其ID
中的文档对象模型（DOM）树访问特定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of getElementById</title>
</head>
<body>
    <h1>Welcome to my Website</h1>
    <p>Thanks for visiting my website. Please feel free to explore the various pages and sections.</p>

    <div id="content">
        <h2>Latest News</h2>
        <p>Check out our latest blog post on the benefits of meditation.</p>
    </div>
<script>
    //select the Element with ID content
    let content = document.getElementById('content');

    //update content
    content.innerHTML = 
    "<h2>Update Content</h2><p>This is updated content using JavaScript Method getElementById.</p>."
</script>
</body>
</html>

输出

在此示例中，getElementById()方法用于选择具有ID“ content”的元素。然后，使用新的HTML内容替换该元素的现有内容。例如，如果您想动态更新网页的特定部分的内容，则可能很有用。

getElementsbytagname（）

getElementsByTagName()方法用于选择文档对象模型（dom）树中特定标签名称的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of getElementsByTagName()</title>
</head>
<body>
    <h1>Welcome to my Website</h1>
    <p>Thanks for visiting my website. Please feel free to explore the various pages and sections.</p>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>

    <script>
            //select <li> elements on the page
            let listItems = document.getElementsByTagName('li');
            //Loop through the list items and update their content
            for(let i = 0; i < listItems.length; i++){
                listItems[i].innerHTML = "Page " + (i+1) + ": " + listItems[i].innerHTML;
            }
    </script>

</body>
</html>

输出

在此示例中，getElementsByTagName()方法用于选择页面上的所有<li>元素。然后，a for循环用于遍历每个选定的元素，并通过在现有文本之前添加页码来修改其内容。

CreateElement（）

使用JavaScript
，使用createElement()方法将HTML元素动态创建和添加到网页中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of createElement()</title>
</head>
<body>
    <h1>Welcome to my Website</h1>
    <div id="content">
        <h2>Latest News</h2>
        <p>Check out our latest blog post on the methods of DOM.</p>
    </div>
    <script>
        //create a new paragraph element 
        let newParagraph = document.createElement('p');

        //Add text content to the new element
        newParagraph.textContent = "Stay tuned for more updates.";

        //add the new element to the "cotent" div
        let contentDiv = document.getElementById('content');
        contentDiv.appendChild(newParagraph);
    </script>
</body>
</html>

输出

在此示例中，createElement()方法用于创建一个新的<p>元素。然后使用textContent属性来设置新元素的文本内容。最后，使用appendChild()方法将新元素添加到具有ID“ Content”的现有DIV元素中。这对于对用户操作或其他事件的响应将内容动态添加到网页可能很有用。

setAttribute（）

使用JavaScript
使用setAttribute()方法将属性动态添加到HTML元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of setAttribute()</title>
</head>
<body>
    <h1>Welcome to my website</h1>
    <p>Thanks for visiting my website. Please feel free to explore the various pages and sections.</p>
    <img id="myImage" src="img.jpeg" alt="A beautiful mountain landscape" width="300">
    <div><button onclick="changeImage()">Change Image</button></div>
    <script>
        function changeImage(){
            //select the image element
            let myImage = document.getElementById('myImage');

            //change the image src using setAttribute
            myImage.setAttribute('src','newImg.jpg');
            myImage.setAttribute('alt','A stuning sunset over the ocean')
        }
    </script>
</body>
</html>

输出

单击更改图像按钮

在此示例中，当用户单击按钮时，setAttribute()方法用于动态更改<img>元素的src和alt属性。 changeImage()函数使用其ID选择图像元素，然后使用setAttribute()更改src和alt属性的值。这对于对用户操作或其他事件的响应动态更新网页的内容和行为可能很有用。

getAttribute（）

使用JavaScript
使用getAttribute()方法从HTML元素中检索特定属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of getAttribute()</title>
</head>
<body>
    <h1>Welcome to my website</h1>
    <p>Thanks for visiting my website. Please feel free to explore the various pages and sections.</p>
     <p><button onclick="showAlt()">Show Alt Text</button></p>
    <script>
        function showAlt(){
             //select the image element
             let myImage = document.getElementById('myImage');

            // Get the value of the "alt" attribute using getAttribute()
            let altText =  myImage.getAttribute('alt');

            //display alt value in alert
            alert(altText);
        }
    </script>
</body>
</html>

输出

在此示例中，当用户单击按钮时，使用getAttribute()方法从<img>元素中检索alt属性的值。 showAlt()函数使用其ID选择图像元素，然后使用getAttribute()检索alt属性的值并将其存储在变量中。最后，使用一个alert框来向用户显示alt属性的值。这对于访问和使用JavaScript代码中HTML元素的特定属性可能很有用。

Innerhtml

使用JavaScript
使用innerHTML属性来动态更新HTML元素的内容

<!DOCTYPE html>
<html>
<head>
    <title>Example of innerHTML</title>
</head>
<body>
    <h1>Welcome to my website</h1>
    <p>Thanks for visiting my website. Please feel free to explore the various pages and sections.</p>
    <div id="content">
        <h2>Latest News</h2>
        <p>Check out our latest blog post on the benefits of meditation.</p>
    </div>
    <button onclick="addContent()">Add Content</button>
    <script>
        function addContent() {
            // Select the content div
            var contentDiv = document.getElementById("content");

            // Use innerHTML to add new content to the div
            contentDiv.innerHTML += "<h3>New Section</h3><p>Here is some new content that has been dynamically added to the page!</p>";
        }
    </script>
</body>
</html>

在此示例中，当用户单击按钮时，innerHTML属性用于动态添加新内容到<div>元素。 addContent()函数使用其ID选择内容div，然后使用innerHTML将新的HTML代码附加到DIV的现有内容。这对于响应用户操作或其他事件而动态更新网页的内容和结构可能很有用。但是，使用innerHTML时要小心很重要，因为如果不正确使用，它可能会引入安全漏洞。

removechild（）

使用JavaScript
使用removeChild()方法从DOM中删除HTML元素

<!DOCTYPE html>
<html>
<head>
    <title>Example of removeChild()</title>
</head>
<body>
    <h1>Welcome to my website</h1>
    <p>Thanks for visiting my website. Please feel free to explore the various pages and sections.</p>
    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <button onclick="removeItem()">Remove Item</button>
    <script>
        function removeItem() {
            // Select the list element and its first child
            var myList = document.getElementById("myList");
            var firstItem = myList.firstElementChild;

            // Use removeChild() to remove the first item from the list
            myList.removeChild(firstItem);
        }
    </script>
</body>
</html>

在此示例中，当用户单击按钮时，使用removeChild()方法从<ul>元素中删除第一项。 removeItem()函数使用其ID选择列表元素，然后使用FirstElementChild属性选择其第一个子元素。最后，removeChild()用于通过将第一个子元素作为参数传递到列表中的第一项。这对于对用户操作或其他事件的响应动态修改网页的内容和结构可能很有用。

要使用JavaScript查看DOM操作的工作示例，请查看我的GitHub存储库：https://github.com/SidraMaq/DOM

感谢您的阅读！希望您能发现这篇文章提供信息和乐于助人。如果您有任何疑问或反馈，请随时在下面发表评论。而且，不要忘记查看我的GitHub存储库，以使用JavaScript进行DOM操作的示例。