HTML DOM DD对象(DD Object)

DD对象代表了HTML文档中的dd元素

注:IE9及更早版本及Safari浏览器不支持DD元素。

如何访问DD对象?

使用getElementById()访问DD元素。

var  x = document.getElementById("myDD");

如何创建DD对象

使用createElement()方法创建DD元素。

var x = document.createElement("DD");

标准属性及事件

DD对象同时支持标准的属性事件

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何访问DD元素?</h3>

<dl>

<dt>咖啡</dt>

<dd id="myDD">加奶、加糖热饮</dd>

</dl>

<p>点击以下按钮,获取dd元素的内容</p>

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<script>

function myFc() {

var x = document.getElementById("myDD").innerHTML;

document.getElementById("demo").innerHTML = x;

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何创建DD元素?</h3>

<dl id="myDL">

<dt>咖啡</dt>

</dl>

<p>点击以下按钮,创建dd元素</p>

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<script>

function myFc() {

var x = document.createElement("DD");

var t = document.createTextNode("加奶、加糖热饮");

x.appendChild(t);

var y = document.getElementById("myDL");

y.appendChild(x);

}

</script>

</body>

</html>

关联内容