DOM1

Posted 2020-10-02

对子元素进行操作
var a1=document.getElementById("a1");
var b1=document.getElementById("b1");
var c1=document.createElement("c1");
a1.insertBefore(c1,b1);
把节点c1放到a1的里面，放到节点b1的前面
c1.parentNode;获得c1的父节点.
parentNode.removeChild(c1)
parentNode.appendChild()

操作样式属性.
element.style.propName="";来操作样式属性.element为html标签.
element.calssName. 来调用类选择器控制style
element.removeChild(node) 删除子元素.
element.attrName=null;删除属性
element.innerHTML=null;删除文本内容和子元素

事件机制
事件元素var but=document.getElementById("butId");
but.onname=function(){};
name是事件的名称,but是事件源.
but.onchick=function(){alert("这是单击")};
每次but执行单击时弹出"这是单击"
but.ondbchick双击
mouseover/mouseout 鼠标进入离开元素时触发.
mousemove 鼠标移动时触发（前面是事件源，只有在事件源才有效果）
mousedown/mouseup 鼠标按下 弹起时触发//这里不区分鼠标的哪一个按键

鼠标事件event对象所以event一般都写在鼠标点击事件里面.
but.onclick=function(){alert(event.altKey/event.button)};
button 点击的鼠标哪个按键
altKey/ctrKey/shiftKey 是否同时按下 boolean值.
clientX/clientY 鼠标指针操作时窗口坐标.
screenX/screenY 鼠标指针操作时屏幕坐标.

事件处理的两种方式
1.注册事件处理函数
window.onload=function(){ div.onclick=function(){alert("click!")} };

2.直接在HTML元素标签事件属性上写要执行的代码
<div onclick="alert(‘click‘)"></div>

自定义函数function fun1(){};
element.onclick=fun1;
onclick="fun1();"

关于this的用法
如果this在函数fun1内，则函数fun1以哪个对象的属性值的身份去执行，this就代表哪个对象.
例如：<button id="but01">按钮</button>
<script type="text/javascript">
function fun1(){alert(this);};
window.onload=function(){
var obj={"fun1":fun1;} obj.fun1(); //this为obj.
var but=document.getElementById("but01");
but.fun1=fun1;but.fun1(); //this为buttonElement
window.fun1(); //this为window

}
</script>

关于获取设置元素的坐标
var a=document.getElementById();
a.style.position="" 定位方式. absolute/relative/fixed
offsetLeft
offsetTop
img.style.Left= +"px";
img.style.Top

给一个事件注册多个事件处理函数.
原理其实是一样，add 相当于在原来的注册事件函数的外面加了一个包装.
让他们看起来有区别，在js处理的时候能够识别.
addEventListener(事件名称，处理函数);
removeEventListener(事件名称，处理函数);
element.onclick=function(){alert("1")}
element.onclick=function(){alert("2")}
这样后面的会覆盖前面的
element.addEventListener("click",function(){alert("1")})
element.addEventListener("click",function(){alert("2")})
这样都会执行，而且跟原来的注册事件处理函数也不冲突.
remove里面的处理函数不能是新的处理函数，必须是事先声明的函数.

事件冒泡机制。
当HTML元素嵌套时，如果触发事件比较多时，先执行最内部的事件，然后依次往外部传递。如果希望取消事件的冒泡，在内部使用event.stopPropagation()来停止事件向外部传递。