总结-DOM通用属性&DOM获取元素位置&事件绑定与移除&冒泡和标签的默认行为
DOM通用属性&DOM获取元素位置&事件绑定与移除&冒泡和标签的默认行为
DOM对象的通用属性
innerHTML
获取/设置元素里的html内容。在设置元素的HTML内容的时候,会覆盖掉原来的内容。
innerText
获取/设置元素里面的文本内容
nodeName
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
nodeValue
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
nodeType
调用nodeType属性会得到一个数字,这个数字表示节点的类型
元素 1
属性 2
文本 3
注释 8
文档 9
DOM获取元素的位置
offsetLeft 元素在网页中水平坐标值
offsetTop 元素在网页中垂直坐标值
offsetWidth 元素在页面中占据的宽度
offsetHeight 元素在页面中占据的高度
scrollLeft 滚动条在容器中水平滚动的距离,多用于浏览器的滚动条
scrollTop 滚动条在容器中垂直滚动的距离,多用于浏览器的滚动条
事件绑定与移除
直接在HTML标签中添加,即使用onclick、onmouseover等HTML属性;
DOM的方式添加,即通过dom方法获取节点,然后为其绑定事件;
取消事件:节点.onclick=null;
使用addEventListener或attachEvent(IE8及更低版本浏览器)
元素节点.attachEvent(事件名, 事件处理函数);
元素节点.dettachEvent(事件名 处理函数);
元素节点.addEventListener(事件名, 事件处理函数);// 事件名不要带on
元素节点.removeEventListener(事件名, 处理函数); //事件名不要带on
事件对象相关属性和方法使用
冒泡事件及阻止冒泡事件的发生
实际开发中,有些时候就希望事件冒泡,可以不对其进行处理;有些时候不希望事件冒泡,那么就需要阻止事件冒泡。
阻止冒泡
evt.stopPropagation(); //evt指的是事件对象
非IE
window.event.cancelBubble = true;
IE
阻止标签的默认行为
有些时候,点击了a标签或者submit按钮后不希望执行标签的默认行为,这时候就需要阻止默认行为。
evt.preventDefault();
非IE
window.event.returnValue = false;
IE
return false;
万能阻止:
return flase;
onclick="return false";
onclick ="return confirm('你确定要删除吗');"返回值true和false
Copyright [2018] by [羊驼可以吃吗] form [https://www.cnblogs.com/phpisfirst/]