DOM
全称：DOM(Document Object Model--文档对象类型)
作用：用来操控网页类容的功能，开发网页特效和实现用户交互
DOM 结构
将HTML文档以树形结构表现出来称之为DOM树
获取DOM
语法：document.querySelector('css选择器')
参数：包含一个或多个css选择器字符串
返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象
<div class="box">1</div><div>2</div><script>const box= document.querySelector('div');console.log(box);</script>如果没有指明获取的是第几个div，那么默认为第一个
修改DOM元素内容
想要修改DOM元素里面的内容，可以用以下两种元素属性来修改：
- 对象名.innerText
- 对象名.innerHTML
元素innerText属性
作用：
- 将文本内容增添/更新到标签的位置
- 显示文本内容，并不解析标签
<div>1</div>
<div>2</div><script>const box= document.querySelector('div');console.log(box.innerText);</script>显示第一个标签div的文本内容
更新标签文本的内容
<body>
<div>1</div>
<div>2</div><script>const box= document.querySelector('div');console.log(box.innerText);box.innerText='first';console.log(box.innerText);</script>
</body>
元素innerHTML属性
作用：
- 将文本内容增添/更新到标签的位置
- 显示文本内容，会解析标签
将元素innerText和元素innerHTML做对比
<body>
<div class="a">1</div>
<div class="b"></div><script>const box= document.querySelector('.a');const box1= document.querySelector('.b');box.innerText='<strong>first</strong>';box1.innerHTML='<strong>first</strong>';</script>
</body>我们发现innerText只会显示将标签显示为文本内容，而innerHTML会解析标签
修改DOM元素属性
我们可以同js来修改标签元素属性
常见的属性：href，title，src等
语法：对象名.属性=值
<body>
<img src="" alt=""><script>const img=document.querySelector('img');img.src='./img/durant.jpg'</script>
</body>
修改元素样式属性
可以通过js来修改标签元素的样式属性
比如修改标签div的宽和高，更换背景颜色
通过style修改样式
语法：对象名.style.属性名='值'
<body>
<div></div><script>const box=document.querySelector('div');box.style.width='200px';box.style.height='200px';box.style.backgroundColor='black';box.style.border='2px solid red '</script>
</body>
通过类名(className)修改样式
如果修改的样式较多，可以用类名来修改
由于关键字是class，所以用className
语法：对象名.className='类名'
用className赋值时会用新值覆盖之前的值
<body>
<div class="b"></div><script>const box=document.querySelector('.b');box.className='box1';</script>
</body>标签div的类名被修改为了box1
通过classList来修改样式
由于className会覆盖掉原先的类名，所以HTML5新增了一个classList来增删类名
语法：
- 对象名.classList.add('类名') ----增加一个类名
- 对象名.classList.remove('类名') ---删除一个类名
- 对象名.classList.toggle('类名') ---切换一个类名，有就删除，没有就加上
追加一个类名，使这个元素拥有这个类名同样的效果
<style>div{width: 200px;height: 200px;}.red{background-color: red;}</style>
</head>
<body>
<div ></div><script>const box=document.querySelector('div');box.classList.add('red');</script>
</body>标签div拥有两个类名
操作表单元素属性
获取表单值：DOM对象.属性名
设置表单值: DOM对象.属性名=值
将表单的文本类型转换为密码类型，将隐藏其内容
<body>
<input type="text" value="durant"><script>const word=document.querySelector('input')word.type='password';</script>
</body> 
表单中用布尔值表示了增删属性
true表示添加了该属性
false表示移除了该属性
如：disabled ， checked ,selected
<body>
<input type="checkbox"><script>const check=document.querySelector('input')check.checked=true;</script>
</body>当checked为true时，就表示勾选，为false就取消勾选
按钮的属性disabled，默认状态是不禁用为'false'
<body>
<button>按钮</button><script>const btn=document.querySelector('button')btn.disabled='true';</script>
</body>按钮禁用之后变灰且按钮不能按
自定义属性
标签有自带的属性，也有自定义属性
一个标签可以设置多个自定义属性
语法：<data-自定义属性名="值">
获取值的语法：对象名.dataset.自定义属性名
<body><div data-numbers="1" data-id="one">1</div><script>const num=document.querySelector('div');console.log(num.dataset.id);console.log(num.dataset);</script>
</body>全部获取可以直接写对象名.dataset
