DOM 节点和元素的区别
-
获取元素
- id获取： getElementById
- class获取 ：getElementsByClassName
- tag获取 ：getElementsByTagName
- css选择器来获取： querySeletor
- 获取多个元素： querySeletorAll
- 通过名字 ： getElementByName
元素和节点的各种关系 (node节点 element 元素)
-
子关系
- 子元素 ： children
- 子节点： childNodes
- 第一个子元素 ：firstEelementChild
- 第一个子节点： firstChild
- 最后一个子元素： lastEelementChild
- 最后一个子节点：lastChild
-
父关系
- 父节点：parentNode
- 父元素：parentElement
-
兄弟关系
- 上一个子元素 ： previousElementSibiling
- 上一个子节点： previouseSibiling
- 下一个子元素： nextElementSibiling
- 下一个子节点：nextSibiling
-
元素的增删改查
-
创建一个元素 createElement("标签名");
-
添加一个父容器里面 父元素.appendChild(子元素)
- 只会添加到父容器的最后
-
添加到某一个元素之前 父元素.insertBefore("添加的元素","添加到哪个之前");
-
删除元素
- removeChild： 父元素.removeChild("要删除的元素");
- remove(): 要删除的元素.remove();
-
修改
- 替换: 父元素.replaceChild(“替换的新元素”,“替换的旧元素”);
-
-
获取非行间样式
- Chrome： 样式值 = getComputyStyle("元素","伪类")[‘样式名’]
- IE : currentStyle： 元素.currentStyle.样式名
-
元素大小
- 获取宽高 （width、height）
- 1.offset（自身的宽或者高+padding+border）：没有单位 1.获取元素 2.获取大小
- 语法：获取的元素.offsetWidth 获取的元素.offsetHeight
- 2.client : 自身宽高 + padding 没有border没有外边
- 语法：获取的元素.clientWidth 获取的元素.clientHeight
- 获取宽高 （width、height）
-
获取偏移量offset （top、left）
- 如果没有定位 会相对于页面来算偏移 语法：获取的元素.offsetLeft 获取的元素.offsetTop
- 如果有定位，会相对于父级来计算偏移量 语法：获取的元素.clientLeft 获取的元素.clientTop
-
节点类型 nodeType，获取子节点语法：父节点.childEles[子元素索引]
- 获取节点里的第一个元素 : 所有元素节点的类型都是1
- 文本节点： 所有的文本节点类型是3
- 注释节点：所有注释节点的类型是8
- 属性节点 ： 元素.attributes 可以获取属性节点的数组
-
所有的节点 都会有 nodeName ： 节点名； nodeValue ：节点的值
- 元素节点 :nodeName 就是标签名（是大写）,nodeValue:是null
- 文本节点 ： nodeName ：“#text”所有的文本节点 ; nodeValue 是具体的内容
- 注释节点： nodeName ：#comment ；nodeValue:注释的内容
- 属性节点 ： nodeName： 属性名 nodeValue：属性值
-
事件对象
- 几个坐标
- 点击位置离浏览器的左边距和上边距 : clientX / clientY;这个x、y是相对于浏览器窗口
- 触发事件的距离页面的左边距和上边距： pageX、 pageY;这个是相对于页面的x和y
- 相对于自身的左边距 和上边距 ： offsetX 、offsetY
- 几个坐标
-
鼠标事件
1.click ：点击鼠标左键
document.onclick = function(){
console.log("点击了鼠标")
}
2.dblclick: 双击鼠标
document.ondblclick = function(){
console.log("双击了");
}
3.右键点击
document.oncontextmenu = function(){
console.log("鼠标右键点击");
}
4.滚轮wheel
document.onwheel = function(){
console.log("触发滚轮事件");
}
5.mousemove ： 鼠标在元素上移动的时候触发 (不停的触发)
document.onmousemove = function(){
console.log("移动的时候触发");
}
6.mousedown:鼠标按下的时候触发 (按鼠标的左键)
document.onmousedown = function(){
console.log("鼠标按下的时候触发");
}
7.mouseup:鼠标抬起的时候
document.onmouseup = function(){
console.log("鼠标抬起的时候触发");
}
8.mouseover ：鼠标覆盖到一个元素的触发
document.onmouseover = function(){
console.log("鼠标移上去了");
}
9.mouseout ：鼠标移除一个元素的时候触发
document.onmouseout = function(){
console.log("鼠标移除");
}
10、mouseenter：鼠标进入一个元素的时候触发
document.onmouseenter = function(){
console.log("鼠标进入了document");
}
11.mouseleave : 鼠标离开一个元素的时候触发
document.onmouseleave = function(){
console.log("鼠标离开了");
}
- 键盘事件：1.键盘按下keydown 2. 键盘抬起 keyup 3.键盘按下抬起 keypress
1. 如何区分具体的按钮，通过事件对象来区分 区分每一个按键 通过keycode ；
document.onkeyup = function(e){
var event = e || window.event;
console.log( event.keyCode); // ascii
var keyCode = event.keyCode || event.which; // chrome :event.keyCode 火狐：event.which
if(keyCode==65){
console.log("点击了a按键");
}
}
2.组合按钮 : 事件对象里提供组合按钮的属性
altKey: 按下了alt 按键 ，按下了alt就是true 否则就是false
ctrlKey :被按下就是true 否则就是false
shiftKey
document.onkeydown = function(e){
console.log("alt",e.altKey)
console.log("ctrl",e.ctrlKey);
console.log(e.ctrlKey)
console.log('shift',e.shiftKey)
var event = e || window.event;
var keyCode = e.keyCode || e.which;
if(e.altKey && keyCode==65){
console.log("同时按了alt 和A键");
}
}
