DOM节点

DOM

//通过dom接口(方法)可以改变网页的内容，结构，样式

创建，增，删，改，查

//创建
// 1.docunment.write 重绘了页面，不推荐
// ▇2.innerTHTML 常用，渲染标签，文本
// ▇3.createElement 创建大量的使用

//增：appendChild   insertBefore

//删：removeChild

//改：主要修改dom的元素属性，内容，表单的值
//修改属性：src title等
//内容：innerHTML innerText
//表单：value,type,disabled ▇(disabled==true被禁用)
//样式：style,className(使用className修改类名，把以前的类名替换掉，不推荐)  
//▇ box.style.display='block'/'none' (显示/隐藏)

js添加移除类名
box.classList.add('类名') classList.add.remove
jquery添加移除类名
$(.box).addClass('类名') removeClass 

//查：querySelector querySelectorAll

//属性操作 自定义属性
//1.setAttribute 设置dom的属性值
//2.getAttribute 得到dom的属性值
//3.removeAttribute 移除dom的属性值

//点击切换input密码框的小眼睛  一个按钮可以点击多次，设置中间变量
var flag=0
Toggle.onclick=function (){
    if(flag==1){
        this.src="xxx"
    	input.type='text'
        flag=0
    }else{
        this.src="yyy"
    	input.type='password'
        flag=1
    }
    
}
排他思想：先排除所有的，然后再给自己添加
自定义属性：h5规定自定属性必须以data开头，如'data-index'
操作自定义属性 box.setAttribute('data-index',1) box.getAttribute('data-index')

对象

offset

//offsetTop/Left当前元素的上/左边框到最近的父辈元素的上/左边距
//marginy是相对的，他和谁的外边距？兄弟，父亲!▇当没有兄弟时，只能是相对父亲，和offset数值一样，但带单位
//▇offset是相对有定位的父级的，不带单位
<template>
<div class="main" ref="main">
    <div class="box" ref="box"></div>
</div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.box.offsetLeft);//100px
  },
};
</script>
<style>
.main {
  position: relative; //有定位的父辈级元素
  width: 1120px;
  height: 100px;
  background: red;
  margin-left: 100px;

  .box {
    position: absolute;
    width: 100px;
    height: 10px;
    background: yellow;
    margin-left: 100px;
  }
}
</style>