1 节点
每个节点基本都有四个属性
nodeName
元素的标签名,以大写形式表示,只读
nodeValue
Text节点或者Comment节点的文本内容可以读写
文本节点 & 注释节点
nodeType
该节点的类型,只读
attributes
element节点的属性集合
** 节点的一个方法**
Node.hasChildNodes()
返回布尔值,判断此元素是否有子节点 (包括文本/注释等节点,包括空格回车换行)
节点类型nodeType
- 元素节点 1
- 属性节点 2
- 文本节点 3
- 注释节点 8
- document 9
- DocumentFragment 11
<div>
// 文本节点
<strong>// 元素节点
<span>1</span>
</strong>
// 文本节点
<span> // 元素节点
</span> // 文本节点
<em>// 元素节点
</em> // 文本节点
</div>
// 7个节点
<div>
// 文本节点
<!-- <strong>
<span>1</span>
</strong> --> // 注释节点
// 文本节点
<span> // 元素节点
</span> // 文本节点
<em>// 元素节点
</em> // 文本节点
</div>
// 7个节点
## 对节点的增删改查
查
遍历节点树
- parentNode -> 父节点(最顶端的parentNode为#document)
- childNodes -> 子节点们
- firstChild -> 第一个子节点
- lastChild-> 最后一个子节点
- nextSibling ->后一个兄弟节点
- previousSibling -> 前一个兄弟结点
基于元素节点数的遍历
- parentElement -> 返回当前元素的父节点(ie不兼容)
- children -> 只返回当前元素的子节点
- node.childElementCount === node.children.length
当前元素节点的子元素节点 - firstElementChild -> 返回的是第一个元素节点 (IE不兼容)
- lastElementChild -> 返回最后一个元素节点 (IE不兼容)
- nextElementSibling/previousElementSibling
返回有一个/前一个兄弟元素节点
// 手动写children 方法
function getElementChild(node) {
var temp = {
length: 0,
push: Array.prototype.push,
splice: Array.prototype.splice
}
var child = node.childNodes;
var len = child.length;
for (var i = 0; i < len; i++) {
if (child[i].nodeType === 1) {
temp.push(child[i])
}
}
return temp;
}
// 根据传入参数返回前一个或者后一个兄弟元素节点
function retSibling(e, n) {
while (e && n) {
if (n > 0) {
if (e && e.nextElementSibling) {
e = e.nextElementSibling
} else {
for (e = nextSibling; e && e.nodeType != 1;e = nextSibling);
}
n--
} else {
if(e && e.previouseElement) {
e = e.previousElementSibiling
} else {
for (e = e.previousSibling; e && e.nodeType != 1; e = e.previousSibling)
}
n++
}
return e
}
}
}
2元素
DOM 查找
- document 代表文档
- document.getElementById("") // ie8一下 id不区分大写小
- document.getElementsByTagName("") // 标签名
- document.getElementsByClassName("")// 类名
- document.getElementByName("") // Name名
- dcoument.querySelector("") // css选择器, ie8一下没有
- document.querySelectorAll("") // css选择器
querySelector,querySelector内容不是实时改变
增
- doucment.createElement(); 增加元素节点
- document.createTextNode(); 增加文本节点
- document.createComment(); 增加注释节点
- document.createDocumentFragment()
插入节点
- PRAENTNODE.appChild() // 括号里写节点 在父元素追加节点
- PRAENTNODE .insertBefore(a,b)// insert(a),before(b)插入于b节点之前
// appChild()
//<div></div>`
var div = document.getElementsByTagName("div")[0];
var text = document.createTextNode("阿里巴巴");
var span = document.createElement('span')
div.appendChild(text);
div.appendChild(span)
var text1 = document.createTextNode('发家致富');
span.appendChild(text1)
span.appendChild(text) // append是剪切操作 ,会把div里的节点拿出来
/*<div>
<span>
“阿里巴巴”
"发家致富"
</span>
</div>
*/
删除
- preant.removeChild() // 父节点删除子节点
把元素剪切出来了,返回被删掉的节点 - child.remove() 无返回值
替换
parentNode.replaceChild(new,origin) 新元素替换老元素
元素的属性
innerHTML = “” // 可读可写 可以添加html文档
innerText = “” //可读可写 取只能取到文本而不是标签 ,写入也只是文本
inntext 火狐不兼容,火狐是textContent
div.innerHTML = "123"
div.innerHTML+="456" // 123456
Element节点的一些方法
- ele.setAttribute(name , value) // 设置属性值
- ele.getAttribute(name) // 获取该元素属性值
3窗口属性
滚动条
- window.pageXOffset /pageYOffset 纵向/横向滚动条 滚动的距离
// ie不兼容
当滚动条滚动400px 则离顶端400+首屏像素
ie的方法 ↓
- document.body/documentElement .scrollLeft/scrollTop
// 兼容性比较魂断,同时取两个值互加,总有一个有值一个是0
// document.body.scrollLeft+documentElement.scrollLeft
封装成双兼容方法
if (window.pageXOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
} else {
return {
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollRight
}
}
可视区域视口尺寸
可视区域视口相当于首屏尺寸
- window.innerWidth /innerHeight // 网页宽度 /高度
ie8不兼容 - document.documentElement.clientWidth/clientHeight
标准模式下,任意浏览器都兼容 - document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器
怪异模式:为了迎合老版本浏览器api 将<!html doc>标签去掉即可
document.compatMode -> BackCompat 怪异模式
// 求视口大小
function getViewportOffset() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else if (document.compatMode === "BackCompat") {
return {
w: document.body.clientWdith,
h: document.body.clientHeight
}
} else {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
查看元素的几何尺寸
- domEle.getBoundingClientRect() 任何元素都可以使用
返回一个对象,包含了距离属性
left,top代表左上角在x,y轴的距离,right,bottom代表右下角在x,y轴的距离
不是实时的 - dom.offsetWidth,dom.offsetHeight
视觉尺寸,不包含margin
查看元素的位置
- dom.offsetLeft,dom.offsetRight
忽略自身是否是定位元素,返回自身和有定位的父级元素的距离
对于无定位的父级元素,返回相对文档的坐标 - dom.offsetParent
返回最近有定位的父级元素,如果没有,返回body;body.offsetParent为null
让滚动条滚动
window上有三个方法
- scroll(x,y)
x: 让x轴滚动的距离,y:让y轴滚动的距离 - scrollTo(x,y)
同上 - scrollBy(x,y)
在原基础上累计滚动
3 操作css
- 操作行间样式 dom.style.prop
可读可写 行间样式表 没有兼容性问题
碰到float这样的保留字属性,前面应加 css
写入的形式必须是字符串型式
复合属性必须拆解,中划线变小驼峰式写法
div.style.backgroundColor = “grb(0,0,0)”、
div.style.cssFloat
- 查询计算样式 window.getComputedStyle(div,null)
获取当前元素所展示出的一切css现实值,只读不可写
window.getComputedStyle(div,null).width
当遇到百分比的值获取的是计算的后的像素、rgb等
ie不兼容 IE: ele.currentStyle.width
- 获取伪元素的样式:window.getComputedStyle(div,’:after/:before’)
跟上面的方法一样,把null换成’:after/:before’
封装一个获取样式的方法
function getStyle(elem,prop){
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop]
} else {
return elem.currentStyle[prop]
}
}
4事件
如何绑定一个事件
- div.on+事件类型 兼容性好
可以写句柄,直接写执行函数
- obj.addEventLister(事件类型,处理函数,false)
ie 不兼容 w3c标准,第三个参数用于冒泡
能给同一个对象的同一个时间绑定多个处理函数,当函数引用地址相同时,不能绑定多次
- obj.attachEvent(时间,处理函数)
ie独有 可以多次绑定同一个函数
这个方法this不指向自己
var div = document.getElementsByTagName('div')[0]
div.attachEvent('onclick',function(){
handle.call(div)
})
function handle() {
// 事件处理程序
// 这个this指向div
}
封装一个最终的事件和处理函数
function addEvent(elem, type, handle) {
if (elem.addEventListener) {
elem.addEventListener(type, handle, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, function () {
handle.call(elem)
});
} else {
elem['on' + type] = handle
}
}
解除事件
- elem.onclick = null ;
想让事件只执行一次 在函数末尾写elem.onclick = null
- elem.removeEventListener (‘click’, fn, false)
- elem.deatchEvent(‘on’+type,fn)
上面两条的fn必须是引用一样的函数
## 5 事件处理模型 ##
事件冒泡
结构上嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向木元素(自底向上)
事件捕获
结构上嵌套关系的元素,会存在事件捕获功能,即同一事件,自氟元素捕获至子元素(事件源元素)(自顶向下)
从父级元素到子级级元素
只有谷歌浏览器可以用
elem.addEventListener(type, handle, true) 把false改成true
还有一种事件捕获 :事件处理过程,防止鼠标检测帧频比事件监听快,拖拽容易失去目标
div.setCapture() div.releaveCaptrue()
一个对象的一个事件类型绑定两个处理函数的执行顺序:
先捕获后冒泡,但是到最后一个元素会按照函数的执行顺序执行
focus,blur,change,submit,resat不能冒泡
如何阻止冒泡
div.οnclick= function(e){
// e是事件处理对象
}
- e.stopPropagation() ie9一下不支持
- e.canceBubble = true IE独有
封装一个函数阻止冒泡
function stopBubble(e) {
if (e.stopPropgation) {
e.stopPropgation
} else {
e.cancelBubble = true
}
}
div.onclick= function(e){
stopBubble(e)
}
阻止默认事件
-
return false
比如 右键出菜单事件 浏览器自带
document.oncontextmenu = function(){}
必须以句柄的方式绑定的事件 -
e.preventDefault() W3C标准,ie9一下不兼容
-
ereturnValue = false 兼容IE
封装阻止默认事件函数
function cancelHandler(e){
if(e.preventDefalut){
e.preventDefalut
} else {
e.returnValue = false
}
}
<a href= ‘javascript:void()’> </a>可也以取消a标签的默认事件
事件原对象
function(e){} 浏览器会打包成事件对象
ie浏览器这是window.event
兼容性写法: var event = e|| window.event
如何找到是谁触发的事件(事件源)
- event.target 火狐只有这个
- event.srcElment IE只有和这个
- chrome两个都有
兼容性写法 var target= event.target|| event.srcElement
可以实现事件委托
鼠标事件
- click :down->up 组成一个click
- mousedown/mouseup
- mousemove
- contextmenu 阻止右键菜单
- mouseover/mouseleave
- 用button区分鼠标的按键 0/1/2
DOM3标准规定:click事件只能监听左键,只能通过mousedown和mouseup来判断鼠标键
// 判断鼠事件
document.onmousedown = function (e) {
if (e.button == 2) {
console.log("right");
} else if (e.button == 0) {
console.log("left");
}
}
// 区分拖拽和点击
var firstTime = 0;
var lastTime = 0;
var key = false
document.onmousedown = function () {
firstTime = new Date().getTime();
}
document.onmouseup = function () {
lastTime = new Date().getTime();
if (lastTime - firstTime < 300) {
key = true
}
}
document.onclick = function () {
if (key) {
console.log("click");
}
}
键盘事件
- keydown keyup keypress
- keydown -> keypress -> keyup
keydown 和 keypress的区别
keydown可以响应任意键盘按键,keypress只可以响应子字符类键盘按键
keypress返回ASCⅡ码 ,可以转换成相应字符
A keydown charcode是0
A keypress charcode 是 97 字符类按键监听
文本类事件
- input 输入一次出发一次
- change 聚焦和失去焦点的两个状态发生改变
- focus 聚焦出发
- blur 失去焦点触发
窗口事件
- scroll 滚动条滚动触发
- load 等待所有资源全都加载完执行