DOM-插入节点和事件语法

一、插入节点

<div class="box">
    <div class="xx">111</div>
    <div class="xx">22233</div>
    <div class="xx">333</div>
    <div class="xx">444</div>
</div>
<script>
var box=document.querySelector(".box")
var yy=document.createElement("span")
yy.innerHTML="hello"
box.insertBefore(yy,box.children[2])
</script>

 

 2、事件语法

1、事件绑定

事件：元素在某种状态(浏览器实现的也叫事件触发)达成时 要执行的提前设定好程序 我们称之为事件句柄

三要素: 事件源 事件类型 事件处理程序(handler)

事件绑定方式：

（1）行内式：标签的属性值是执行代码

<div class="box" onclick="javaScript:console.log(9999999)">good</div>

（2）属性绑定：只能绑定一个handler（事件处理程序）

<div class="box" onclick="javaScript:myconsole.mylog()">gousd</div>

<div class="box" onclick="myconsole.mylog()">gousd</div>

<div class="box" onclick="fn()">hello</div>

<script>
var myconsole={
     mylog:()=>{
         console.log("你好")
     }
}
function fn(){
     console.log("暗号")
}
</script>

(3)给元素添加一个事件监听器 （函数处理程序）

<div class="box">well</div>
<script>
var box=document.querySelector(".box")
box.addEventListener("click",function(){
console.log("牡丹江")
}
</script>

事件的解绑方式：box.οncl