首页设计一个Web页面，利用DOM实现，页面中存在三个p元素，现分别显示每个p元素的name属性值，然后将三个p元素的name属性值设置为pElement

设计一个Web页面，利用DOM实现，页面中存在三个p元素，现分别显示每个p元素的name属性值，然后将三个p元素的name属性值设置为pElement

时间: 2024-04-10 15:35:06 浏览: 13

好的，以下是一个使用DOM实现的Web页面示例： ```html <!DOCTYPE html> <html> <head> <title>DOM示例</title> <style> p { margin: 10px; padding: 5px; border: 1px solid black; } </style> </head> <body> <p name="p1">Paragraph 1</p> <p name="p2">Paragraph 2</p> <p name="p3">Paragraph 3</p> <script> // 获取所有的p元素 var paragraphs = document.getElementsByTagName("p"); // 遍历每个p元素 for (var i = 0; i < paragraphs.length; i++) { // 获取当前p元素的name属性值 var name = paragraphs[i].getAttribute("name"); // 显示name属性值 paragraphs[i].innerHTML = name; // 设置name属性值为"pElement" paragraphs[i].setAttribute("name", "pElement"); } </script> </body> </html> ``` 这个示例中，有三个`<p>`元素，每个元素都有一个名为"name"的属性。JavaScript代码通过DOM操作获取这些元素，然后分别显示每个`<p>`元素的"name"属性值，并将它们的"name"属性值设置为"pElement"。