设计一个Web页面,利用DOM实现,页面中存在三个p元素,现分别显示每个p元素的name属性值,然后将三个p元素的name属性值设置为pElement。p元素内容自拟。
时间: 2024-04-11 07:25:58 浏览: 3
您可以使用以下代码设计一个Web页面,并利用DOM实现显示和设置p元素的name属性值:
```html
<!DOCTYPE html>
<html>
<head>
<title>DOM实现的Web页面</title>
</head>
<body>
<p name="p1">这是第一个p元素的内容</p>
<p name="p2">这是第二个p元素的内容</p>
<p name="p3">这是第三个p元素的内容</p>
<script>
// 获取所有的p元素
var pElements = document.getElementsByTagName('p');
// 显示每个p元素的name属性值
for (var i = 0; i < pElements.length; i++) {
var name = pElements[i].getAttribute('name');
console.log('第' + (i + 1) + '个p元素的name属性值为:' + name);
}
// 将三个p元素的name属性值设置为pElement
for (var i = 0; i < pElements.length; i++) {
pElements[i].setAttribute('name', 'pElement');
}
</script>
</body>
</html>
```
这段代码会在页面中创建三个p元素,并分别显示每个p元素的name属性值。然后,将这三个p元素的name属性值都设置为"pElement"。您可以根据需要自定义每个p元素的内容。