js中的domdom
1、dom
<body>
<div id="dom1" class="classdom">我是dom1</div>
<div class="classdom">我是dom2</div>
<div class="classdom">我是dom3</div>
<!--
DOM：Document Object Model（文档对象模型）
是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档
-->
<script>
/* 兼容低版本浏览器 比如ie8 以及 以下 */
/* 通过id属性获取对象 */
/* console.log( document.getElementById('dom1') ) */
/* 通过标签名获取对象 */
/* getElementsByTagName是获取到元素的集合
通过下标来选取对应的元素 */
/* console.log( document.getElementsByTagName('div')[2] ) */
/* 通过class属性获取对象 */
/* getElementsByClassName也是一个元素集合
通过下标来选择元素 */
/* console.log( document.getElementsByClassName('classdom')[1] ); */
/* 适合用于高版本浏览器 */
/* 通过querySelector获取含有指定id选择器的元素 */
// console.log( document.querySelector('#dom1') )
/* 通过querySelector获取含有指定class选择器的元素 含有相同class的元素有很多
但是只获取第一个 */
// console.log( document.querySelector('.classdom') )
/* 通过querySelector获取含有指定元素选择器的元素 有多个元素能匹配上
但是只能获取到第一个 */
// console.log( document.querySelector('div') )
/* 使用querySelectorAll可以获取多个含有对应元素选择器的dom元素 */
/* 通过下标可以选择第几个 */
// console.log( document.querySelectorAll('div')[1] )
/* 使用querySelectorAll可以获取多个含有对应类选择器的dom元素 */
/* 通过下标可以选择第几个 */
// console.log( document.querySelectorAll('.classdom')[2] )
</script>
</body>
复制代码
2、操作dom
<body>
<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>"
}
</script>
</body>
复制代码
3、修改样式
<body>
<!-- onclick="fn()" 点击的时候去执行这个fn函数 -->
<div id="app" onclick="fn()" style="background:red;width: 50px;height:50px;">
</div>
<script>
/* 对象.style.property=新样式 通过id属性获取对象 */
let div = document.getElementById('app');
/* div具有style 行内样式属性
所以需要在style上写宽高属性 在style上填写宽高必须要加上单位px */
/* px 是物理像素 是相对于屏幕而言 */
/* %是相对于父元素而设置的 */
function fn() {
div.style.width = '100px'
div.style.height = '100px'
div.style.marginTop = '100px'
div.style.transition = 'all 1s'
}
/* 因为div元素自身没有width和height属性，
所以不能直接的设置 */
// div.width = '200px'
// div.height = '200px'
</script>
</body>
复制代码
节点属性
<body>
<div>
<h1>我是h1</h1>
<ul>
<li>我是li</li>
</ul>
<h2>我是h2</h2>
</div>
<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'
</script>
</body>
