JavaScript 自用笔记（四）

最新推荐文章于 2024-09-15 23:59:26 发布

Whnist

最新推荐文章于 2024-09-15 23:59:26 发布

阅读量2k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Meg_Fu/article/details/128624191

版权

JS

三十、DOM
三十一、事件

三十、DOM

– DOM（Document object Mode1）:文档对象模型
– 其实就是操作htm1中的标签的一些能力
– 我们可以操作哪些内容
。获取一个元素
。移除一个元素
。创建一个元素
。向页面里面添加一个元素
。给元素绑定一些事件
。获取元素的属性
。给元素添加一些css样式
。…
– DOM的核心对象就是docuemnt对象
– document对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
– DOM:页面中的标签，我们通过js获取到以后，就把这个对象叫做DOM对象

（一）获取一个元素

– 通过js 代码来获取页面中的标签
– 获取到以后我们就可以操作这些标签了

getElementByld

– getElementById是通过标签的id名称来获取标签的
– 因为在一个页面中id是唯一的，所以获取到的就是一个元素

<body>
	<div id=""box""></div>
	<script>
		var box = document.getElementById("box")
		console.log(box)
	</script>
</body>

○获取到的就是页面中的那个id为box的div标签

getElementByClassName

	<script>
		var box = document.getElementByClassName("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.filter)
	</script> //伪数组=>真数组
</body>

//html,head,body非常规
//常规=>id,class,tag......
console.log(document.documentElement)//rem
console.log(document.head)//获取head
console.log(document.body)//获取body

getElementsByTagName

var items = document.getElementsByTagName( "li")
console.log(items)

getElementsByName

var item = document.getElementsByName("username")
console.log(item[0])
item[0].value = "kerwin"

querySelector 返回遇到的一个对象

var item = document.queryselector(".newsitem")
console.log(item)

querySelectorAll 返回遇到的一个对象

var item = document.queryselector("ul li.newsitem")
console.log(item)

（二）操作元素属性

<div id="box" kerwin="hello">hello</div>
<input type="text" value="hello" id="username">//文本框
<input type="checkbox" checked id="rember"/>//复选框
<img src="" alt="" id="photo">

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
<script>
/*
元素自带（原生）属性自定义属性
*/
//操作原生属性
box.innerHTML = "22222"

username.type = "password"
rember.checked = false //取消勾选
photo.src = "图片地址"

//自定义属性 setAttribute  getAttibute  removeAttibute
box.setAttribute("tiechui" = "22222")
console.log(box.getAttibute("tiechui"))
box.removeAttibute("tiechui")
box.removeAttibute("fuyun")

var oitems= document.getElementsByTagName("1i")
for(var i-e;icoitems.length;i++){
	oitems[i].setAttribute( "fuyun",i)
	//用法：给标签li添加属性fuyun
</script>

自定义（另一种）：
〇 date-
〇 .dateset

（三*）密码可视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="passworf" id="password">
    <button id="eyebtn">eye</button>
    <script>
        var passInput = document.getElementById("password")
        var eyeBtn = document.querySelector("#eyebtn") 

        eyeBtn.onclick = function(){
            console.log(passInput.type)

            if(passInput.type==="password"){
                passInput.type = "text"
            }else{
                passInput.type = "password"
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

（四*）全选

<body>
    <input type="checkbox" id="all"><!-- 全选/全不选 -->
    <hr>
    <ul class="shop">
        <li>
            <input type="checkbox">商品1
        </li>
        <li>
            <input type="checkbox">商品2
        </li>
        <li>
            <input type="checkbox">商品3
        </li>
        <li>
            <input type="checkbox">商品4
        </li>
    </ul>
    <script>
        var oAll = document.querySelector("#all") 
        var oitems = document.querySelectorAll(".shop input")
        oAll.onclick = function(){
            console.log(oAll.checked)
            for(var i=0;i<oitems.length;i++){
                oitems[i].checked = oAll.checked
            }
        }

        for(var i=0;i<oitems.length;i++){
            oitems[i].onclick = handler
        }

        function handler(){
            var count = 0
            for(var i=0;i<oitems.length;i++){
                 if(oitems[i].checked) count++
            }
            if(count===oitems.length){
                oAll.checked = true
            }else{
                oAll.checked = false
            }
        }
    </script>
</body>

（五）操作元素文本内容

innerHTML
获取完整的html片段，设置完整的html内容

innerText
打印出文本，不解析html

value
设置属性值，返回属性值

（六）操作元素样式

只能行内样式方法 style – 读写

console.log(box.style.height)
console.log(box.style.backgroundColor)
console.log(box.style["background-color"])

box.style.width = "200px"

内部样式，外部样式，行内 getComputedStyle 获取，不能赋值写样式

var res =getComputedStyle("box")
var res =getComputedstyle(obox).backgroundColor
console.log(res)

// getComputedStyle 标准
// ie 低版本 obox.currentStyle.backgroundColor

（七）操作元素类名

.className

box.className = "item item2" //在原先后面加上
box.className += " item3" //item3前必须有空格

classList 属性

box.classList.add("item2")//只添加不同的，相同的不会添加
box.classList.remove("item2")

toggle 切换

btn.onclick = function(){
	box.classList.toggle("item") //对有item的标签进行删除增加
}

（八）DOM节点

– DOM的节点我们一般分为常用的三大类元素节点/文本节点/属性节点
– 什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点)
– 比如我们标签里面写的文字，那么就是文本节点
– 写在每一个标签上的属性，就是属性节点

元素节点
– 我们通过getElementBy…获取到的都是元素节点
属性节点
– 我们通过getAttribute获取的就是元素的属性节点
文本节点
– 我们通过innerText获取到的就是元素的文本节点
在这里插入图片描述

（九）获取节点的方式

childNodes属性 vs children

console.log(box.childNodes) //所有节点
console.log(box.children) //所有元素

firstchild firstElementchild

console.log(box.firstchild)
console.log(box.firstElementchild)

lastchild lastElementchild

console.log(box.lastchild)
console.log(box.lastElementchild)

previousSibling previousElementSibling

找出上一个兄弟节点

console.log(box.previoussibling)
console.log(box.previousElementSibling)

nextSibling nextElementSibling

找出上一个兄弟节点

console.log(box.nextSibling)
console.log(box.nextElementSibling)

parentNode vs parentElement

console.log(box.parentNode.parentNode.parentNode)
console.log(box.parentElement.parentElement.parentElement)

getAttribute attributes

console.log(box.getAttribute("index"))//取到精准的值
console.log(box.attribute)//拿到所有属性节点

（十）节点操作

– 我们所说的操作无非就是增删改查(CRUD)
– 创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来)
– 向页面中增加一个节点
– 删除页面中的某一个节点·修改页面中的某一个节点
– 获取页面中的某一个节点

创建节点

– createE1ement:用于创建一个元素节点

//创建一个div元素节点
var oDiv = document.createElement('div')
console.log(oDiv)

〇创建出来的就是一个可以使用的div元素
– createTextNode : 用于创建—个文本节点

插入节点

– appendChild

box.appendChild(odiv)

– insertBefore(要插入的节点，谁的前面)

box.insertBefore(odiv,child)

删除节点

– removeChild(节点对象)

– remove(删除自己以及后代)

替换节点

replacceChild(新的节点，老的节点)

var odiv2 = document.createElement("div")
odiv2.innerHTML = "2222222"
box.replaceChild(odiv2,child)

克隆节点

cloneNode

//克隆节点() false 不克隆后代
// true 克隆后代

动态删除

<ul id="list">
</ul>
<script>
	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"
obutton.onclick = handleroli.appendChild(obutton)list.appendchild(oli)
}
function handler(){
console.log(this.parentNode)this.parentNode.removeo
}
</script>

（十一）节点属性

– 我们已经知道节点会分成很多种，而且我们也能获取到各种不同的节点
– 接下来我们就来聊一些各种节点之间属性的区别
– 我们先准备一段代码

<body>
	<u1 test="我是u1 的一个属性">
		<li>hello</1i>
	</u1>
	<script>
		//先获取 ul
		var oul =document. queryse1ector("ul')
		//抉收到ul下的第一个子元素节点，是一个元素节点
		var eleNode = oul.firstElementchild
		//获取到ul的属性节点组合，因为是个组合，我们要拿到节点的话要用索引
		var attrNode = oul.attributes[o]
		//获取到ul下的第个子节点，是一个文不节点
		var textNode = oul.firstchild
	</script>
</body>

在这里插入图片描述

（十二）获取元素尺寸

– 就是获取元素的"占地面积"

offsetWith和offsetHeight

– offsetwidth :获取的是元素内容 + padding + border的宽度
– offsetHeight :获取的是元素内容 + padding + border的高度

clientWidth和clientHeight

– clientwidth :获取的是元素内容＋ padding 的宽度
– clientHeight :获取的是元素内容 +padding 的高度

注意:
– 获取到的尺寸是没有单位的数字
– 当元素在页面中不占位置的时候，获取到的是0
О display:none;元素在页面不占位

（十三）获取元素偏移量

console.log(child.offsetLeft, child.offsetTop)
console.log(myparent.offsetLeft,myparent.offsetTop)
console.log(box.offsetLeft,box.offsetTop)
//参考点:是定位父级
//如果父级元素都没有定位，偏移量相对于body

console.log(list.clientLeft,list.clientTop)
//距离自己的左上角

（十四）获取可视窗口

console.log("宽度",innerwidth)
console.log("高度",innerHeight)
console.log("宽度",document.documentElement.clientwidth)//不算滚动条
console.log("高度",document.documentElement.clientHsight)

三十一、事件

– 一个事件由什么东西组成
〇触发谁的事件:事件源
〇触发什么事件:事件类型
〇触发以后做什么:事件处理函数

var oDiv = document.queryselector('div')
oDiv onc1ick = function(){}
//谁来触发事件m> oDiv =>这个事件的事件源就是 oDiv
//触发什么事件m> onc1ick ->这个事件类型就是click1
//触发之后做什么、 => function o [3=>这个事件的处理函数

〇我们想要在点击 div以后做什么事情，就把我们要做的事情写在事件处理函数里面

var oDiv = document.queryse1ector('div')
oDiv.onc1ick = function{
	console.log('你点击了div')
}

〇当我们点击div的时候，就会执行事件处理函数内部的代码。每点击一次，就会执行一次事件处理函数

// dome类型--后面会覆盖前面的。
box.onclick = function(){
console.log("22222")
}

// dom2 绑定多个事件处理函数按照顺序执行
box2.addEventListener("click",function(){
	console.log("1111111")
})
box2.addEventListener("click",function(){
	console.log("222222")
)
box2.addEventListener("click" ,function(){
	console.log("3333333")
})

// dom2兼容性ie 6 7 8
box2.attachEvent("onclick" ,function(){
	console.log("111111")
})
box2.attachEvent("onclick" ,function(){
	console.log("222222")
})

（一）事件绑定

//事件解绑dom0  dom节点.onclick = null
btn.onclick = function(){
	console.log("谢谢惠顾")
	this.onclick = null
}

//事件解绑dom2
function handler(){
	console.log("谢谢惠顾")

	this.removeEventListener("click" , handler)
}
btn.addEventListener("click" , handler)
//btn.removeEventListener("click" , handler)

function handler(){
	console.log("谢谢惠顾")
	btn.detachEvent("onclick", handler)
}
btn.attachEvent("onclick", handler)

（二）事件类型

鼠标事件

click和dblclick

btn.onclick = function(){
	console.log("单击执行")
}
btn.ondblclick = function(){
	console.log("双击执行")
}

contextmenu 右键单击

document.oncontextmenu = function(){
	console.log("右键单击.自定义右键菜单")
}

mousedown、mousemove、mouseup

box.onmousedown = function(){
	console.log("鼠标按下")
}
box.onmousemove = function(){
	console.log("鼠标移动")
}
box.onmouseup = function(){
	console.log("鼠标抬起")
}

移入移出 mouseover和mouseout

box.onmouseover = function(){
	console.log("移入")
}
box.onmouseout = function(){
	console.log("移出")
}

移入移出 mousesnter和mouseleave

//不包含儿子
box.onmousesnter = function(){
	console.log("移入")
}
box.onmouseleave = function(){
	console.log("移出")
}

键盘事件

keydown、keyup、keypass

username.onkeydown = function()}
	console.log("按下键盘"","判读是不是回车键")
}
username-onkeyup =function(){
	console.log("抬起键盘","判读是不是回车键")
}

浏览器事件

load

页面全部资源加载完毕

scro11

浏览器滚动的时候触发

表单事件

focus和blur

username.onfpcus= function(){
	console.iog("获取焦点")
}
username.onblur = function(){
	console.log("失去焦点")
}

change

– 表单内容改变事件
获取焦点, 失去焦点的对比里面内容不一样才会触发

username.onchange = function(){
console.log ("change")
}

input

表单内容输入事件

username.oninput= function(){
	console.log("input")
}

submit和reset

表单提交和重置事件

myform.onsubmit = function(){
	console.log("submit","校验表单内容")
	return false
}
myform.onreset= function(){
	console.log("reset")
}

触摸事件

touchstart:触摸开始事件
touchend:触摸结束事件
touchmove : 触摸移动事件

box.ontouchstart = function(){
	console.log("touchstart")
}
box.ontouchmove = function(){
	console.log("touchmove")
}
box.ontouchend = function(){
	console.log("touchend")
}
box.ontouchcancel = function(){
	console.log("touchcancel")
}

（三）事件对象

– 什么是事件对象?
– 就是当你触发了一个事件以后，对该事件的一些描述信息
– 例如:
〇你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
〇你触发一个键盘事件的时候，你按的是哪个按钮
〇 …
– 每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做事件对象浏览器给了我们一个黑盒子，叫做window.event，就是对事件信息的所有描述
– 比如点击事件
〇你点在了(0，0)位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
〇你点在了(10，10)位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
〇 …

oDiv.onc1ick = function(){
	conso1e.1og(window.event.X轴坐标点信息)
	console.log(window.event.Y轴坐标点信息)
}

<body>
	<input type="text" id="username">
	<div id="box"></div>
	<script>
		username . onkeyup = function(evt){
			console.log(evt.keyCode)
			if(evt.keycode ==13){
				console.log("创建节点")
			}
		}
		box.onclick = function(evt){
			console.log(evt)
		}
	</script>
</body>

事件对象–鼠标事件

box.onclick = function(evt){
	console.log(evt.clientX,evt.clientY)
	console.log(evt.pageX,evt.pageY)
}
//clientX clientY距离浏览器可视窗口的左上角的坐标值
//pageX pageY距离浏览器页面(文档流)的左上角的坐标值
//offsetX offsetY距离触发元素的左上角的坐标值

（四*）鼠标跟随

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 200px;
        height: 50px;
        background-color: yellow;
        position: relative;
    }
    #box p{
        width: 300px;
        height: 200px;
        background-color: red;
        position: absolute;
        left: 100px;
        top: 100px;
        display: none;

        pointer-events: none;
        /* 方案二 */
    }
</style>
<body>
    <div id="box">
        fuyun的头像
        <p>
            fuyun的介绍
        </p>
    </div>
    <script>
        box.onmouseover = function(){
            this.firstElementChild.style.display="block"
        }
        box.onmouseout = function(){
            this.firstElementChild.style.display="none"
        }
        box.onmousemove = function(evt){
            this.firstElementChild.style.left = evt.offsetX + "px"
            this.firstElementChild.style.top = evt.offsetY + "px"
            //方案一：(防止抖动)
            //this.firstElementChild.style.left = evt.offsetX +50+ "px"
            //this.firstElementChild.style.top = evt.offsetY +50+ "px"
        }
    </script>
</body>
</html>

（五*）鼠标推拽

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: skybule;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box">
    </div>
    <script>
        box.onmousedown = function(){
            console.log("down")

            document.onmousemove = function(evt){
                var x =evt.clientX-box.offsetWidth/2
                var y =evt.clientY-box.offsetHeight/2

                if(y<=0) y=0
                if(x<=0) x=0

                if(x>= document.documentElement.clientWidth-box.offsetWidth)
                    x = document.documentElement.clientWidth-box.offsetWidth
                if(y>= document.documentElement.clientWidth-box.offsetHeight)
                y = document.documentElement.clientWidth-box.offsetHeight
                box.style.left = x + "px"
                box.style.top = y + "px"
            }
        }
        box.onmouseup = function(){
            console.log("up")

            document.onmousemove = null
        }
    </script> 
</body>

（六）DOM事件流

在这里插入图片描述

– 当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件
– 就像上面的图片一样
– 点击在红色盒子上的时候，会触发红色盒子的点击事件
– 也是点击在了粉色的盒子上，也会触发粉色盒子的点击事件
– 也是点击在了body 上，也会触发body的点击事件
– 也是点击在了html上，也会触发html的点击事件

（七）阻止事件传播

evt.stopPropagation()


//ie
//evt.cancelBubble = true

（八）阻止默认行为

dom0 return false 阻值默认行为

document.oncontextmenu = function({
	console.log("右键单击.自定义右键菜单")
	return false
}

dom2 evt.preventDefault()

document.addEventListener("contextmenu" ,function(evt){
		console.log("右键单击.自定义右键菜单")
		evt.preventDefault()
})

（九*）自定义右键菜单

	<style>
	*{
	margin:o;
	padding:0;
	}
	ul{
		list-styLe: none;
		width: 200px;
		padding: 10px;
		border:1px solid black;
		display: none;
		position:absolute;
	}
	ul li:hover{
		background:skyblue;
	}
	</style>
<body>
	<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
	<script>
		document.addEventListener( "contextmenu",function(evt){
			evt.preventDefault()
			list.style.display = "block"
			var x = evt.clientx
			var y = evt.clientY
			
			if(x >= document.documentElement.clientwidth-list.offsetwidth)
			x = document.documentElement.clientwidth-list.offsetwidth
			if(y>=document.documentElement.clientHeight-list.offsetHeight)
			y = document.documentElement.clientHeight-list.offsetHeight
			
			list.style.left = x +“px"
			list.style.top = y + “px"})
			
			document.addEventListener( "click",()=>{
				list.style.display="none"
		})
	</script>
</body>

（十）事件委托

– 就是把我要做的事情委托给别人来做
– 因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
– 所或我们就可以把子元素的事件委托给父元素来做
事件触发
– 点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，那么就可以触发父元素的点击事件

<body>
	<u1>
		<1i>1</1i>
		<1i>2</1i>
		<1i>3</li>
	</u1>
	<script>
		var ou1 = docuemnt.queryselector( "ul")
		oUl.addEventListener("click",function(e) {
			console.log("我是ul的点击事件，我被触发了")
		})
	</script>
</body>

target
– target这个属性是事件对象里面的属性，表示你点击的目标
– 当你触发点击事件的时候，你点击在哪个元素上,target就是哪个元素
– 这个target也不兼容，在IE下要使用srcElement

<body>
	<u1>
		<1i>1</1i>
		<1i>2</1i>
		<1i>3</1i>
	</ul>
	<script>
		var ou1 = docuemnt.queryselector("u1")
		ou1. addEventListener("click",function (e) {
			e = e ll window.event
			var target = e.target || e.srcElement
			console.log(target)
		})
	</script>
</body>

〇上面的代码，当你点击 ul 的时候,target 就是ul
〇当你点击在li上面的时候,target就是li

委托
– 这个时候，当我们点击 li 的时候，也可以触发 ul 的点事件
– 并且在事件内不，我们也可以拿到你点击的到底是 ul 还是 li
– 这个时候，我们就可以把 li 的事件委托给 ul 来做

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
  	var oUl = docuemnt.querySelector('ul')
    
    oUl.addEventListener('click',function(e) {
      e = e || window.event
      var target = e.target || e.srcElement
      console.log(target)
    })
  </script>
</body>