查找
直接查找
var obj = document.getElementById('l1')
间接查找
innerText 获取文本
innerHTML 获取全部
value
input value获取当前标签中的值
select 获取选中的value值
textarea value获取当前标签选中的值
提示框的示例
样式操作：
className
classList
classList.add
classList.remove
属性操作：
创建标签 添加到mthl中
提交表单
方式一 <form action="https://www.baidu.com/"> <input type="text"> <input type="submit" value="提交"> </form>
方式二
document.getElementById('f1').submit()
定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
<body> <div id="i1" onclick="func()">删除</div> <script> function func() { document.getElementById('i1').innerText='已删除'; setTimeout(function () { document.getElementById('i1').innerText=''; },3000) } </script>
其他
console.log 输出框
alert 弹出框
confirm 确认框
var tag=confirm('确定要删除吗？')
console.log(tag) true false
// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载
事件操作
onmousemove 鼠标移入
onmouseout 鼠标移出
方式一 dom0 直接在标签上绑定事件
<table border="2px" width="300px"> <tr onmousemove="t1(0);" onmouseout="t2(0);"><td>1</td><td>1</td><td>1</td><td>1</td></tr> <tr onmousemove="t1(1);" onmouseout="t2(1);"><td>2</td><td>2</td><td>2</td><td>2</td></tr> <tr onmousemove="t1(2);" onmouseout="t2(2);"><td>3</td><td>3</td><td>3</td><td>3</td></tr> </table> <script> function t1(n) { var myTrs=document.getElementsByTagName('tr')[n]; myTrs.style.backgroundColor='red'; } function t2(n) { var myTrs = document.getElementsByTagName('tr')[n]; myTrs.style.backgroundColor = ''; } </script>
方式二 dom1 先获取dom对象再进行绑定事件
<table border="2px" width="300px"> <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr> <tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr> <tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr> </table> <script> var trs=document.getElementsByTagName('tr'); for (var i=0;i<trs.length;i++) { trs[i].onmouseover=function () { this.style.backgroundColor="red"; } trs[i].onmouseout=function () { this.style.backgroundColor=""; } } </script>