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

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

时间: 2024-04-10 11:34:55 浏览: 15

可以按照以下步骤设计一个Web页面，利用DOM实现显示和设置p元素的name属性值： 1. 创建一个HTML文件，并在文件中添加三个p元素，每个p元素分别添加一个name属性和内容。 ```html <!DOCTYPE html> <html> <head> <title>DOM示例</title> </head> <body> 这是第一个p元素 这是第二个p元素 这是第三个p元素 </body> </html> ``` 2. 在JavaScript中使用DOM来获取和设置p元素的name属性值。可以使用`querySelectorAll`方法来获取所有的p元素，并使用`getAttribute`方法来获取name属性值，然后将其显示在页面上。 ```javascript window.onload = function() { var pElements = document.querySelectorAll('p'); pElements.forEach(function(pElement) { var nameValue = pElement.getAttribute('name'); pElement.innerText = nameValue; }); }; ``` 3. 将上述JavaScript代码保存为一个单独的.js文件，并在HTML文件中引入该文件。 ```html <!DOCTYPE html> <html> <head> <title>DOM示例</title> <script src="script.js"></script> </head> <body> 这是第一个p元素 这是第二个p元素 这是第三个p元素 </body> </html> ``` 这样，当页面加载完成时，JavaScript代码会自动执行，将p元素的name属性值显示在相应的p元素中。