获取 HTML DOM元素 的方法详细用法解析
- 通过ID获取(getElementById)
- 通过name属性(getElementsByName
- 通过标签名(getElementsByTagName)
- 通过类名(getElementsByClassName)
- 获取html的方法(document.documentElement)
- 获取body的方法(document.body)
- 通过选择器获取一个元素(querySelector)
- 通过选择器获取一组元素(querySelectorAll)
为元素添加监听事件
element.addEventListener(event, function, useCapture);
event:事件,鼠标事件,键盘事件,事件都是on开头的
一般情况下,
var box = document.getElementById('box');
box.onclick = function() {
console.log('代码会在box被点击后执行');
};
但是在addEventListener中的event是没有on的
box.addEventListener('mouseether',(e)=>{
console.log('处理语句');
});
//()=>{} es6箭头函数
//e dom对象
一些常见的操作(注意:Firefox下是没有event这个对象的 有widow.event)
为元素内加元素(加孩子操作)
// 创建标签元素
let el = document.createElement(span)
// 为元素设置行内样式
el.style.height = 11 + 'px';//这里如果是有单位记得连接上单位
// 元素创建好后记得加入某个元素中
box.appendChild(el);
我们经常会遇到获取鼠标的位置(遇到滚动窗口的时候要考虑到滚动距离 scrollLeft scrollTop)
属性 | 说明 |
---|---|
clientX | 以浏览器左上顶角为原点,定位 x 轴坐标 |
clientY | 以浏览器左上顶角为原点,定位y轴坐标 |
offsetX | 以当前事件的目标对象左上角为原点,定位x轴坐标 |
offsetY | 以当前事件的目标对象左上角为原点,定位y轴坐标 |
pageX | 以Document 对象(即文本窗口)左上角为原点,定位x轴坐标 |
pageY | 以Document 对象(即文本窗口)左上角为原点,定位y轴坐标 |
screenX | 计算机屏幕左上角为原点,定位x轴坐标 |
screenY | 计算机屏幕左上角为原点,定位y轴坐标 |
layerX | 最近的绝对定位的父元素(如果没有,则为Document对象)左上角为原点,定位x轴坐标 |
layerY | 最近的绝对定位的父元素(如果没有,则为Document对象)左上角为原点,定位y轴坐标 |
target.offsetLeft | 父盒子距离窗口的距离 |
还有定时器!!
timeoutID = window.setTimeout(函数,延迟的毫秒数) ; //多少时间后做点啥
setInterval(函数,间隔的毫秒数) // 每间隔多少秒做点啥
window.clearTimeout(timeoutID) ; 停止定时器