1、选中页面元素
let elem = document.querySelector('CSS选择器');
console.log(elem);
console.dir(elem);
2、事件
鼠标点击事件 onclick 鼠标移动事件 onmousemove 等等
事件源 .box,事件类型 onlick,事件处理方式 alert('hello')
let div = document.querySelector('.box');
div.onclick = function(){alert('hello');
}
3、操作元素
(1)获取/修改元素内容:innerHTML
abc
(2)获取/修改元素属性
![]()
(3)获取/修改表单元素属性
表单元素(input,textarea,select......)有一些普通标签没有的特殊属性
如:value属性——获取到元素里用户填写的值
要用 input.value,不能使用 input.innerHTML,因为——
innerHTML:得到的是标签的内容,input标签是单标签,没有内容。
如:type属性
隐藏显示密码
(4)获取/修改样式属性
修改内联样式(修改style属性的值)
例子:点击使字体变大
这是一个div,点击字体会变大
修改元素应用的CSS类名
例子:切换夜间模式
这是一个div
4、新增元素和删除元素
(1)新增元素
创建元素 document.createElement('元素');
把这个元素放到 dom 树中 尾插:appendChild(变量名);
这是一个div
- 11
- 22
(2)删除元素 removeChild(变量名);
- 11
- 22
5、案例
(1)猜数字
请输入一个数字:
(2)表白墙(留言板)
表白墙
表白墙
输入后点击提交,会将信息显示在表格中
谁:对谁:说什么: