什么是dom编程?
- 找 找到html中的标签,赋值给一个变量
- 改 通过更改这个变量动态地更改html中的内容
- 返回的内容为列表
如何找到那些标签?
- id:var find = document.getElementById(“id“)
- 类:var find = document.getElementsByClassName (“类名”)
- name:var find = document.getElementsByName (“name”) // input系列
通过 find.value 获得input输入或者默认的内容
- 标签:var find = document.getElementsByTagName(“标签名”)
注意getElements后面的s,返回列表
如何更改标签?
- 改文本:
find.innerText = “想要修改的内容” // 单行修改
for (var i =0;i<find.length;i++;){
var new =find[i];
new = “想要修改的内容”;
} // 多行修改 赋值直接就改掉了html中内容
需求?我想我点一下,页面上就自己增加1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘻嘻</title> </head> <body> <div> <p id="add">1</p> <p><input type="button" value="+1" onclick="add()"></p> <!--绑定点击事件--> </div> <script> function add() { // 定义函数 var res = document.getElementById('add') // 获得对象 var text =res.innerText; // 获得值 text = parseInt(text); // 转换值 text += 1; // 值加1 res.innerText = text; } // 改值 </script> </body> </html>