DOM:
Document object Model（文档对象模型）是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTAL文档
一、选取方式
1.通过id获取对象
<div id="dom1"> 我是Dom</div>
<script>
console.log(document.getElementById('dom1')); //打印结果<div id="dom1"> 我是Dom</div>
</script>
2.通过标签名获取对象， 获取到的是一个元素的集合，通过下标来选取对应的元素
<div id="dom1"> 我是Dom</div>
<script>
console.log(document.getElementsByName('div'));//打印结果>NodeList []
</script>
3.class属性获取对象
<div id="dom1" class="cl1"> 我是Dom</div>
<div>我是Dom2</div>
<div>我是Dom3</div>
<script>
console.log(document.getElementsByClassName('cl1'));//打印结果HTMLCollection [div#dom1.cl1, dom1: div#dom1.cl1]
</script>
4.通过querySelector获取 后面可以写id、class以及标签，（只会获取第一个）
<div id="dom1" class="cl1"> 我是Dom</div>
<div>我是Dom2</div>
<div>我是Dom3</div>
<script>
console.log(document.querySelector('.cl1'));//打印结果<div id="dom1" class="cl1"> 我是Dom</div>
console.log(document.querySelector('div'));//打印结果<div id="dom1" class="cl1"> 我是Dom</div>
console.log(document.querySelector('#dom1'));//打印结果<div id="dom1" class="cl1"> 我是Dom</div>
</script>
5.通过querySelectorAll获取，就是选取全部
<div id="dom1" class="cl1"> 我是Dom</div>
<div>我是Dom2</div>
<div>我是Dom3</div>
<script>
console.log(document.querySelectorAll('div'));//打印结果>NodeList(3) [div#dom1.cl1, div, div]
</script>
二、改变内容
-
innerHtml 替换原本的内容，可以识别html标签 通过点击事件改变内容
我是一句话//点击div后内容会改为：我不是一句话，并变成一级标题
2.innerText 替换原本的内容，不可识别HTML标签
<div onclick="fn()">我是一句话</div>//点击后替换为<h1>我不是一句话</h1>
<script>
function fn(){
document.querySelector('div').innerText = '<h1>我不是一句话</h1>'
}
</script>
3.点击替换img图片
<button onclick="fn()">平安夜快乐</button>
<div>平安夜是个黑暗的夜晚</div>
<img src="" alt="">
<script>
function fn(){
let img = document.querySelector('img');//选中img标签，改为img变量
img.src = 'https://img0.baidu.com/it/u=1649397542,3448252443&fm=26&fmt=auto';
//改变img的路径
img.width = '300';//设置宽度
img.height = '300';//设置高度
}
</script>
三、设置样式
document.querySelector('对象').style = '' 相当于css内联样式（行内样式） 例如：给一个div添加宽高，背景颜色
<div id="dd"></div>
<script>
let div = document.querySelector('div');
div.style.width = '200px'; //在style后的值要加上单位
div.style.height = '200px';
div.style.backgroundColor = 'red';//拼接的样式要用驼峰命名去掉-后，后面的首字母大写
</script>
练习
有一个div宽高50px背景蓝色，用js给它设置点击后宽高100px 背景红色，用过渡2秒实现，代码如下：
<div onclick="fn()"></div>
<style>
div{
width: 50px;
height: 50px;
background-color: blue;
}
</style>
<script>
function fn(){
let div = document.querySelector('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = 'red';
div.style.transition = 'all 2s linear';
}
</script>
四、节点
节点的是以数组的形式得到返回值，换行和空额都会成为一个节点
1.parentNode 父节点
给li父节点设置背景颜色为红色，代码如下
<div>
<ul>
<li></li>
</ul>
</div>
<script>
let li = document.querySelector('li');
//获取父节点
console.log(li.parentNode);
document.querySelector('li').parentNode.style.background = 'red';
</script>
2.childNodes 子节点
只返回子节点，如果有空格或者换行，也会被算成一个子节点
<div>
<ul>
<li></li>
</ul>
</div>
<script>
let ul =document.querySelector('ul');
//获取子节点
console.log(ul.childNodes);//放回值>NodeList(3) [text, li, text]
</script>
子节点练习
选择器选择到div
通过div来找到h1 把h1改成背景是红色字体 大小变成28px 通过div来找到ul把ul改成背景是绿色
通过div来找到h2 把h2的宽度变成20epx 高度变成108px 背景色改成蓝色
代码如下：
<div>
<h1>11</h1>
<ul></ul>
<h2>22</h2>
</div>
<script>
let div = document.querySelector('div');
console.log(div.childNodes);//返回值>NodeList(7) [text, h1, text, ul, text, h2, text]
div.childNodes[1].style.background = 'red';
div.childNodes[1].style.fontSize = '20px';
div.childNodes[3].style.width = '200px';
div.childNodes[3].style.height = '100px';
div.childNodes[3].style.background = 'green';
div.childNodes[5].style.width = '200px';
div.childNodes[5].style.height = '100px';
div.childNodes[5].style.background = 'blue';
</script>
3.nextSibling 下一个节点
<div>
<h1>11</h1>
<ul></ul>
<h2>22</h2>
</div>
<script>
let div = document.querySelector('div');
console.log(div.childNodes);//返回值>NodeList(7) [text, h1, text, ul, text, h2, text]
console.log(div.firstChild.nextSibling);//得到的返回值 <h1>11</h1>
</script>
4.previousSibling 上一个节点
<div>
<h1>11</h1>
<ul></ul>
<h2>22</h2>
</div>
<script>
let div = document.querySelector('div');
console.log(div.childNodes);//返回值>NodeList(7) [text, h1, text, ul, text, h2, text]
console.log(div.lastChild.previousSibling);//得到的返回值 <h2>22</h2>
</script>
上一个节点和下一个节点练习
获得div元素通过使用firstchild 和 nextSibling的方式把ul的color属性变成红色
获得div元素通过使用lastchild 和 previoussibling的方式把h2的font-size属性变成5epx
<div>
<ul>我是ul</ul>
<h2>我是h2</h2>
</div>
<script>
let div = document.querySelector('div');
div.firstChild.nextSibling.style.color = 'red';
div.lastChild.previousSibling.style.fontSize = '50px'
</script>
