1. 操作DOM(常规意义就是对DOM,进行增删改查)
1.1 创建
语法:document.createElement("创建的元素节点")
语法:document.createTextNode("创建的文本节点")
1.2 添加
怎么把数据放进到新的标签中呢?
语法:创建的文本.appendChild(文本内容)
也可以把标签添加到数据的最后
语法:父级.appendChild(新的标签)
语法:父级.insertBefore(要插入的新节点, 插入到那个节点的前面)如果第二个参数是null就插入到父级点的最后
1.3 删除DOM
语法:父级.removeChild(要删除的节点)
1.4 修改某一个节点
语法:父级.replaceChild(新的节点, 被修改的节点)
2. 克隆DOM
var oUl = document.querySelector('ul')
var oLi = document.querySelector('li')
console.log(oUl)
console.log(oLi)
oUl.appendChild(oLi)
复制(克隆)一个LI
想要复制的节点.cloneNode(布尔值)
true 克隆子节点
false 不克隆子节点
3. 获取元素偏移量
a.获取元素
b.获取元素的偏移量
语法:元素.offsetLeft
注意:如果元素本身有定位它父元素没有写定位就相对于浏览器,如果父元素写了定位它就相对于父元素
4. 获取元素尺寸与浏览器窗口尺寸
4.1 获取元素尺寸(占地面积)
元素.offsetXXX
实际宽度 + padding + border
元素.clientXXX
实际宽度 + padding
4.2 获取浏览器窗口尺寸
window.innerXXX
计算时包括浏览器的滚动条
document.documentElement.clientXXX
计算时 不会计算滚动条
5. js的事件
5.1 意义
在某一时刻,用户(在页面)做了某一件事情,我们要做出反馈
5.1 事件的三要素
a.事件源
b.事件类型
c.事情处理函数
5.3 DOM的零级事件
事件源.on + 事件类型 = 事件处理函数
缺点:无法绑定多个同类型的事件,后边新写的事件,会覆盖去前面写的事件
DOM的2级事件绑定(事件监听)
事件源.addEventListener('事件类型', 事件处理函数,布尔值)
6. 浏览器事件
<head>
<script>
<!-- 1. 滚动事件 -->
var oDiv = document.querySelector('div')
console.log(oDiv)
解释:如果在这里打印会打印一个空 因为要当页面所有资源加载完毕以后时才执行,这个时候不知道div是什么所有打印的是一个空
window.onload = function () {
var oDiv = document.querySelector('div')
console.log(oDiv)
}
</script>
</head>
<body>
<div>11111111</div>
</body>
7. 鼠标事件
7.1 左键单击
元素.onclick = 函数
7.2 双击事件
元素.ondblclick = 函数
7.3 右键事件
元素.oncontextmenu = 函数
7.4 鼠标按下事件 (按下就会触发)
元素.onmousedown = 函数
7.5 鼠标抬起事件 (鼠标抬起时会触发)
元素.onmouseup = 函数
7.6 鼠标移入事件 (鼠标移入元素内部时触发)
元素.onmouseover = 函数
元素.onmouseenter = 函数
7.7 鼠标移出事件
元素.onmouseout = 函数
元素.onmouseleave = 函数
注意:onmouseover onmouseout 两个方法 移入元素和移入子元素盒子都会触发
onmouseenter onmouseleave 两个方法 只会在移入元素时触发
7.8 鼠标移动事件
元素.onmousemove = 函数
8. 键盘事件
8.1 范围
键盘事件只针对document和input
8.2 键盘抬起事件
document.onKeyup = 函数
8.3 键盘按下事件
document.onKeydown = 函数
8.4 键盘按下抬起事件
document.onKeypress = 函数
9. 表单事件
9.1 获取焦点事件
元素.onfocus = 函数
9.2 失去焦点事件
元素.onblur = 函数
9.3 文本框内容改变时触发
元素.onchange = 函数
9.4 文本框输入内容时触发
元素.oninput = 函数
10. 事件对象
当事件触发时,携带一些信息
11. 获取鼠标位置
11.1 获取相对于事件源的鼠标位置
元素.onclick = function(e) {
e.offsetX 相对于事件源左上角
e.offsetY
}
11.2 获取相对于页面的鼠标位置
元素.onclick = function(e) {
e.pageX 相对于页面左上角
e.pageY
}
11.1 获取相对于浏览器的鼠标位置
元素.onclick = function(e) {
e.clientX 相对于浏览器左上角
e.clientY
}
12. 键盘按键
要在浏览器里面操作
e.key 返回按下的按键
e.keycode 返回按下的键盘的进制码
注意:keycode已经被移除,但是很多主流浏览器还支持使用
