、设计一个Web页面,利用DOM实现,页面中存在三个p元素,现分别显示每个p元素的name属性值,然后将三个p元素的name属性值设置为pElement。p元素内容自拟。
时间: 2024-04-10 17:35:04 浏览: 13
可以利用以下代码设计一个Web页面,并使用DOM来实现p元素的name属性值的显示和设置:
```html
<!DOCTYPE html>
<html>
<head>
<title>DOM示例</title>
</head>
<body>
<p id="p1" name="Name 1">This is paragraph 1.</p>
<p id="p2" name="Name 2">This is paragraph 2.</p>
<p id="p3" name="Name 3">This is paragraph 3.</p>
<script>
// 获取三个p元素
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var p3 = document.getElementById("p3");
// 显示每个p元素的name属性值
console.log("Name 1: " + p1.getAttribute("name"));
console.log("Name 2: " + p2.getAttribute("name"));
console.log("Name 3: " + p3.getAttribute("name"));
// 设置三个p元素的name属性值为pElement
p1.setAttribute("name", "pElement");
p2.setAttribute("name", "pElement");
p3.setAttribute("name", "pElement");
// 再次显示每个p元素的name属性值
console.log("Name 1: " + p1.getAttribute("name"));
console.log("Name 2: " + p2.getAttribute("name"));
console.log("Name 3: " + p3.getAttribute("name"));
</script>
</body>
</html>
```
在上述代码中,我们使用了`getElementById`方法来获取三个不同的p元素,并通过`getAttribute`和`setAttribute`方法来获取和设置name属性值。最后,通过`console.log`来输出每个p元素的name属性值。
注意:为了能够在浏览器中看到结果,可以将上述代码保存为一个`.html`文件,然后在浏览器中打开该文件。