自定义属性

设置自定义属性：setAttribute("属性的名字","属性的值")
获取自定义属性的值：getAttribute("属性的名字")
移除自定义属性：removeAttribute("属性的名字")

节点的属性

节点：页面中所有的内容都是节点(标签，属性，文本文字，空格，换行)
元素：页面中所有的标签

nodeType节点类型：
1表示标签类型；2表示属性；3表示文本

nodeName节点名字
标签节点是大写的标签名字；属性节点是小写的属性名字；文本节点是#text

nodeValue节点的值
标签节点的值是null；属性节点的值是属性值；文本节点的值是文本内容

为元素绑定事件(DOM)

1 对象.addEventListener("事件类型",事件处理函数,false)谷歌火狐支持，IE8不支持
2 对象.attachEvent("有on的事件类型",事件处理函数)谷歌火狐不支持，IE8支持

解绑事件

解绑事件应该使用什么方式绑定就用什么方式解绑

绑定方式一：
绑定：对象.on事件名字=function(){}
解绑：对象.on事件名字=null
绑定方式二：
绑定：对象.addEventListener(“没有on的事件类型”,命名函数,false)
解绑：对象.removeEventListener(“没有on的事件类型”,函数名字,false)
绑定方式三：
绑定：对象.attachEvent(“on事件类型”,命名函数);—绑定事件
解绑：对象.detachEvent(“on事件类型”,函数名字);

事件冒泡

多个元素层次嵌套，这些元素都注册了相同的事件，如果里面的元素的事件触发了，外面的元素的该事件会跟着触发。
window.event是一个对象，是IE中的标准，e是事件参数对象，一个是火狐的标准，事件参数e在IE8的浏览器中是不存在，要兼容就用window.event来代替

IE阻止事件冒泡：window.event.cancelBubble=true
谷歌和火狐阻止事件冒泡：e.stopPropagation()

事件的阶段有三个：
1.事件捕获阶段：从外向内
2.事件目标阶段：最开始选择的那个
3.事件冒泡阶段：从里向外

addEventListener中第三个参数是控制事件阶段的，通过e.eventPhase这个属性可以知道当前的事件是什么阶段，如果这个属性的值是:
1表示捕获阶段
2表示目标阶段
3表示冒泡阶段

location对象

获取地址栏上#及后面的内容：window.location.hash
获取主机名及端口号：window.location.host
获取主机名：window.location.hostname
获取文件的路径(相对路径)：window.location.pathname
获取端口号：window.location.port
获取协议：window.location.protocol
获取搜索的内容：window.location.search
设置跳转的页面的地址：
1、location.href="http://www.baidu.com"
2、location.assign("http://www.baidu.com")
3、location.reload();//重新加载--刷新
4、location.replace("http://www.baidu.com");//没有历史记录

前进：window.history.forward()
后退：window.history.back()

offset系列:

获取元素的宽，高，left，top
offsetLeft：距离左边位置的值
offsetTop：距离上面位置的值
offsetWidth：元素的宽(有边框)
offsetHeight：元素的高(有边框)

scroll系列

scrollWidth：元素中内容的实际的宽(没有边框)，如果没有内容就是元素的宽
scrollHeight：元素中内容的实际的高(没有边框)，如果没有内容就是元素的高
scrollLeft：向左卷曲出去的距离
scrollTop：向上卷曲出去的距离

获取可视区域距离页面顶部的距离：
scrollTop=document.documentElement.scrollTop||document.body.scrollTop

client系列:可视区域

clientWidth：可视区域的宽(没有边框)，边框内部的宽度
clientHeight：可视区域的高(没有边框)，边框内部的高度
clientLeft：左边边框的宽度
clientTop：上面边框的宽度

不要葱花

发布了28 篇原创文章 · 获赞 1 · 访问量 8734

私信关注

初级JS杂记