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;
           };
        };

后续会持续更新

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值