关于js 中 DOM处理页面元素的一些事

获取 HTML DOM元素 的方法详细用法解析

1. 通过ID获取（getElementById)
2. 通过name属性（getElementsByName
3. 通过标签名（getElementsByTagName）
4. 通过类名（getElementsByClassName）
5. 获取html的方法（document.documentElement）
6. 获取body的方法（document.body）
7. 通过选择器获取一个元素（querySelector）
8. 通过选择器获取一组元素（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	以浏览器左上顶角为原点，定位ｙ轴坐标
offsetX	以当前事件的目标对象左上角为原点，定位x轴坐标
offsetY	以当前事件的目标对象左上角为原点，定位y轴坐标
pageX	以Document 对象（即文本窗口）左上角为原点，定位x轴坐标
pageY	以Document 对象（即文本窗口）左上角为原点，定位ｙ轴坐标
screenX	计算机屏幕左上角为原点，定位x轴坐标
screenY	计算机屏幕左上角为原点，定位ｙ轴坐标
layerX	最近的绝对定位的父元素（如果没有，则为Document对象）左上角为原点，定位x轴坐标
layerY	最近的绝对定位的父元素（如果没有，则为Document对象）左上角为原点，定位ｙ轴坐标
target.offsetLeft	父盒子距离窗口的距离

还有定时器！！

timeoutID =  window.setTimeout(函数，延迟的毫秒数) ； //多少时间后做点啥

setInterval(函数，间隔的毫秒数) // 每间隔多少秒做点啥

window.clearTimeout(timeoutID) ； 停止定时器