获取Dom对象
1想要获取标签的Dom对象，可以使用document.querySelector(选择器)
2document.qusrySelector假如有多个重复标签，只能获取第一个标签
3如果document.querySelector选择器找不到元素,只会返回null
语法结构
let h1 = document.quertSelector('h1')
这样就可以获取h1的dom对象了
获取元素All
当我们页面中有多个重复标签，我们可以把它转换成数组一起输出
使用docunment.querySelectorAll()，All就是代表数组
语法结构
let h2 = document.querySelectorAll(h2)
innerText使用
innerText作用就是可以把我们输出的内容，输出到标签中
innerText可以设置也可以修改，也可以取值，没有赋值就是取值，没有等号*就是取值
console.log(h2Dom.inneHTMLr)如果内用中有其他子元素，那么也会一起输出并且忽略标签
语法结构
let userName = prompt('输入你想邀请的伙伴')
let h1Dom = document.querySelector('h1')
h1Dom.innerText = userName
userName 把值 赋值给 h1Dom.innerText里面，innerText具有可 以把信息传到标签中
也可以直接赋值
let h2Dom = document.querySelector('h2')
h2Dom.innerText = '你好呀'
innerText是用来把需要的信息传到标签里面的。属性名.innerText
设置文本属性
！！！注意 单标签用value来给元素添加信息
！！！注意 双标签则使用 innerHTML 和innerText来给父元素添加息
我们可以获取usrename这个成为为Dom对象，然后我们就可以通过usrename来给文本设置信息
let usrename = document.querySelector('.usrename')
usrename.value = '我会在input里面出现嘛?'
usrename.value表示在input里面添加了一个value，然后给value添加了文字
设置单选框，只能选中一次，需要取消选中还要设置false属性取消
let radio =document.querySelector('.radioa')
ridio.checked = true(表示选中状态)
ridio .checked = false(表示没选中状态)
设置复选框，可以多次点击选中或取消，好用
let checkbox =document.querySelector('.checkbox1')
checkbox.checked = true(表示选中状态)
设置下拉列表option.selected 表示下拉列表
<select>
<option>去云南</option>
<option>去重庆</option>
<option>去三亚</option>
<option>去海南</option>
</select>
let option = document.querySelector('option : nth- child(3)')
option.selected = true(表示设置第几个默认显示在第一个位置)
设置按钮属性
let btn3 = document.querySelector('.btn1')
btn3.innerText = '我是btn3'
btn3.disabled = false
disabled = false表示启用该按钮
btn4.disabled = true
disabled = true表示禁用该按钮
在js中设置样式
设置样式必须每个都要加上属性名和style
let div = document.querySelector('div')
div.style.color = "red"
div.style.fontSize = '100px';
div.style.backgroundColor= 'pink'
div.style.width = '2600px'
div.style.height= '2600px
获取ID，类，标签等Dom方法
<p></p>
<div class="iii">1</div>
<div class="#yt"></div>
<script>
let i = document.querySelector('.iii')
我们在获取 类 Dom属性必须在类前面加上.
console.log(i);
let yt1 = document.querySelector('#yt')
我们在获取id Dom属性必须在id前面加上#
console.log(yt1);
</script>
修改 文字 / 图片
在我们Dom里面是可以修改属性得，修改可以改变属性得值，比如图片，文字，链接等等都可以修改
但是得要先获取它的标签，比如h1 p span div img 等等标签
<img src ='' art''
img就是标签 src是属性，想要修改src的信息，得先要获取标签中得img
let img = document.querySelector = 'img'
img src =`想要修改的图片地址`
className
let div = document.querySelector('div')
div.classList.add = ('d2','d3','d4')
classList.add是添加一个类，可以添加多个类
div.classList.remove = ('d2','d3','d4')
classList.remove是删除一个或多个类
div.classList.toggle ('d2','d3','d4')
classList.toggled，如果body标签没有这个类，那么作业就是添加 一个类如果body里面有这个类，那么就会移除这个类
定时器初体验
开启定时器
可以做轮播图，还有倒计时等等
语法结构
itmeId = setIdterval(function(){
},1000(1000毫米代表1秒))
关闭定时器
语法结构
clearInterval(itmeId)
事件监听初体验
addEventListener表示时间监听，简单点来说就是当我们
对属性点击或者输入的时候，提示一些信息
语法
属性名.addEventListener(click,匿名函数(){}
绑定不同事件
绑定不同事件
let div = document.querySelector('div')
let input = document.querySelector('input')
div.addEventListener('click',function(){
console.log('click 鼠标点击事件');
})
div.addEventListener('mouseenter',function(){
console.log('mouseenter 鼠标经过事件');
})
div.addEventListener('mouseover',function(){
console.log('mouseover 鼠标离开事件');
})
input.addEventListener('focus',function(){
console.log('blur 输入框获得焦点');
document.body.style.backgroundColor='#000'
})
input.addEventListener('blur',function(){
console.log('blur 输入框失去焦点');
document.body.style.backgroundColor='#fff'
})
input.addEventListener('input',function(){
console.log('只要你在我的输入框输入了内容，我就触发');
})
input.addEventListener('keyup',function(){
console.log('keyup 按住键盘某一个键,放开之后便触发');
})
节点介绍
节点可以分为元素节点，也就是div p 等等标签
属性节点就是 herf 就是 a 标签里面的 herf 就叫做属性节点
文本节点 inptu 包括我们输入的文字 都算是 文本节点
获取子元素节点
子元素节点 用 chlidren来创建的，使用方法就是 父元素.chlidren来快速准确获取我们子元素
实列：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
let ul = document.querySelector = ('ul')
父元素ul.chlidren
获取父元素节点
父元素节点用parendNode来创建的，假如我们想对父元素做一些什么改变，我们就可以使用 parendNode， 使用方法就是子元素.parendNode
实列：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
let li = document.querySelector('li')
li.parentNode.style.display = 'none'
通过子元素隐藏父元素
获取兄弟元素
兄弟元素有两个，一个是向上一个兄弟节点，另一个是向下兄弟节点
我们可以通过兄弟节点来修改我们上下兄弟元素的属性
向上兄弟节点 previousElementSibling 属性
向下兄弟节点 nextElementSibling 属性
实列；
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
let li = document.querySelector('li')
li.previousElementSibling 上一个兄弟节点
li.nextElementSibling 下一个兄弟节点
创建节点和追加节点
创建节点和追加节点
创建节点也就是，如果我创建了一个节点，而这个节点在网页中没有出现的，那么这个就叫做创建节点。
追加节点也就是，如果我创建了一个节点，而这个节点在网页中已经有了，那么创建的这个节点会在标签后面先，这就叫做追加节点.
创建节点需要我们父元素.appendChild（li）来进行创建或追加节点
实列
let li = document.createElement('li')
创建一个新的节点
li.style.color = 'green'
li .style.backgroundColor = 'red'
li.style.width = '200px'
li.style.height='50px'
let ul = document.querySelector('ul')
ul.appendChild(li)
把创建节点的li，需要用父元素 apppendChild来输出
appednChild移入/插入功能
假如我们有两个ul标签，一个ul里面装着li标签，一个ul里面没有li标签，那么我们就可以向两个其中一个插入节点/或移入节点
移入节点也就是，如果我创建了一个节点，然后我把这个节点插入其他ul标签中，而这个节点在这个u里面没有出现的，那么这个就叫做移入节点。
插入节点也就是，如果我创建了一个节点，然后我把这个节点插入其他ul标签中，而这个节点在这个u里面是已经出现的，那么这个就叫做插入节点，强行霸占一个位置
实列
<ul class="left">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="right"></ul>
let li = document.querySelector('.left li:nth-
把left里面第2个li标签 输出，转到right 的ul标签里面
child(2)')
let right = document.querySelector('.right')
right.appendChild(li)
把li标签插入到right的ul里面，插入哪个标签里面
就以哪个 标签开头 .appendChild
insertBefore
这insertBefore和appendChild类型相似 ，但是insertBefore在插入的同时并且可以指定插入元素在第几个位置占用
实列
<ul class="left">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
let c = document.querySelector('.left li:nth-child(3)');
就是说选中left第三个li标签转移到right的ul里面。
let two = document.querySelector('.right li:nth-child(2)');
表示把left的li标签插入到right的ul标签第二个位置
let right = document.querySelector('.right');
insertBefore 也能插入元素 功能也类似 appendChild
如果要插入的元素 是已经存在的 那么insertBefore作用 就是移动占据位置
如果要插入的元素 是新创建的 insertBefore作用 仅仅 插入
克隆节点
克隆简单点来说就是复制，可以复制标签中所有的样式，效果
克隆就等于复制，不过克隆比较方便，肯定有它存在的意义
实列
<div class = 'box'>
<p></p>
</div>
let box = document.querySelector(.box)
let Newbox = box.cloneNode() 表示克隆了div这个盒子
如果cloneNode括号里面加上true就是深度克隆，会连标签里面的子元素一起克隆.
把克隆插入body标签输出,克隆的盒子
document.body.appendChild(Newbox)括号里面是变量名
删除元素节点
实列
<button>点我删除li</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let button = document.querySelector('button')
let ul = document.querySelector('ul')
let li = document.querySelector('li:nth-child(1)')
是我们的li标签放在注册事件外面，我们删除只会删除第一个，第二个永远是第二
button.addEventListener('click',function(){
let li = document.querySelector('li:nth-child(1)')
要是我们的li标签放在注册事件里面，那么button删除第一个之后，然后js会自动再排序，删除第一个，第二个变成第一个
删除第二个，第三个变成第一个 */
ul.removeChild(li)
ul.remove()
自杀，删除自己
})
时间
let date = new Date( )定义时间戳
let num = date.getFullYear() 年份
let num1 =date.getMonth();月份
let num2 =date.getDate();日
let num4 =date.getHours(); 小时
let num5 =date.getMinutes(); 分钟
let num6 =date.getSeconds(); 秒数
let date = new Date()
console.log(Date.now()); 获取时间戳 方法 1
console.log(date.getTime()); 获取时间戳 方法 2
console.log(+(new Date())); 获取时间戳 方法 3
以上三种方法均可获取时间戳
事件对象
event v ev 三种随便用一种都可以 ，可以来获取我们点击事件一瞬间的信息
let btn = document.querySelector('button')
btn.addEventListener('click',function(event){
console.log(event);event 开始记录点击一瞬间的信息
})
事件对象2
let div = document.querySelector('div')
div.addEventListener('click',function(event){
console.log(event.clientX,event.clientY);
上面这行代码是表示 默认鼠标点击事件 数据参数参照左上角
不是参照div
console.log(event.offsetX,event.offsetY);
上面这行代码代表的是 参照元素本身的位置，来进行
参照位置，和client刚好相反
})
滚动触发事件scroll
scroll就是我们滑动鼠标滚轮往下滑或者往下滑，那么就会触发scroll属性
div.addEventListener('scroll',function(){
console.log('要出来啊');
这样我们每滑动一次鼠标都会打印出来 （'要出来啦'）
})
设置滑动高度
document.documentElement.scrollTop()
mousemove随着鼠标移动
mousemove 给鼠标绑定移动事件，当鼠标发生移动时，mousemove就会显示鼠标所移动的位置的值
let div = document.querySelector('div')
当我们不知道给哪个绑定事件,那么就可以绑定document
document.body.addEventListener('mousemove',function(event){
mousemove是鼠标移动的时候触发事件,event是记录事件触发的一瞬间
记录下来的,
client是相对于视口的定位,offset是相对于当前元素
div.style.left = event.clientX - 70+'px'
把记录下来的值赋值给left,可以让div跟随着鼠标移动
div.style.top = event.clientY - 80+'px'
})
preventdefault阻止元素的默认行为
比如 a标签里面的 href默认跳转行为 当我们想阻止元素的默认行为时，可以使用preventdefault（）来阻止默认行为
实列
<a href="http://www.baidu.com">我不想跳转</a>
<script>
let a = document.querySelector('a')
a.addEventListener('click',function(event){
console.log('我点击了啊');
a.style.color = 'red'
event.preventDefault()
当我们设置了之后，点击a标签将不会跳转
因为a里面恶的href有一个默认跳转行为,我们可以用preventdefault()来阻止
默认跳转行为
})
stopPropagation阻止传播
let div1 = document.querySelector('.div1')
let div2 = document.querySelector('.div2')
假如我们只需要捕获某一个元素,不想其他元素
也被获取,那么我们就可以设置event.shotpropagation来阻止
其他元素也被捕获
div.addEventListener('click',
function(event){
console.log('div');
event.stopPropagation()
只捕获div一个元素 就算有多个元素
我们只会获取当前div的元素
}
我们加上true之后,就变成了捕获阶段,
默认值是false,是默认冒泡排序,一般很少用到
捕获阶段,因为没有这个需求
)
div1.addEventListener('click',
function(event){
console.log('div1');
如果我们设置了当前的div1,那么它的父元素也会被获取
因为我们设置了true,默认从父元素开始捕获
要想捕获自己,就得把父元素的true去掉
}, true
假如div1是div2的父元素,假如div添加了
true就是捕获阶段,div1没加true,那么捕获阶段就是
div - div2 - div1,最后才捕获div1
,因为默认是false冒泡排序的
)
div2.addEventListener('click',
function(){
console.log('div2');
event.stopPropagation()
只设置捕获自己
},true
)
委托事件
当我们需要获取某一个元素进行判断或者点击事件，就可以用event.target 点击你要要绑定事件或要进行判断条件的元素。从而获取到 local.Name（元素小写，没变化） 或 nodeName（元素大写）不用再遍历子元素进行绑定点击事件了，直接使用event.target 就能处理子元素了
event.target等于当前选中当前点击的元素
来点击某一个子元素,可以用localName 直接等于元素就可以了*
event.target.localName ==='li'即可选中li标签
也可以用nodeName,不过要选中想要的元素必须是
event.target.nodeName === 'LI'把元素换成大写就可以了
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
const li = document.querySelector('li')
const ul = document.querySelector('ul')
ul.addEventListener('click',function(event){
console.log(event.target.nodeName);
event.target.nodeName可以获取元素的标签
if(event.target.nodeName == 'LI'){
当我们点击获取的元素标签 和LI匹配时候，
就会执行下面的代码
event.target.style.backgroundColor = 'red'
点击和上面代码匹配的标签 就能变成红色
}
})
lode加载完外部资源才触发事件
1 我们一般在网页开发中，都是需要网页元素全部加载完才会显示可以使用网页的功能
2 有很多业务和功能，都需要使用到外部资源 （外部js文件 ，外部css文件 ，图片 ，视频）我们希望等待资源全部加载完毕，才显示给用户看。
3 在写代码的时候，我们会把所有的代码都放在window.addEventlistener('load',function(){
}) 里面
实例
window.addEventListener('load',function(){
console.log(('我要等全部加载出来我才触发'));
})
DomContentLoaded 加载完标签就会触发事件
DOMContentLoaded就是等我们页面标签加载完就触发事件了,一般都不怎么用, 因为现在一般都是等外部资源和标签一样加载完才触发事件,也就是全部加载完用户才能看到页面效果或者进行交互 。
语法
window.addEventListener('DOMcontentLoaded',function(){}
关于老版本讲js代码写在head标签里面
早期的把代码写在head标签里面 ,这样写会加载报错的,因为下面那个的h1还没有加载出来,我们就调用了它的h1标签,所以我们设置的样式就不会生效,标签都还没有加载出来,我们设置样式就会找不到标签
1.错误写法 let h1 = document.querySelector('h1')
document.addEventListener('DOMContentLoaded',function(){
console.log(h1)
h1.innerText = '我是新创建的
})
老版本代码正确写法
document.addEventListener('DOMContentLoaded',function(){
let h1 = document.querySelector('h1')
console.log(h1);
h1.innerText = '我是新创建的'
})
2.正确写法 所以早些时期,程序员会把 let h1 = document.querySelector('h1')放在
DOMContentLoaded里面,标签全部加载完才开始生成dom元素,才可以执行,不会报错
DOMContentLoaded
页面的标签 都加载完毕就触发了，不需要等待标签的内容回来
video标签一生成， 事件就触发*
load事件等待 vide标签生成了，同时 video标签内的视频也加载回来 才触发*
video加载 分两部
只是加载标签而已 一瞬间加载完很快 DOMContentLoaded
会去加载 标签对应的视频 比较慢
scroll家族
页面滚动统计 使用 window.addEventListener("scroll") 事件
页面的滚动看得到移动距离 document.documentElement.scrollTop
1
let div = document.querySelector('div')
console.log(div.scrollWidth)
1 输出当前div的宽度 ,div的宽度不包含滚动条 ,滚动条是占了宽度17px
实际div宽度被滚动条减去17px,pc端会滚动条会占用当前元素的宽度17px,
移动端则不会占用当前元素的宽度
scrollWidth
获取容器的宽度(包含滚动条的区域)
console.log(div.scrollHeight)
获取高度整个区间,就是实际滚动距离
2 输出当前div的高度 ,div的宽度不包含滚动条 ,滚动条是占了高度17px
实际div宽度被滚动条减去17px,pc端会滚动条会占用当前元素的高度17px,
移动端则不会占用当前元素的高度
})
2
div.addEventListener('scroll',function(){
console.log(div.scrollLeft);
获取当前元素容器 --就是子元素在父元素里面滚动的距离,宽度滚动距离
}
console.log(this.scrollTop)
获取当前元素容器 --就是子元素在父元素里面滚动的距离,高度滚动距离
offset家族
offsetHeight高度包含滚动条大小是当前元素的100%,没有变化
offsetWidth宽度包含滚动条大小是当前元素的100%,没有变化
<div class="d1">
<div class="d2">
</div>
</div>
let d2 = document.querySelector('.d2')
console.log(d2.offsetWidth);
console.log(d2.offsetHeight);
console.log(d2.offsetLeft);
//获取当前元素距离 定位了的父元素的大小(找不到定位了的父元素，相对于页面来计算)
/* 1 如果子元素没有定位，父元素也没有定位
就会相当于我们页面,也就是body来获取我们移动的距离
1 如果子元素有固定定位我们设置了 外边距,那么就会参考父元素来计算我们的移动距离
// 只要父元素没有设置定位，我们子元素就会参考于页面也就是body进行移动距离
console.log(d2.offsetTop);
我们设置了一个top为10,所以说打印出来d2的移动距离和页面的距离为10px
因为我们没有给d1父元素设置定位,所以d2是跟随着页面也就是body来定位的
1 offsetWidth 获取元素的宽度 包含这滚动条
2 offsetHeight 获取元素的高度 包含这滚动条
3 offsetLeft 获取定位了的父元素的 水平距离 左
4 offsetTop 获取定位了的父元素的 垂直距离 上
client家族
const clientDom = document.querySelector('.client');
// 宽度和高度
console.log(clientDom.clientWidth); // 不包含 滚动条（类似 scrollWidth）
console.log(clientDom.clientHeight); // 不包含 滚动条（类似 scrollHeight）
// 获取边框的大小
console.log(clientDom.clientLeft); // 左边框
console.log(clientDom.clientTop); // 上边框
// scollWidth 获取容器的宽度（不包含滚动的区域）
// offsetWidth 获取可视区域的宽度（包含滚动条）
// clientWidth 获取可视区域的宽度（不包含滚动条）
// scrollLeft 获取左侧滚动的距离
// offsetLeft 获取和已经定位了的父级元素的左距离
// clientLeft 获取左边框的大小
\
