html dom例子 (html中dom元素)

html中dom节点,html简单代码范例

图0

一、先在html做出这三个元素,输入框,label标签,按钮,用换行符br把它们分成单行。

html中dom节点,html简单代码范例

图1

二、dom操作,获取元素对象,这里我用的是querySelector来获取对象,对dom不太理解的同学可以看我的文【303】。

html中dom节点,html简单代码范例

图2

三、加一个按钮点击函数。

html中dom节点,html简单代码范例

图3

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <input type="text" id="input1">
 <br>
 <label id="label1"></label>
 <br>
 <button id="bt1">按钮</button> 
 <script>
 var elebt1 = document.querySelector("#bt1");
 var elelabel1 = document.querySelector("#label1");
 var eleinput1 = document.querySelector("#input1");
 elebt1.onclick = function () {
 elelabel1.innerText = "您好," + eleinput1.value;
 }
 </script>
</body>
</html>