一 什么是DOM
DOM : 文档对象模型 它为文档提供了结构化表示 并定义了如何通过脚本来访问文档结构 . 目的就是为了能让js操作HTML元素而制定的一个规范 .
DOM树(一切都是节点):
元素节点 : HTML标签
文本节点 : 标签中的文字(比如标签之间的空格 换行)
属性节点 : 标签的属性
DOM可以做什么 : 找对象(元素节点) 设置对象的值 设置元素的样式 动他创建和删除元素 事件的触发响应 : 事件源 事件 事件的驱动程序
获取DOM的方式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="box" id="box"> <p>alex</p> </div> <p class="box">吴老板</p> <script type="text/javascript"> console.log(window); console.dir(document); console.log(document.documentElement); console.log(document.body) //1.通过id获取 var oDiv = document.getElementById('box'); console.log(oDiv); // 2.通过标签获取 获取是伪数组 多个DOM对象 var oTag = document.getElementsByTagName('div')[0]; //HTMLCollection 伪数组 有数组的索引和length,但是没有数组的方法 console.log(oTag); oTag.style.color = 'red'; // 3.通过类名获取 获取的也是伪数组 多个DOM对象 var oActives = document.getElementsByClassName('box'); console.log(oActives); for(var i = 0; i < oActives.length; i ++){ //样式设置 oActives[i].style.backgroundColor = 'green'; } //救命稻草 var oD = document.querySelectorAll('div p') console.log(oD); oD.forEach(function (item,index) { console.log(item); }) </script> </body> </html>
二 DOM中的操作:
1 js对值的处理:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"> wusir <p>alex</p> </div> <input type="text" value="" id="user"> <script> var oDiv = document.getElementById('box'); // oDiv.innerText= '<h1>哈哈哈哈</h1>'; // oDiv.innerHTML = '嘿嘿嘿嘿'; // oDiv.innerHTML = '<h3>嘿嘿嘿</h3>' //只获取所有(当前标签和子标签)文本内容 // console.log(oDiv.innerText); //获取父标签中所有的标签元素 (子标签,空格,换行,文本) console.log(oDiv.innerHTML); //设置value值 只适用于表单控件元素 document.getElementById('user').value = 'alex'; console.log(document.getElementById('user').value); </script> </body> </html>
2 对 css 的操作:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { 200px; height: 300px; background-color: red; } </style> </head> <body> <div class="box"></div> <script> var oDiv = document.getElementsByClassName('box')[0]; var isRed = true; oDiv.onclick = function () { if (isRed) { console.log(this.style); //this 谁做的事件操作 this指向谁 this.style.backgroundColor = 'green'; this.style.width = '400px'; isRed = false; } else { this.style.backgroundColor = 'red'; isRed = true; } } </script> </body>
3 对标签属性操作:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { 200px; height: 300px; background-color: red; } #box { background-color: yellow; } .active { display: none; } </style> </head> <body> <button id="btn">切换</button> <div class="box"></div> <script> var oDiv = document.getElementsByClassName('box')[0]; var oBtn = document.getElementById('btn'); var isShow = true; //不等待 oBtn.onclick = function () { if (isShow) { // 对id 对标签赋值id // oDiv.id = 'box'; // oDiv.title = '哈哈哈'; // console.log(oDiv.className); //box //设置类名的时候 一定要用className 因为class是个关键字 oDiv.className = oDiv.className + ' active'; isShow = false; }else{ oDiv.className = 'box'; isShow = true; } } console.log(11111); </script> </body> </html>
4 .img标签属性的操作:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*重置样式*/ *{ padding: 0; margin: 0; } .swiper{ 1000px; height: 460px; margin: 0 auto; background-color: red; position: relative; } .swiper span{ position: absolute; right: 0; top: 50%; 41px; height: 69px; background: green url("./icon-slides.png") no-repeat -125px 0; } </style> </head> <body> <div class="swiper"> <span id="next"></span> <img src="./1.png" alt="" id="meinv"> </div> <script> var oImg = document.getElementById('meinv'); console.dir(oImg); var oNext = document.getElementById('next'); oImg.onmouseover = function () { //this.src 获取的是DOM对象的属性 //console.log(this.src); //绝对路径 //获取出来的就是标签上的属性 通过getAttribute('');获取的标签上的属性 console.log(this.getAttribute('src')); this.src = '1_hover.png'; this.alt = '哈哈哈' } oImg.onmouseout = function () { this.src = '1.png' //console.log(this.getAttribute('src')) } oNext.onmouseover = function () { // console.log( this.style); this.style.backgroundPositionX = '-42px'; this.style.backgroundPositionY = '0'; } </script> </body> </html>
5 .属性方法设置和获取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box">alex</div> <script> // document.getElementsByTagName('div')[0].setAttribute() </script> </body> </html>
6 .对象属性和标签属性区分
# 区分DOM对象属性 和 标签属性 //this.src 获取的是DOM对象的属性 console.log(this.src); //绝对路径 //获取出来的就是标签上的属性 通过getAttribute('');获取的标签上的属性 console.log(this.getAttribute('src'));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" name="user" id="user"> <img src="./1.png" alt="" id="aImg"> 男 <input type="radio" name="sex" checked="xxxxx" id="nan"> 女 <input type="radio" name="sex" id="nv"> <script> function $(idName) { return document.getElementById(idName); } var oInput = document.getElementById('user'); var oImg = document.getElementById('aImg'); console.dir(oInput);//DOM对象 console.log(oInput.type); console.log(oInput.getAttribute('type')); console.dir(oImg); console.log(oImg.src); console.log(oImg.getAttribute('src')); console.log( $('nan').checked); //对象的属性 单选框 提交后台 建议使用对象属性checked console.log( $('nan').getAttribute('checked')); //标签上属性 </script> </body> </html>