HTML DOM DT对象(DT Object)

DT对象代表了HTML文档中的dt元素

如何访问DT对象?

使用getElementById()访问dt元素。

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

如何创建DT对象

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

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

标准属性及事件

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

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何访问DT元素</h3>

<dl>

<dt id="myDT">咖啡</dt>

<dd>热饮料</dd>

</dl>

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

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

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

<script>

function myFc() {

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

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

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

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

<p>点击以下按钮,创建一个dt元素</p>

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

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

<script>

function myFc() {

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

x.setAttribute("id", "myDL");

document.body.appendChild(x);

var y = document.createElement("DT");

var txt1 = document.createTextNode("咖啡");

y.appendChild(txt1);

y.setAttribute("id", "myDT");

document.getElementById("myDL").appendChild(y);

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

var txt2 = document.createTextNode("热饮料");

z.appendChild(txt2);

document.getElementById("myDL").appendChild(z);

}

</script>

</body>

</html>

关联内容