DOM基础
<div id="dom1">我是DOM1</div>
<div class="class">我是DOM2</div>
<div class="class">我是DOM2</div>
<script>
//通过id属性获取对象
//document.getElementById('dom1')
//通过标签名获取对象
//console.log(document.getElementsByTagName('div')[1]);
//通过class属性获取对象
//console.log(document.getElementsByClassName('class')[0]);
/* 通过querySelector获取id选择器 */
document.querySelector('#dom1')
/* 通过querySelector获取含有指定class选择器，含有相同class的元素很多，但是只获取第一个 */
document.querySelector('.class')
/* 通过querySelector获取含有指定元素选择器的元素，有多个元素能匹配上，但是只获取第一个 */
document.querySelector('div')
console.log(document.querySelectorAll('div')[0]);
</script>
DOM操作
<button onclick="fn()">给图片设置属性值</button>
<button onclick="getfn()">获取图片的属性值</button>
<div id="dom1" class="cname">
平安夜是个黑暗的夜晚
<img src="" alt="" datasrc="">
</div>
<!-- <div class="cname">
平安夜是个黑暗的夜晚
</div>
<div class="cname">
平安夜是个黑暗的夜晚
</div> -->
<script>
let img = document.querySelector('#dom1 img');
function getfn(){
console.log('图片的src',img.src);
console.log('图片的alt',img.alt);
console.log('图片的width',img.width);
console.log('图片的height',img.height);
/* 获取自定义的属性值 */
console.log(img.datasrc);
}
function fn(){
/* innerText也会替换原来的内容 */
/* innerText 只会把文字显示在对应的区域，不会转义标签元素*/
// document.querySelector('#dom1').innerText = '<h1>平安夜平安</h1>'
/* 使用document.querySelector可以使用后代选择器 */
/* 使用变量存起来的方式 不用每次都再找一遍 性能更好 */
img.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F6966235244%2F0&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642904119&t=28816a90dea8dfddcc5cab8620bfa62f"
/* 宽高不可以使用px单位 */
img.width = '200'
img.height = '200'
/* dom元素.的方式 设置值，只能设置在元素身上原来就有的属性
比如 src 比如 alt width height */
/* 自定义的属性 在元素上 是不会体现出值 */
/* 但是这种方式 类似于 在对象上添加了一个属性datasrc，
属性的值是123 */
/* img dom document object model */
img.datasrc = '123'
img.alt = '图片加载中'
/* 通过集合的方式直接去修改是改不了的
document.querySelectorAll也不可以
只能通过循环遍历的方式去修改*/
// let ds = document.getElementsByClassName('cname')
// for(var i=0;i<ds.length;i++){
// ds[i].innerHTML = '<h1>平安夜平安</h1>'
// }
// document.querySelectorAll('.cname').innerHTML = '123'
/* 按钮点击完之后 整个文档会被修改 */
// document.write('hello');
/* 直接写dom1也可以获取id是dom1的元素，但是不推荐 */
/* innerHTML支持里面写标签 */
/* innerHTML后面写的dom会替换元素原来的内容 */
// let d = document.getElementById('dom1');
// d.innerHTML = "<h1>平安夜平安</h1>"
}
/* 有个h1标签 有一句话 点击h1 把h1里面的内容替换掉
换成h2 再加内容
要使用 id 选择器 class选择器 元素选择器
querySelector选择器 和querySelectorAll选择器 分别实现
*/
</script>
节点属性
/* childNodes返回子节点集合,childNodes[i] */
/* 只返回子节点，如果存在空格或者换行，也会被算成一个子节点 */
//let div=document.querySelector('div');
//获得ul
//console.log(div.childNodes[3]);
//firstChild返回节点的第一个子节点
//lastChild返回节点的最后一个子节点
//nextSibling 下一个节点
//previousSibling上一个节点
/* let div=document.querySelector('div');
console.log(div.childNodes);
div.lastChild.previousSibling.style.fontSize='50px';
div.firstChild.nextSibling.nextSibling.nextSibling.style.color='red'; */
//忽略空格和换行；
//firstElementChild返回节点的第一个子节点
//lastElementChild返回节点的最后一个子节点
//lastElementChild返回节点的最后一个子节点
//nextElementChild返回节点下一个子节点
//previousElementChild返回节点的上一个子节点
/* let div=document.querySelector('div');
console.log(div.childNodes);
div.childNodes[1].style.background='red';
div.childNodes[1].style.fontSize='20px';
div.childNodes[3].style.background='green';
div.childNodes[5].style.width='200px';
div.childNodes[5].style.height='100px';
div.childNodes[5].style.background='blue'; */
/* let li = document.querySelector('li');
console.log(li);
parentNode返回节点的父节点
console.log(li.parentNode);
li.parentNode.style.background = 'red'; */
