DOM及DOM二级事件

DOM Document Object Model 文档对象模型

javascript由三部分组成：ECMAScript、BOM、DOM

DOM提供API来操作HTML页面，如：document下面的东西

1、常用子节点（子节点有十二种）

元素节点
文本节点（text)，回车就会产生文本节点
注释节点(comment)

    <div id="wrap"><p>p1</p><p>p2</p><a href="">a</a>呜呼啦呼，黑魔变身<b>b</b></div>let owrap = document.getElementById("wrap")console.log(owrap.childNodes);// 注释节点的话，修改nodevalueowrap.childNodes[7].innerText = "小兰，哪里逃"console.log(document.querySelector("#wrap a") === owrap.childNodes[5]);  // true//document.querySelector("#wrap a")  返回的是节点对象；owrap.childNodes[6]返回的是对象。获取方式不同，但是是同一个a

2、节点的属性

每个节点本身是个对象

nodeValue,元素节点无nodeValue

        // 此处的childNodes[0]是div回车那里，存储形式是按字符串存储，修改如下owrap.childNodes[0].nodeValue = "小月在此"

nodeType

        // nodeType可显示节点类型,节点类型与编号一一对应console.log(owrap.childNodes[1].nodeType);  // 1

nodeName

text 的 nodeName 是 #text

comment 的 nodeName 是 #commentt

p 的 nodeName 是大写的P

3、获取节点

        //获取元素节点(平常操作最多)let owrap = document.getElementById("wrap")console.log(owrap.children)     //HTMLCollection(4)[p,div,div,a]// console.log(owrap.children.forEach())   //报错console.log([...owrap.children].forEach((node,index)=>{   // forEach要传一个函数参数console.log(node,index)}))

        //获取id为标签a的html结构上的父级节点let oabd = document.getElementById("abd")console.log(oabd.parentNode)  //  <div>//      <a id="abd"></a>  //          </div>// 定位父级,自身无定位属性的话，也是有定位父级的console.log(oabd.offsetParent)

oabd.parentNode.parentNode,可获得oabd的爷爷，以此类推

 <div id="abd"><p></p></div>//获取所有节点let oabd = document.getElementById("abd")console.log(oabd.getElementsByTagName("*"))   // [p]

    <div id="wrap"><div></div><p><a href=""></a></p></div><p id="op"></p>let owrap = document.getElementById("wrap")console.log(owrap.firstChild)   //#textconsole.log(owrap.firstElementChild)   // <div></div>console.log(owrap.lastChild)  //#textconsole.log(owrap.lastElementChild)    //<p>...</p>console.log(owrap.nextSibling)   //#textconsole.log(owrap.previousElementSibling)  //nullconsole.log(owrap.previousSibling)   //#text

4、节点的创建、添加与删除

    <div id="wrap"><div></div></div>//用此方法添加标签时，会覆盖原始标签，且会使原标签上的onclick等操作失效let owrap = document.getElementById("wrap")owrap.innerHTML += '<a href="">我是标签a</a>'console.log(owrap.children)   // [div, a]

    <div id="wrap"><div></div></div>//添加节点let owrap = document.getElementById("wrap")let oA = document.createElement("a")owrap.appendChild(oA)console.log(owrap.children)   // [div,a]

    <div id="wrap"><div></div></div>//插入节点let owrap = document.getElementById("wrap")let oA = document.createElement("a")//插入标签a到owrap的第一个节点前owrap.insertBefore(oA, owrap.children[0])console.log(owrap.children)   // [a,div]

    <div id="wrap"><div></div></div>//删除节点，节点不能自杀，需要通过父级移除 let owrap = document.getElementById("wrap")let odiv = document.querySelector("#wrap .lan")owrap.removeChild(odiv)   // 或者odiv.parentNode.removeChile(odiv)console.log(owrap.children)   // []
//执行了删除节点之后，再次打印被删除节点时，还是显示原先的节点。因为页面是页面，内存是内存，这个移除操作只是从页面中移除，内存中还保留

5、DOM 2级事件

DOM 0级事件（赋值式）：新事件会覆盖原事件
document.onclick = function(){}
DOM 2级事件（函数式）：新事件不覆盖原事件
document.addEventListener(“click”,function(){})

6、取消2级事件

document.removeEventListener(“click”,clickEvent2)

        function clickEvent2(){console.log(123)}document.addEventListener("click",clickEvent2)document.removeEventListener("click",clickEvent2)

低版本ie2级事件：
document.attachEvent()
document.detachEvent()

DOM及DOM二级事件相关推荐

【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
（九）JS-WEB-API（DOM、BOM、事件、Ajax、存储）【每个工程师必须熟练掌握的技能】
JS-WEB-API 提问 DOM BOM 事件 Ajax 存储从JS基础知识到JS-WEB-API JS基础知识 JS-WEB-API DOM(Document Object Model) DOM ...
一个Dom绑定多个事件
在原生操作dom元素的时候,常常需要用到一个dom绑定多个事件,比如一个元素既要点击又要数遍移入:要同时监听到两个事件原生需要addEventlistener 直接上代码: <!DOCTYPE ...
javascript 常用的dom操作及源生事件
javascript dom操作及源生事件获取dom节点操作dom节点源生事件 -- 绑定.解除事件源生事件 -- 事件派送获取dom节点 document.getElementById() ...
dom 的其他类事件
dom 的其他类事件: 1.onfocus 事件 2.onblur 事件 3.onresize 事件 4.onscroll 事件 5.onchange 事件 6.onload 事件先来说说onloa ...
JavaScript的DOM之鼠标悬浮事件
JS的DOM之鼠标悬浮事件鼠标悬浮事件之onmouseover()和onmouseout()事件这里用大白话介绍一下最简单的原理: 就是当鼠标在这块区域时候会触发相应事件,将鼠标挪开则恢复原先事件 ...
虚拟dom_虚拟DOM与dom diff
什么是虚拟DOM 虚拟DOM是一颗以JavaScript对象(node节点)作为基础的树,用对象属性来描述节点,他是对真实DOM的抽象,通过一些列操作使这棵树映射到真实环境上虚拟dom就是能代表DO ...
Vue进阶之Virtual DOM(虚拟DOM) 实现原理
Vue进阶之Virtual DOM(虚拟DOM) 实现原理 Virtual DOM(虚拟 DOM),是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象,所以叫 Virtual D ...
前端学习之JavaScript DOM以及DOM操作的基础知识
在了解了javascript的语言基础和特性后 javascript真正大放光彩的地方来了--这就是javascript DOM Javascript DOM DOM(Document Object ...
ihtml2document能不能根据id获取dom_回到基础：什么是DOM及DOM操作？
译者:前端小智来源:valentinog 为了保证的可读性,本文采用意译而非直译. 文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web ...