【博学谷学习记录】超强总结，用心分享 _ 前端开发 js-webAPI知识点总结

---

innerHTML与innerText区别：

修改内容：
       liList.innerHTML = '<h2>哈哈</h2>'       可以生效
       liList.innerText = '<h2>哈哈</h2>'       不可以生效，返回标签输出
读取内容：
       liList.innerHTML            包含标签一起输出
       liList.innerText            只输出内容文本
       liList.textContent          可以拿到隐藏内容（visibility:hidden），innerText拿不到                

---

操作元素属性：

操作元素常用属性 ： href、title、src等

对象.属性 = 值

操作元素样式属性：

1. 通过style属性 操作css
   对象.style.样式属性 = 值
2. 操作类名 操作css (将原本的类名换成新的)
   元素.className = ‘active’
3. 通过classList 操作类控制css
   追加一个类：元素.classList.add(‘类名’)
   删除一个类：元素.classList.remove(‘类名’)
   切换一个类：元素.classList.toggle(‘类名’)

操作表单元素属性：

	对象.属性名 = 新值
	表单.type = 'password'
	表单.value （表单.innerHTML 得不到表单的内容，只能通过value；button标签除外）
	表单.checked = true/false
	表单.disabled = true/false      禁用/不禁用
**自定义属性**：
	在html5中推出来了专门的data-自定义属性
	在标签上一律以data-开头
	在DOM对象上一律以dataset对象方式获取

<div class="box" data-id="10">盒子</div>
<script>
    const box = document.querySelector('.box')
    console.log(box.dataset.id);
</script>

js 操作自定义属性：

	setAttribute 设置 /  修改类名等
	getAttribute 得到
	createAttribute：仅建立一个属性
	removeAttribute：删除一个属性

<img src="../按下回车发评论/images/avatar.jpg" alt=""  aa="cc">
<script>
    let imgNode = document.querySelector('img')
    imgNode.setAttribute('aa','cc')
    console.log(imgNode.getAttribute('aa'));
</script>

---

事件监听与绑定

dom2 事件

事件绑定：
元素对象.addEventListener( ‘事件类型’ , 要执行的函数 )

<input class="star" type="button" value="开始">
<input class="end" type="button" value="结束">

let star = document.querySelector('.star')
let end = document.querySelector('.end')
let text = document.querySelector('p')
let x=1
let timer = 0
star.addEventListener('click',function(){
    timer = setInterval(() => {
        text.innerHTML= ++x
    }, 1000);
})
end.addEventListener('click',function(){
    clearInterval(timer) 
})

事件解绑：

star.removeEventListener('click',fn)

dom0 事件

事件绑定： 事件源.on事件=function(){}
star.onclick = function(){}
事件解绑： star.onclick = null

区别：
如果有相同的事件监听函数，on方式会被覆盖，addEventListener方式可以绑定多次，拥有事件更多特性，推荐使用

---

事件类型：

鼠标事件：

mousemove    鼠标移动
mouseover / mouseout    鼠标移入(悬浮)/移出     父子元素，对父元素设置事件监听，事件元素会切换（有冒泡效果）
mouseenter / mouseleave   鼠标经过/离开    （推荐用）  父子元素，事件元素不会切换
click / mousedown / mouseup / dbclick   鼠标点击/点下/抬起/双击

焦点事件：

focus / blur    获得焦点 / 失去焦点（光标）
css也可以设置 获得光标，  input:focus{ }

键盘事件：

keydown / keyup    键盘按下 / 键盘抬起

文本事件：

	input    用户输入事件

表单： submit

form.addEventListener('submit',function(e){
	e.preventDefault( )       //阻止默认行为    阻止表单提交 (click事件类型也可以)
})

---

环境对象： this

this：当前函数运行时所处的环境
this代表调用函数的当前对象
this不是函数定义时决定的，是在执行时看如何调用函数动态确定的

如何确定this的值？

1、test( )                 window
2、obj.test( )             obj（对象本身）
3、new test( )             当前构造函数的实例对象     var  fn = new test( )
4、test.call/apply(obj)    obj(指定的对象)，用于修改this的指向

let child={}
function person(name,age){
    this.name=name
    this.age = age
}
person.call(child,1,2);     //将函数中的数据添加到child对象中

页面尺寸事件

当窗口尺寸改变时触发

window.addEventListener('resize',function(){
    console.log(1)
})

获取元素的可见部分宽高：clientWidth和clientHeight （无单位，只读）
注：不包含边框，margin，滚动条等，包含padding

元素尺寸和位置

offsetWidth和offsetHeight 获取元素宽高 （只读，无单位的数值）（包含padding、border、滚动条等）

offsetLeft和offsetTop 获取位置 （只读属性）

element(div).getBoundingClientRect( ) 返回元素的大小以及相对于视口的位置