操纵 DOM 节点
-
创建节点
var myLi = document.createElement('li') -
向页面中(增删改查)一个节点
/** * 操作 DOM * 常规意义上的 操作DOM, 就是增删改查 * * 1. 创建 (创建完成之后, 页面并不会有) * 2. 增删改查 */ // 1.1 创建 元素节点 var myLi = document.createElement('li') // 1.2 创建文本节点 var myStr = document.createTextNode('222222222222222') myLi.appendChild(myStr) console.log(myLi) // console.log(myStr) // 获取UL标签 var oUl = document.querySelector('ul') var oLi = document.getElementsByTagName('li')[1] // 2.1 增加dom(添加到指定父节点的最后) // oUl.appendChild(myLi) // 2.2 增加dom(添加到指定父节点的最后) 语法; 父节点.insertBefore(要插入的新节点, 插入到那个节点前(传递Null的话是插入到父节点最后)) // oUl.insertBefore(myLi, null) // 2.3 增加dom(添加到父节点的最前边) // oUl.insertBefore(myLi, oUl.firstElementChild) // 3. 删除DOM 父节点.removeChild(要删除的节点) // oUl.removeChild(oUl.firstElementChild) // 4. 修改某一个节点 父节点.replaceChild(新的节点, 要被修改的节点) // oUl.replaceChild(myLi, oLi) -
克隆页面中的某一个节点
<ul> <li>1</li> <li>2</li> <li>3</li> </ul> var oUl = document.querySelector('ul') var oLi = document.querySelector('li') /** * 复制(克隆)一个 LI * * 想要复制的节点.cloneNode(参数布尔值) * 参数 false 不克隆子节点 默认 * 参数 true 克隆子节点 */ var newLi = oLi.cloneNode(true) console.log(newLi) oUl.appendChild(newLi)
获取元素偏移量
-
offsetParent
-
offsetLeft / offsetTop
// 1. 获取元素 var box2 = document.querySelector('.box2') // 2. 获取元素相对父级 元素.offsetParent console.log(box2.offsetParent) // 3. 获取元素的偏移量 console.log('box2.offsetLeft', box2.offsetLeft) console.log('box2.offsetTop', box2.offsetTop)
获取元素尺寸
-
offsetWidth 和 offsetHeight
-
clientWidth 和 clientHeight
var oDiv = document.querySelector('div') // 获取元素尺寸(占地面积) // 1. offsetXXX ---> 实际宽度 + padding + border // console.log('oDiv.offsetWidth', oDiv.offsetWidth) // console.log('oDiv.offsetHeight', oDiv.offsetHeight) // console.log('======================') // 2. clientXXX ---> 实际宽度 + padding // console.log('oDiv.clientWidth', oDiv.clientWidth) // console.log('oDiv.clientHeight', oDiv.clientHeight)
获取浏览器窗口尺寸
-
clientWidth
-
clientHeight
// 1. window.innerXXX ---> 计算时 会包含浏览器的滚动条 console.log('window.innerWidth', window.innerWidth) console.log('window.innerHeight', window.innerHeight) // 2. document.documentElement.clientXXX ---> 计算时 不会计算滚动条(只计算浏览器的可视区域) console.log('document.documentElement.clientWidth', document.documentElement.clientWidth) console.log('document.documentElement.clientWidth', document.documentElement.clientHeight)
什么是 事件 (一个事件的组成)
/**
* 事件
* 在某一个时刻, 用户(在页面)做了某一件事, 我要给出的反馈
*
* 事件的三要素
* 1. 事件源
* 2. 事件类型
* 3. 事件处理函数
*
* DOM 0级事件绑定 事件源.on + 事件类型 = 事件处理函数
* 弊端: 无法绑定多个同类型的事件, 后边新写的事件, 会覆盖掉原有的事件
*
* DOM 2级事件绑定(事件监听) 事件源.addEventListener('事件类型', 事件处理函数, 第三个参数是可选的(欠着))
*/
var oDiv = document.querySelector('div')
// oDiv.onclick = function () {
// console.log('绑定给 div 的第一个事件')
// }
// oDiv.onclick = function () {
// console.log('绑定给 div 的第二个事件')
// }
oDiv.addEventListener('click', function () {
console.log('绑定给 div 的第一个事件')
})
oDiv.addEventListener('click', function () {
console.log('绑定给 div 的第二个事件')
})
常见的事件 (了解)
-
浏览器事件
// 1. 滚动事件 // var oDiv = document.querySelector('div') // console.log(oDiv) // null window.onload = function () { // 当 页面 所有资源加载完毕时 执行 var oDiv = document.querySelector('div') console.log(oDiv) } -
鼠标事件
<div> <div class="sBox"></div> </div> // JS 的鼠标事件 var oDiv = document.querySelector('div') // 1. 左键单击 oDiv.onclick = function () { console.log('单击元素时触发') } // 2. 双击事件 300ms 内连续点击两次鼠标 oDiv.ondblclick = function () { console.log('双击元素时触发') } // 3. 右键事件 鼠标右键单击 oDiv.oncontextmenu = function () { console.log('鼠标右键单击时触发') } // 4. 鼠标按下事件 鼠标左键按下的时候会触发的(哪怕鼠标没有抬起) oDiv.onmousedown = function () { console.log('鼠标按下时触发') } // 5. 鼠标抬起事件 鼠标左键抬起的时候会触发的 oDiv.onmouseup = function () { console.log('鼠标抬起时触发') } // 6. 鼠标移入事件 鼠标的移动到元素内部时触发 oDiv.onmouseover = function () { console.log('onmouseover 鼠标移入时触发') } // 7. 鼠标移出事件 鼠标移动出元素内部时触发 oDiv.onmouseout = function () { console.log('onmouseout 鼠标移出时触发') } // 8. 鼠标移动事件 鼠标在元素内部移动时触发 oDiv.onmousemove = function () { // console.log('鼠标移动时触发') } // 9. 鼠标移入事件2 oDiv.onmouseenter = function () { console.log('onmouseenter 鼠标移入事件2') } // 10. 鼠标移出事件2 oDiv.onmouseleave = function () { console.log('onmouseleave 鼠标移出事件2') } // onmouseover onmouseout 两个方法 移入元素和移入元素子盒子时都会触发 // onmouseenter onmouseleave 两个方法 只会在移入元素时触发 -
键盘事件
<input type="text"> /** * 键盘事件: * document 或者 input * * document.on键盘事件的事件类型 = function () {} */ // 1. 键盘抬起事件 document.onkeyup = function () { console.log('键盘按键抬起') } // 2. 键盘按下事件 document.onkeydown = function () { console.log('键盘某个按键被按下') } // 3. 键盘按下抬起事件 document.onkeypress = function () { console.log('键盘按下抬起时触发') } -
表单事件
文本框: <input type="text" id="inp"> // 表单事件 var inp = document.querySelector('#inp') // 1. 获得焦点事件 inp.onfocus = function () { console.log('当前文本框获得焦点') } // 2. 失去焦点事件 inp.onblur = function () { console.log('当前文本框失去焦点') } // 3. 文本框内容改变时触发 inp.onchange = function () { console.log('当前文本框内容被更改') } // 4. 文本框输入内容时触发 inp.oninput = function () { console.log('当前文本框正在输入内容') }
事件对象(EVENT)
-
window.event
-
形参 event
<div></div> /** * 事件对象 * * 当事件触发时, 携带一些信息 * * 当前时间的事件源是谁? * 鼠标点击的位置在哪里(点击事件) * 键盘按下了那个按键(键盘事件) */ var oDiv = document.querySelector('div') oDiv.onclick = function (e) { console.log(e) }
点击事件的光标点获取
-
offsetX 和 offsetY (相对于事件源)
-
clientX 和 clientY (相对于浏览器窗口你点击的坐标点)
-
pageX 和 pageY (相对于页面你点击的坐标点)
<div></div> /** * 获取鼠标按下时的坐标 * * 相对于 * 1. 事件源 * 2. 页面 * 3. 浏览器窗口 */ var oDiv = document.querySelector('div') oDiv.onclick = function (e) { // 1. 获取 相对于 事件源 的鼠标坐标点 console.log('====================================') console.log('相对于事件源 X 轴', e.offsetX) console.log('相对于事件源 Y 轴', e.offsetY) // 2. 获取相对于 页面 的坐标点 console.log('====================================') console.log('相对于页面的 X 轴', e.pageX) console.log('相对于页面的 Y 轴', e.pageY) // 3. 获取相对于 浏览器窗口 的坐标点 console.log('====================================') console.log('相对于浏览器窗口的 X 轴', e.clientX) console.log('相对于浏览器窗口的 Y 轴', e.clientY) }
获取键盘按键
-
e.key
-
e.keyCode
<input type="text" id="inp"> /** * 键盘按键 * * e.key ===> 返回按下的按键 * e.keyCode ===> 返回按下的按键的进制码 * keyCode 已经被移除, 但是很多主流浏览器还支持使用 */ var inp = document.querySelector('#inp') inp.onkeyup = function (e) { console.log(e) if (e.ctrlKey && e.key == 'a') { console.log('此时按下了 ctrl健 和 a键') } }
