Web前端自学记录（十七） DOM

DOM

1.使用DOM操作CSS

通过JS修改元素的样式

语法：元素.style.样式名 = 样式值

注意：如果CSS的样式名中含有-
这种名称在JS中是不合法的
需要将这种样式名修改为驼峰命名法
去掉-，然后将-后的字母大写

我们通过style属性设置的样式都是内联样式
而内联样式有较高的优先级，所以通过JS修改的样式往往会立即执行
但是如果在样式中写了!important，则此时样式会有最高的优先级
即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效

读取元素的样式

语法：
	元素.style.样式名
	通过style属性设置和读取的都是内联样式，无法读取样式表中的样式

2.读取元素的样式

获取元素当前显示的样式

语法：元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式
如果当前元素没有设置该样式，则获取它的默认值
currentStyle只有IE浏览器支持，其他的浏览器都不支持

在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式
这个方法是window的方法，可以直接使用
需要两个参数：
	1.要获取样式的元素
	2.可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了元素对应的样式
可以通过对象.样式名来读取样式
如果获取的样式没有设置，则会获取到真实的值，而不是默认值
但是该方法不支持IE8及以下的浏览器

通过currentStyle和getComputedStyle()读取到的方法都是只读的，不能修改
如果要修改，必须通过style属性

定义一个函数，用来获取指定元素的当前样式

参数：
	obj 要获取样式的元素
	name 要获取的样式名

function getstyle(obj,name) {
            if(window.getComputedStyle){
                return getComputedStyle(obj,null)[name];
            }else{
                return obj.currentStyle[name];
            }
       }
       getstyle(box1.width);

3.其他样式操作的属性

属性：

clientWidth  cilentHeight
	这两个属性可以获取元素的可见宽度和高度
	这些属性都是不带px的，返回的都是一个数字，可以直接进行计算
	会获取元素宽度和高度，包括内容区和内边距
	这些属性都是只读的，不能修改
offsetWidth  offsetHeight
	获取元素整个的宽度和高度，包括内容区，内边距和边框
offsetParent
	可以用来获取当前元素的定位父元素
	会获取到离当前元素最近的开启了定位的祖先元素
	如果所有祖先元素都没有开启定位，则返回body
offsetLeft
	当前元素相对于其定位父元素的水平偏移量
offsetTop
	当前元素相对于其定位父元素的垂直偏移量
scrollHeight  scrollWidth
	可以获取元素整个滚动区域的宽度和高度
scrollLeft
	可以获取水平滚动条滚动的距离
scrollTop
	可以获取垂直滚动条滚动的距离

当满足scrollHeight - scrollTop = cilentHeight说明垂直滚动条滚动到底
当满足scrollWidth - scrollLeft = cilentHWidth说明水平滚动条滚动到底

如果为表单项添加disabled="disabled" 则表单项将变成不可用状态

onscroll
该事件会在元素的滚动条滚动时触发

4.事件对象

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下，鼠标滚轮滚动的方向...

在IE8中，响应函数被触发时，浏览器不会传递事件对象
在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

onmousemove该事件将会在鼠标在元素中移动时被触发
clientX可以获取鼠标指针的水平坐标
clientY可以获取鼠标指针的垂直坐标

pageX可以获取鼠标指针相对于页面的水平坐标
pageY可以获取鼠标指针相对于页面的垂直坐标
但是这两个属性在IE8中不支持

chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
火狐等浏览器认为浏览器的滚动条时html的
document.documentElement.scrollTop

5.冒泡

事件的冒泡(Bubble)

所谓的冒泡指的就是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡
event.cancelBubble = true;

6.事件的委派

事件的委派

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件
事件委派是利用的冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

target
event中的target表示触发事件的对象

7.事件的绑定

使用对象.事件 = 函数的形式绑定响应函数

它只能同时为一个元素的一个事件绑定一个响应函数
不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

addEventListener()

通过这个方法也可以为元素绑定响应函数
参数：
	1.事件的字符串，不要on
	2.回调函数，当事件触发时，该函数会被调用
	3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

使用addEventListener()可以同时为一个元素的相同时间绑定多个响应函数
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
不支持IE8以下的浏览器

在IE8中可以使用attachEvent()来绑定事件
参数：
	1.事件的字符串，要on
	2.回调函数
这个方法也可以同时为一个事件绑定多个处理函数
不同的是它是后绑定先执行，执行顺序和addEventListener()相反

		/*
            定义一个函数，用来为指定元素绑定响应函数

            addEventListener()中的this，是绑定事件的对象
            attachEvent()中的this，是window
            需要统一两个方法的this

            参数：
                obj 要绑定事件的对象
                eventStr 事件的字符串(不要on)
                callback 回调函数
        */
function bind(obj,eventStr,callback) {

            if(obj.addEventListener){
                //大部分浏览器兼容的方式
                obj.addEventListener(eventStr , callback ,false);
            }else{
                /*
                    this是谁由调用方式决定
                    callback.call(obj)
                */
                //IE8及以下
                obj.attachEvent("on"+eventStr ,function() {
                    //在匿名函数中调用回调函数
                    callback.call(obj);
                });
            };
       }

8.事件的传播

关于事件的传播网景公司和微软公司由不同的理解
微软公司认为事件应该是由内向往传播的，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就是事件应该在冒泡阶段执行.

网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代元素.

W3C综合了两个公司的方案，将事件传播分成了三个阶段

1.捕获阶段
	在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
	事件捕获到了目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
	事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

IE8及以下的浏览器没有捕获阶段

9.拖拽

拖拽的流程

1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2.当鼠标移动时，被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

window.onload = function() {
	var box1 = document.getElementById("box1");
           box1.onmousedown = function(event) {
               event = event||window.event
               //div的偏移量 鼠标.clentX - 元素.offsetLeft
               //div的偏移量 鼠标.clentY - 元素.offsetTop
               var ol = event.clientX - box1.offsetLeft;
               var ot = event.clientY - box1.offsetTop;
               //为document绑定一个onmousemove事件
               document.onmousemove = function(event) {
                   event = event || window.event
                   //获取鼠标的坐标
                   var left = event.clientX - ol;
                   var top = event.clientY - ot;

                   //修改box1的位置
                   box1.style.left = left+"px";
                   box1.style.top = top+"px";
               };
               document.onmouseup = function() {
                   //取消document的onmousemove事件
                   document.onmousemove = null;
                   document.onmouseup = null;
               };
               /*
                    当我们拖拽网页中的一个内容时，浏览器会默认去搜索引擎中搜索内容
                    此时会导致拖拽功能的异常，这个是浏览器提供的默认行为
                    如果不希望发生这个行为，则可以通过return false来取消默认行为

                    但是这招对IE8不起作用
                    当调用一个元素的setCapture()方法以后
                    这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
                    在chrome中调用会报错
               */
              return false;
           };
        };

后续会持续更新