Debido a que HTML puro es difícil de implementar algunas operaciones de nivel de control de flujo, como variables, bucles y la introducción de JavaScript, puede ser más conveniente escribir interactivamente
Objeto de extracción DOM
Use una API específica para extraer objetos de etiquetas, y estos objetos deben tener algunos atributos, como el cuadro de entrada de texto, el valor es el valor de entrada y la introducción de variables en un lenguaje conveniente puede lograr funciones más complejas
Echemos un vistazo a la forma de obtener el objeto de etiqueta
document.getElementById
document.getElementsByClassName
document.getElementsByName
document.querySelector
// 通过id来获得对象，id唯一
var obj = document.getElementById();
// 通过class名获得对象，注意是获得一群
var obj = document.getElementsByClassName();
// 通过name来获得对象，获得一群，Element加不加s以和getElementById区分
var obj = document.getElementsByName();
// 通过标签名字来获取第一个标签
var obj = document.querySelector();
Ejemplos
Debido a que hay menos objetos, se usa getElementsById. Vale la pena señalar que la entrada del cuadro de texto, ya sea input o textarea label, es value, noinnerText
<!DOCTYPE html>
<html>
<head>
<title>javascript test</title>
</head>
<body>
<div>
输入一行<br />
<textarea id="in1" name="in1" class="in1"></textarea>
</div>
<div>
<button id="btn">点我转换</button>
<button id="clr">点我清空</button>
</div>
<div>
反转后的字符串<br />
<textarea id="ou1"></textarea>
</div>
<script type="text/javascript">
// 获取各个标签对象
var btn = document.getElementById('btn'); // 点我转换
var clr = document.getElementById('clr'); // 点我清空
var in1 = document.getElementById('in1'); // 输入框
var ou1 = document.getElementById('ou1'); // 输出框
// 反转字符串函数
function reverse(s) {
return s.split("").reverse().join("");
}
// 配置‘点我反转’按钮回调函数
btn.onclick = function () {
var s = in1.value;
ou1.innerText = reverse(s);
}
// 清空
clr.onclick = function () {
in1.value = null;
ou1.innerText = null;
}
</script>
</body>
</html>
