1.DOM基础：
<div id="dom1">我是DOM</div>
<div class="dom2">我是DOM2</div>
<div class="dom3">我是DOM3</div>
<!-- 通过id属性获取对象 -->
<script>
/* document.getElementById('dom1') */
/* 通过标签名获取对象 */
console.log(document.getElementsByTagName('div')[2]);
/* 获取是集合 */
/* 可通过下标来获取 */
console.log(document.getElementsByClassName('dom2'));
/* 通过querySelector获取含有指定class选择器的元素，含有相同class元素很多但是只获取第一个 */
document.querySelector('.class')
document.querySelector('#dom2')
console.log(document.querySelectorAll);
/* 获取一个集合 */
</script>
2.操作DOM:
<button onclick="fn()">点我试试</button>
<div id="dom1"><img datasrc=""></div>
<script>
/* 按钮点击玩之后，整个文档会被修改 */
function fn(){
/* document.getElementById('dom1').innerHTML = '平安夜平安'; */
/* 直接写dom1也可以获取但是不推荐 */
/* dom1.innerHTML = 'HELLO' */
/* innerHTMl会替换原来的内容 */
/* let d = document.getElementById('dom1');
d.innerHTML = "<h1>hello</h1>" */
/* innerText只会把文字显示在对应区域，不会转义标签元素 */
/* document.querySelector('#dom1').innerText = '123456' */
/* 使用document.querySelector可以使用后代选择器 */
/* 宽高不可以使用px */
let img = document.querySelector('#dom1 img').src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F12%2F20190112211236_PLfRe.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642904320&t=f3555475d062adc7fc0042367b842373'
}
console.log(img.src);
document.querySelector('#dom1 img').width = '200'
document.querySelector('#dom1 img').height = '200'
img.datasrc = '123'
/* dom元素设置值只能设置自身本来就有的属性 */
</script>
操作DOM练习：
<button onclick="fn()">点我</button>
<h1 id="qd">前端 YYDS</h1>
<h1 id="qd">前端 YYDS</h1>
<h1 id="qd">前端 YYDS</h1>
<script>
function fn(){
/* let q = document.getElementsByClassName('qd') */
/* 通过集合方式修改不了 */
let q = document.getElementsByClassName('qd');
for(var i=0;i<=q.length;i++){
q[i].innerHTML = '<h1>das </h1>'
}
let q = document.getElementById('qd');
q.innerHTML = '<h2>前端 yyds</h2>'
}
</script>
3.DOM样式：
<div id="app" style="background-color: red;">
</div>
<script>
let div = document.getElementById('app');
/* div含有style行内样式属性
所以需要在style上写宽高属性 在style上填写宽高必须要加上单位px */
div.style.width = '200px'
div.style.height = '200px'
div.style.marginTop = '100px'
/* 带-要用驼峰命名法 */
/* %是相对于父元素而设置的 */
/* px是物理元素，是相对于屏幕而言 */
/* div.style.width = '10%'
div.style.height = '10%' */
/* div元素自身没有width和height属性，所以不能直接设置 */
/* div.width = '200'
div.height = '200' */
</script>
DOM样式练习：
<!-- 有一个div width50px height 是50px 蓝色 点击这个div 宽高 都调整100*100
点击后变红色 -->
<div id="a" style="width: 50px; height: 50px; background-color: blueviolet;" onclick="fn()"></div>
<script>
function fn(){
let div = document.getElementById('a');
div.style.width = '100px'
div.style.height = '100px'
div.style.background = 'red'
div.style.transition = 'all 2s linear 0.5s';
}
</script>
4.DOM节点属性：
<div>
<h1>我是h1</h1>
<ul>
<li>我是li</li>
</ul>
<h2>我是h2</h2>
</div>
<script>
/* let li = document.querySelector('li') */
/* 返回父节点是ul */
/* console.log(li.parentNode); */
let div = document.querySelector('div');
/* 只返回子节点 如果存在空格或者换行也会被算成一个子节点 */
console.log(div.childNodes);
/* 获得ul */
/* div.childNodes[3] */
console.log(div.firstChild);
/* 返回第一个子节点 */
console.log(div.lastChild);
/* 返回最后一个子节点 */
console.log(div.firstChild.nextSibling);
/* 下一个子节点 */
console.log(div.lastChild.previousSibling);
/* 上一个子节点 */
console.log(div.firstElementChild);
/* 返回节点的第一个子节点，高版本的浏览器才能识别
Element忽略空格和换行直接获取元素节点 */
</script>
DOM节点属性练习：
<div>
<h1>我是h1</h1>
<ul>
<li>我是li</li>
</ul>
<h2>我是h2</h2>
</div>
<script>
/* <!--练习1 选择器找到li 通过查找父节点的方式把父节点background变红色 --> */
/* let li = document.querySelector('li'); */
/* li.parentNode.style.background = 'red' */
let div = document.querySelector('div');
/* 练习2 通过选择器 选择到div
通过div 来找h1 ，把h1改成背景红色，字体大写变成20px
通过div 来找ul ，把ul改成背景色是绿色
通过div 来找到h2， 把h2宽度改成200px 高度变成100px
背景色改成蓝色*/
/* div.childNodes[1].style.background = 'red'
div.childNodes[1].style.fontSize = '20px'
div.childNodes[3].style.background = 'green'
div.childNodes[5].style.background = 'blue'
div.childNodes[5].style.width= '200px'
div.childNodes[5].style.height= '100px' */
/*练习3 获得div 元素 通过使用firstChild 和 nextSibling
的方式把 ul 的color 属性变成红色
获得 div元素 通过使用lastChild 和 previSib的方式 把h2的font-size属性变成 50px*/
div.firstChild.nextSibling.nextSibling.nextSibling.style.background = 'red'
div.lastChild.previousSibling.style.fontSize = '50px'
</script>
