innerText也会替换原来的内容
innerText 只会把文字显示在对应的区域，不会转义标签元素
使用document.querySelector可以使用后代选择器
使用变量存起来的方式 不用每次都再找一遍 性能更好
innerHTML支持里面写标签
innerHTML后面写的dom会替换元素原来的内容
let d = document.getElementById('dom1')
d.innerHTML = "
平安夜平安
" <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>
节点属性
/* 高版本的浏览器可以识别
firstElementChild和firstChild的区别是 忽略空格和换行直接获取元素节点
中间带Element的选择节点属性也是忽略空格和换行直接获取元素节点*/
let div = document.querySelector('div');
/* firstElementChild 返回节点的第一个子节点 */
/* lastElementChild 返回节点的最后一个子节点 */
/* nextElementSibling 下一个节点 */
/* console.log(div.firstElementChild.nextElementSibling) */
/* previousElementSibling 上一个节点 */
/* console.log(div.lastElementChild.previousElementSibling) */
/* 老的浏览器也可以用 比如ie6 7 */
/* 获得 div元素 通过使用firstChild 和 nextSibling */
/* 的方式 把ul的color 属性变成 红色 */
// let div = document.querySelector('div');
// console.log(div.childNodes);
// div.firstChild.nextSibling.nextSibling.nextSibling.style.color = 'red'
// /* 获得 div元素 通过使用lastChild 和 previousSibling */
// /* 的方式 把h2的font-size属性变成 50px*/
// div.lastChild.previousSibling.style.fontSize = '50px'
/* firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 */
// let div = document.querySelector('div');
// console.log( div.firstChild )
/* lastChild 返回节点的最后一个子节点 */
// let div = document.querySelector('div');
// console.log( div.lastChild )
/* nextSibling 下一个节点 */
// let div = document.querySelector('div');
// console.log( div.firstChild.nextSibling )
/* previousSibling 上一个节点 */
/* let div = document.querySelector('div');
console.log( div.lastChild.previousSibling ) */
/* childNodes 返回子节点集合，childNodes[i] */
/* 只返回子节点 如果存在空格或者换行 也会被算成一个子节点 */
// let div = document.querySelector('div');
// let c = div.childNodes;
// console.log(c);
// c[1].style.background = 'red'
// c[1].style.fontSize = '20px'
// c[3].style.background = 'green'
// c[5].style.width = '200px'
// c[5].style.height = '100px'
// c[5].style.background = 'blue'
/*
选择器 选择到 div
通过div 来找到h1 把h1改成背景是红色 字体大小变成20px
通过div 来找到ul 把ul改成背景是绿色
通过div 来找到h2 把h2的宽度变成200px 高度变成100px
背景色改成蓝色
*/
// let li = document.querySelector('li');
// /* parentNode 返回节点的父节点 */
// console.log(li.parentNode);
/* 选择器 选择到li 通过查找父节点的方式 把他的父节点
background变成红色 */
// li.parentNode.style.width = '100px'
// li.parentNode.style.height = '100px'
// li.parentNode.style.background = 'red'
