JavascriptDom

节点克隆

cloneNode()

1
2
3
4
5
6
7
用法:

对象.cloneNode([true]); true表示可有可无

如果含有参数true,表示深度克隆,即克隆该对象本身,又克隆该对象的内容

如果没有参数true,只克隆该对象本身

dom中的属性操作方法

1、获取属性值

对象.getAttribute(“属性名”) 获取属性值 ,可以获取标签的固有属性值,也可以获取自定义属性值 (该方法不能操作 单选框或复选框的checked值)

2、设置属性值

对象.setAttribute(“属性名”,”值”);

3、移出某个对象的属性

对象.removeAttribute(“属性名”);

事件对象(event)

什么是事件对象:当触发某个事件时(onclick、onmouseover…),会产生一个对象,这个对象就是事件对象。

获取事件对象的兼容写法

var e = evt || window.event; 此时 e 变量 代表了事件对象

事件对象作用

获取键盘状态,鼠标位置和鼠标按钮状态。

不同的事件产生的事件对象 可能会有不同的属性

获取坐标问题

1
2
3
4
5
6
7
8
9
clientX / clientY 获取距离浏览器窗口 左侧 和 定部的距离 (即使滚动条将内容区向上移动,永远获取的是距离浏览器窗口距离)

pageX / pageY 获取距离页面内容区域的左侧和顶部的距离 (如果滚动条没有触发,值和clientY相等)

offsetX / offsetY 获取的是距离某个元素内部的 左偏移 和 上偏移(火狐不兼容)

screenX / screenY 获取距离屏幕的左偏移和上偏移

layerX / layerY (火狐浏览器识别 : 结果同 offsetX 和 offsetY)

阻止浏览器右键单击的默认行为

右键单击事件:oncontextmenu

e.preventDefault ? e.preventDefault() : e.returnValue = false;

本文标题:JavascriptDom

文章作者:Jonathon

发布时间:2018年12月06日 - 15:12

最后更新:2019年01月31日 - 14:01

原始链接:https://www.jonathon.cn/js3.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

苟富贵,勿相忘!