设计一个Web 页面,利用DOM 实现,页面中存在三个p 元素,现分别显示每 个p 元素的name 属性值,然后将三个p 元素的name 属性值设置为pElement。p 元 素内容自拟。
时间: 2024-04-10 21:34:46 浏览: 14
可以使用DOM(文档对象模型)来实现一个Web页面,其中包含三个p元素,并显示它们的name属性值。然后将这三个p元素的name属性值设置为"pElement"。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>使用DOM操作元素</title>
<script>
window.onload = function() {
// 获取三个p元素
var pElements = document.getElementsByTagName("p");
// 遍历并显示每个p元素的name属性值
for (var i = 0; i < pElements.length; i++) {
var name = pElements[i].getAttribute("name");
pElements[i].textContent = "name属性值:" + name;
}
// 将三个p元素的name属性值设置为"pElement"
for (var i = 0; i < pElements.length; i++) {
pElements[i].setAttribute("name", "pElement");
}
};
</script>
</head>
<body>
<p name="first">第一个p元素</p>
<p name="second">第二个p元素</p>
<p name="third">第三个p元素</p>
</body>
</html>
```
将以上代码保存为一个HTML文件,然后在浏览器中打开该文件,页面上将显示三个p元素的name属性值,并且这三个p元素的name属性值都将被设置为"pElement"。