012*【JS】 DOM常用方法、事件、事件的捕获和冒泡、事件的委托
目录
一： DOM 常用方法
1：获取元素的方式
2: 操作属性
3：操作样式 .style（行内） getComputedStyle（所有）
4: 操作元素的类名 classList
5: DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
6：节点属性 nodeType nodeName nodeValue
7：操作节点 增删改查（CRUD）
8. 获取浏览器窗口尺寸
二：事件
1：一个事件由什么东西组成
2: 事件解绑
dom0事件解绑
dom2事件解绑
3：事件类型
鼠标
键盘
表单
触摸
4：事件对象
三：事件的冒泡和捕获、事件委托
正文
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM-JS目的是操作 HTML 标签和 css 样式</title> <style> #box3 { height: 30px; } .item { width: 100px; height: 50px; background-color: purple; color: black; border-radius: 10px; } #box8 { width: 100px; height: 100px; padding: 10px; border: 5px solid red; background-color: yellow; box-sizing: border-box; /* display: none; */ margin: 100px; } </style> <style> #outer { width: 300px; height: 300px; background: yellow; overflow: hidden; } #center { width: 200px; height: 200px; background: blue; margin: 20px; overflow: hidden; } #inner { width: 100px; height: 100px; background: red; margin: 20px; } </style> </head> <body> <!-- id --> <div id="box"></div> <div id="box1"></div> <div id="box2"></div> <div class="green1">1111</div> <div id="box3" style="width: 100px;color:black;background-color: yellow;">333333</div> <!-- class --> <ul> <li class="newsitem">111</li> <li class="newsitem">111</li> </ul> <!-- tag --> <select name="" id="select"> <option value="1">11111</option> <option value="2" selected>2222</option> <option value="3">3333</option> </select> <!-- name --> <input name="username" type="text" id="username" /> <input name="password" type="password" id="password" /> <div id="box4" class="item item1 item2">属性列表</div> <button id="btn">click</button> <div>前一个兄元素节点</div>前一个兄节点 <div id="box5" index="1"> 节点 <p>111111</p> <p>22222</p> <!-- 我是注释 --> </div>后一个弟节点 <div>后一个弟元素节点</div> <br> <!-- 节点类型 --> <div class="box6">hello world<!-- kerwin --> </div> <!-- 操作节点 --> <div id="box7"> <div id="child">操作节点</div> </div> <!-- 偏移量 --> <div id="box8"> 偏移量 </div> <!-- 事件绑定 --> <div id="box10">aaaa</div> <div id="box11">bbbb</div> <!-- 事件解绑 --> <div id="box12">dom0事件解绑</div> <div id="box13">dom2事件解绑</div> <!-- 事件类型 --> <button id="btn14">事件类型</button> <!-- 键盘事件 --> <input type="text" id="inputUserName"> <!-- 表单事件 --> <form action="" id="myform"> <input type="text" id="myformusername"> <input type="reset" /> <input type="submit" value="提交" /> </form> <!-- 触摸时间 --> <div id="btn15">dom2事件解绑</div> <div id="outer"> <div id="center"> <div id="inner"></div> </div> </div> <!-- 事件委托 --> <ul id="list"> </ul> <script> /* 一： DOM 常用方法 1：获取元素的方式 1.1：getElementById 1.2：getElementsByClassName 1.3：getElementsByTagName 1.4: getElementsByName 1.5：querySelector css方式获取 1.6：querySelectorAll 2: 操作属性 2-1 innerHTML 2-2 innerText 2-3 value 3：操作样式 .style（行内） getComputedStyle（所有） 4: 操作元素的类名 classList 5: DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点 5.1:第一个节点：firstChild 第一个元素节点：firstElementChild 5.2: 最后一个节点：lastChild 最后一个元素节点：lastElementChild 5.3:上一个兄弟节点:previousSibling 上一个元素节点:previousElementSibling 5.4:下一个兄弟节点:nextSibling 下一个元素节点:nextElementSibling 5.5:父节点:parentNode vs 父元素节点：parentElement 5.6:属性列表attributes:获取某一个 元素节点 的所有 属性节点 6：节点属性 nodeType nodeName nodeValue 7：操作节点 增删改查（CRUD） 8. 获取浏览器窗口尺寸 */ // 1：获取元素的方式 console.log(document.documentElement) // html console.log(document.head) // 获取head console.log(document.body) //获取body // 1.1：getElementById var obox = document.getElementById("box") obox.innerHTML = "box" // 1.2：getElementsByClassName var items = document.getElementsByClassName("newsitem") console.log(items) //伪数组 for (var i = 0; i < items.length; i++) { items[i].innerHTML = "news-" + i } // Set => Array.from var newitems = Array.from(items) console.log(newitems) // 1.3：getElementsByTagName var items = document.getElementsByTagName("li") //伪数组 console.log(items) // 1.4:getElementsByName var item = document.getElementsByName("username") console.log(item[0]) item[0].value = "kerwin" // 1.5：querySelector css方式获取 按照css 选择器的方式来获取元素 //querySelector 返回一个对象， console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素 console.log(document.querySelector(".green1")) // 获取页面中第一个有 box 类名的元素 console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素 // 1.6：querySelectorAll var items = document.querySelectorAll("ul li.newsitem") // 伪数组 console.log(items) // 2. 操作属性 // 2-1 innerHTML console.log(box.innerHTML) box.innerHTML = "<h1>11111111</h1>" // 2-2 innerText console.log(box1.innerText) // 获取只有文本 box1.innerText = "<h1>1111111</h1>" //不解析 html console.log(box1.innerText) // 获取只有文本 // 2-3 value password.value = "2222222" console.log(password.value) // 获取值 console.log(select.value) select.value = "3" console.log(select.value) // 3：操作样式 // 只能行内样式方法 style --读写。 console.log(box3.style.width) console.log(box3.style["background-color"]) console.log(box3.style.backgroundColor) //驼峰 // 设置set box3.style.width = "200px" box3.style.backgroundColor = "red" // 内部样式，外部样式，行内 getComputedStyle 获取，不能赋值写样式。 var obox3 = document.getElementById("box3") var res30 = getComputedStyle(obox3)["background-color"] var res31 = getComputedStyle(obox3).backgroundColor console.log(res30, res31) // 不能赋值写样式。 // getComputedStyle(obox3).height = "10px" // 4: 操作元素的类名 class // classList属性 console.log(box4.classList) box4.classList.add("item2") box4.classList.remove("item2") box4.classList.remove("item1") //切换 toggle,动态添加和删除 btn.onclick = function () { box4.classList.toggle("item") } // 5 节点 元素节点、 属性节点、 文本节点 console.log("--->>>:所有节点") console.log(box5.childNodes) // 所有节点 console.log("--->>>:元素节点") console.log(box5.children) // 所有元素节点 // 5.1:第一个节点：firstChild 第一个元素节点：firstElementChild console.log(box5.firstChild) console.log(box5.firstElementChild) // 5.2: 最后一个节点：lastChild 最后一个元素节点：lastElementChild console.log(box5.lastChild) console.log(box5.lastElementChild) // 5.3:上一个兄弟节点:previousSibling 上一个元素节点:previousElementSibling console.log(box5.previousSibling) console.log(box5.previousElementSibling) // 5.4: 下一个兄弟节点:nextSibling 下一个元素节点:nextElementSibling console.log(box5.nextSibling) console.log(box5.nextElementSibling) // 5.5:父节点:parentNode vs 父元素节点：parentElement console.log(box5.parentNode.parentNode.parentNode) console.log(box5.parentElement.parentElement.parentElement) // 5.6:属性列表attributes:获取某一个 元素节点 的所有 属性节点 console.log(box5.getAttribute("index")) console.log(box5.attributes) // 6：节点属性 nodeType nodeName nodeValue console.log("--->>>:节点属性") var box6 = document.querySelector(".box6") console.log(box6.childNodes) for (var i = 0; i < box6.childNodes.length; i++) { console.log(box6.childNodes[i].nodeType) console.log(box6.childNodes[i].nodeName) console.log(box6.childNodes[i].nodeValue) } // 7：操作节点 增删改查（CRUD） // 7.1 创建 createElement var odiv = document.createElement("div") odiv.className = "aaaa" odiv.id = "aaa" odiv.style.background = "yellow" odiv.innerHTML = "我是新创建的节点" console.log(odiv) // 7.2 末尾节点 appendChild box7.appendChild(odiv) // 7.3 insertBefore(要插入的节点，谁的前面) box7.insertBefore(odiv, child) // 7.4: 删除节点(节点对象) // box7.removeChild(child) // box7.remove() //删除自己以及后代 // 7.5 替换节点 replaceChild(新的节点，老的节点) var odiv2 = document.createElement("div") odiv2.innerHTML = "替换节点" box7.replaceChild(odiv2, child) // 7.6:克隆节点() false 不克隆后代 // true 克隆后代 var oCloneBox = box7.cloneNode(true) console.log(oCloneBox) oCloneBox.id = "box2" oCloneBox.innerHTML = "克隆" // document.body.appendChild(oCloneBox) // 7.7 获取元素的偏移量 /* 参考点：是定位父级 如果父级元素都没有定位， 偏移量相对于body */ console.log(box8.offsetLeft, box8.offsetTop) //offset* (border+padding+content) console.log(box8.offsetWidth, box8.offsetHeight) //client* (padding+content) console.log(box8.clientWidth, box8.clientWidth) // 8. 获取浏览器窗口尺寸 innerWidth 包含滚动条 clientWidth 不包含滚动条 console.log("宽度", innerWidth) console.log("高度", innerHeight) console.log("宽度", document.documentElement.clientWidth) console.log("高度", document.documentElement.clientHeight) </script> <script> /* 二：事件 1：一个事件由什么东西组成 触发谁的事件：事件源 触发什么事件：事件类型 触发以后做什么：事件处理函数 2: 事件解绑 dom0事件解绑 dom2事件解绑 3：事件类型 鼠标 键盘 表单 触摸 4：事件对象 */ // 1: 事件绑定 box10.onclick = function () { console.log("11111") } // dom0 类型-- 后面会覆盖前面的。 box10.onclick = function () { console.log("22222") } //dom2 绑定多个事件处理函数 按照顺序执行 box11.addEventListener("click", function () { console.log("1111111") }) box11.addEventListener("click", function () { console.log("222222") }) box11.addEventListener("click", function () { console.log("3333333") }) // dom2兼容性 ie 6 7 8 // box11.attachEvent("onclick",function(){ // console.log("111111") // }) // box11.attachEvent("onclick",function(){ // console.log("222222") // }) // 2: 事件解绑 // dom0 事件解绑 box10.onclick = function () { console.log("谢谢惠顾") this.onclick = null } // dom2 事件解绑 // 3：事件类型 /* 3.1 鼠标事件 onclick ：点击事件 dblclick ：双击事件 contextmenu ： 右键单击事件 mousedown ：鼠标左键按下事件 mouseup ：鼠标左键抬起事件 mousemove ：鼠标移动 mouseover ：鼠标移入事件 mouseout ：鼠标移出事件 mouseenter ：鼠标移入事件 mouseleave ：鼠标移出事件 */ btn14.onclick = function () { console.log("onclick ：点击事件") } btn14.dblclick = function () { console.log("dblclick ：双击事件") } btn14.contextmenu = function () { console.log("contextmenu ： 右键单击事件") } btn14.mousedown = function () { console.log("mousedown ：鼠标左键按下事件") } btn14.mouseup = function () { console.log("mouseup ：鼠标左键抬起事件") } btn14.mousemove = function () { console.log("mouseover ：鼠标移入事件") } btn14.mouseout = function () { console.log("mouseout ：鼠标移出事件") } btn14.mouseenter = function () { console.log("mouseenter ：鼠标移入事件") } btn14.mouseleave = function () { console.log("mouseleave ：鼠标移出事件") } // 3.2 键盘事件 username.onkeydown = function () { console.log("按下键盘", "判读是不是回车键") } username.onkeyup = function () { console.log("抬起键盘", "判读是不是回车键") } // 3.3 表单事件 myformusername.onfocus = function () { console.log("获取焦点") } myformusername.onblur = function () { console.log("失去焦点") } // change 获取焦点， 失去焦点的对比里面内容不一样才会触发 // myformusername.onchange = function(){ // console.log("change") // } //input 内容不一样 myformusername.oninput = function () { console.log("input") } // submit ,reset myformusername.onsubmit = function () { console.log("submit", "校验表单内容") return false } myformusername.onreset = function () { console.log("reset") } // 3.4 触摸事件 btn15.ontouchstart = function () { console.log("touchstart") } btn15.ontouchmove = function () { console.log("touchmove") } btn15.ontouchend = function () { console.log("touchend") } btn15.ontouchcancel = function () { console.log("touchcancel") } // 4 事件对象 myformusername.onkeyup = function (evt) { console.log(evt.keyCode) if (evt.keyCode === 13) { console.log("创建节点") } } btn15.onclick = function (evt) { evt = evt || window.event console.log(evt) } </script> <script> /* 三：时间的冒泡和捕获 */ // 1： dom0 事件冒泡 inner.onclick = function () { console.log("inner") } center.onclick = function () { console.log("center") } outer.onclick = function () { console.log("outer") } document.body.onclick = function () { console.log("document.body") } document.documentElement.onclick = function () { console.log("document.documentElement") } document.onclick = function () { console.log("document") } window.onclick = function () { console.log("window") } /* 标准的dom事件流：先捕获后找到目标后冒泡响应 捕获：window=>docuemtn=>body=>outer 目标： inner 冒泡： outer=>body=>docuemnt=>window、 ie 低版本 只支持冒泡 默认情况 只在冒泡触发 按照dom2事件绑定，并进行配置 才能看到捕获的回调函数被触发。 */ inner.addEventListener("click", function () { console.log("inner") }) center.addEventListener("click", function () { console.log("center") }) outer.addEventListener("click", function () { console.log("outer") }) document.body.addEventListener("click", function () { console.log("document.body") }) document.documentElement.addEventListener("click", function () { console.log("document.docuementElement") }) document.addEventListener("click", function () { console.log("document") }) window.addEventListener("click", function () { console.log("window") }) // window->document->body->outer->inner // 从根到外层 inner.addEventListener("click", function () { console.log("inner-捕获") }, true) center.addEventListener("click", function () { console.log("center-捕获") }, true) outer.addEventListener("click", function () { console.log("outer-捕获") }, true) document.body.addEventListener("click", function () { console.log("document.body-捕获") }, true) document.documentElement.addEventListener("click", function () { console.log("document.docuementElement-捕获") }, true) document.addEventListener("click", function (env) { console.log("document-捕获") // 阻止时间传播 // env.stopPropagation() }, true) window.addEventListener("click", function () { console.log("window-捕获") }, true) // 3 阻止默认行为 // dom0 return false 阻止默认行为 // document.oncontextmenu = function(){ // console.log("右键单击.自定义右键菜单") // return false // } //dom2 evt.preventDefault() //dom2 ie evt.returnValue = false document.addEventListener("contextmenu", function (evt) { console.log("右键单击.自定义右键菜单") // evt.preventDefault() }) // 4 事件委托 var arr = ["111", "2222", "333"] for (var i = 0; i < arr.length; i++) { var oli = document.createElement("li") oli.innerHTML = arr[i] var obutton = document.createElement("button") obutton.innerHTML = "delete" oli.appendChild(obutton) list.appendChild(oli) } list.onclick = function (evt) { console.log(evt.target.nodeName) if (evt.target.nodeName === "BUTTON") { evt.target.parentNode.remove() } } </script> </body> </html>
详解
