Day045--DOM操作
一. 操作DOM的三步走
- 获取事件源 (找开关)
- 事件(点一下)
- 处理程序(业务逻辑)(灯亮了)
二. 获取DOM的三种方式
console.log(window); // 查看window下的所有属性,函数
console.dir(document); // 打印document中的所有属性
console.log(document.documentElement); //html中的所有内容
console.log(document.body); //body中的所有内容
1. 通过id获取
document.getElementById('id') 获取id为XX的一个对象
2. 通过标签获取
document.getElementsByTagName('tag') 获取标签为XX的多个对象,伪数组. 遍历通过 for (var i; i<obj.length ; i++){ obj[i]}
3. 通过类名获取
document.getElementsByClassName('class') 获取类名为XX的多个对象
救命稻草:
document.querySelector("CSS所学的选择器") 直接放css选择器,获取的是单个DOM对象
document.querySelectorAll("CSS所学的选择器") 获取多个DOM对象, NoteList对象,[0]切片拿元素. 遍历可以用forEach()
querySelector 查询选择器
获取文档中 class=”example” 的第一个 <p> 元素:
document.querySelector("p.example");
获取文档中有 “target” 属性的第一个 <a> 元素：
document.querySelector("a[target]");
querySelectorAll
该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样.
document.querySelectorAll("p.example") 返回所有带有example类样式的p
<!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); // 打印document中的所有属性 console.log(document.documentElement); //html中的所有内容 console.log(document.body); //body中的所有内容 // 1. 通过id获取 var oDiv = document.getElementById('box'); console.log(oDiv); // 打印div对象 // 2. 通过标签获取,获取的是伪数组,多个DOM对象 var oTag1 = document.getElementsByTagName('div'); console.log(oTag1); // HTMLCollection [div#box.box, box: div#box.box] 伪数组 var oTag = document.getElementsByTagName('div')[0]; //HTMLCollection 伪数组 有数组的索引和length,但是没有数组的方法 console.log(oTag); oTag.style.color = 'red'; // 3. 通过类名获取, 获取的也是伪数组,多个DOM对象 var oClass = document.getElementsByClassName('box'); console.log(oClass); for (var i=0; i<oClass.length; i++){ // 样式设置 oClass[i].style.backgroundColor = 'orange'; } // 救命稻草 var oD = document.querySelectorAll('div p'); console.log(oD); oD.forEach(function (item, index) { console.log(item); item.style.color = 'yellow' }) </script> </body> </html>
二. js中的事件
常见事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /*窗口加载 1.先去加载文档 2.图片再去加载*/ window.onload = function () { console.log(document); console.log(document.getElementById('btn')); document.getElementById('btn').onclick = function () { alert(1) }; document.getElementById('btn').onmouseover = function () { console.log('鼠标悬停了') }; // onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。 // document.getElementById('btn').onmouseenter = function(){ // // } document.getElementById('btn').onmouseout = function () { console.log('鼠标离开了') }; } </script> </head> <body> <button id="btn">点我</button> <img src="" alt=""> </body> </html>
重点:
onclick 单击事件
onmouseover 鼠标悬停,鼠标穿过被选元素和被选元素的子元素都会触发事件
onmouseout 鼠标移出
onmouseenter 鼠标穿过被选元素会触发事件
onload
如果script在head标签中加载 ,使用window.onload()
窗口加载需要 1 等待文档加载完成 2,等待图片再去加载.
三. 处理程序(处理DOM对象+DCMAScript)
1. 值的操作
document.write('既可以放文本又可以放标签+文本');
//闭合标签设置文本的内容 <p></p>
oP.innerText //获取值
oP.innerText = 'alex' //设置值
//设置html+文本内容
oP.innerHTML //获取值
oP.innerHTML = '<p>哈哈哈</p>'; //虽然可以写入 但是注意标签嵌套
2. 标签属性的操作
//获取标签属性的值 oDiv.getAttribute('class'); //设置标签属性的值 oDiv.setAttribute(key,value); oDiv.setAttribute('class','active'); //不仅我们可以使用标签自带的属性, //什么是最好的? 自定义
3. 对象属性的操作
oDiv.id oDiv.className oDiv.title oImg.src //如果通过对象属性获取是绝对路径 对象的属性值 oImg.alt oAnchor.href oAnchor.target // _self 在本窗口打开 -blank 在新窗口打开 oRadio.checked //如果选中,通过对象属性获取的值是 true
4. CSS样式属性操作
oDiv.style.xxxx = 'oooo';
// 注意:带-的属性要用驼峰 //设置标签样式之后,他们的css都是行内样式,优先级最高
5. 显示隐藏的两种方式
1.可以通过控制css的style样式 对指定的DOM对象 设置属性 display:none|block;
2.通过控制className,来对元素显示隐藏,判断该标签是否由class='active',如果有active表示显示,没有active表示隐
获取标签的内容值& 对表单控件value的操作
<!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 = '<h2>嘿嘿嘿</h2>'; //既可以设置文本也可以设置标签 //只获取所有(当前标签和子标签)文本内容 console.log(oDiv.innerText); //获取父标签中所有的标签元素 (子标签,空格,换行,文本) console.log(oDiv.innerHTML); //设置value值 只适用于表单控件元素 document.getElementById('user').value = '你好啊'; console.log(document.getElementById('user').value); </script> </body> </html>
img标签设置src属性来设置图片内容,a标签设置href属性来设置超链接的内容
对标签的css操作(样式操作)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; 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){ this.style.backgroundColor = 'yellow'; isRed = false; } else{ this.style.backgroundColor = 'red'; isRed = true; } } </script> </body> </html>
对标签属性的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; 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赋值 // oDiv.id = 'box'; // oDiv.title = '哈哈哈'; // console.log(oDiv.className); //box //设置类名的时候 一定要用className 因为class是个关键字 oDiv.className = 'active'; oBtn.innerText = '显示'; isShow = false; }else{ // oDiv.id = ''; oDiv.className = 'box'; oBtn.innerText = '隐藏'; isShow = true; } }; </script> </body> </html>
对img标签属性的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*重置样式*/ *{ padding: 0; margin: 0; } .swiper{ width: 1226px; height: 460px; margin: 0 auto; background-color: red; position: relative; } .swiper span{ position: absolute; right: 0; top: 195.5px; width: 41px; height: 69px; background: green url("./icon-slides.png") no-repeat -125px ; } </style> </head> <body> <div class="swiper"> <span id="next"></span> <img src="./1.png" alt="" id="left"> </div> <script> var oImg = document.getElementById('left'); 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' } oNext.onmouseover = function () { // console.log( this.style); this.style.backgroundPositionX = '-42px'; //精灵图,找上面的background图片地址切图 this.style.backgroundPositionY = '0'; } </script> </body> </html>
属性 方法设置和获取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="box" class="box">alex</div> <a href="" target=""></a> <script> var oDiv = document.getElementsByTagName('div')[0]; oDiv.setAttribute('class',oDiv.className + ' active') </script> </body> </html>
对象属性和标签属性区分
<!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="gender" checked="checked" id="male"> 女 <input type="radio" name="gender" id="female"> <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( $('male').checked = false); console.log($('male').checked); // true 对象的属性 单选框 提交后台 建议使用对象属性checked console.log($('male').getAttribute('checked')); // 标签上的属性 </script> </body> </html>
JS中的三种弹框 alert(), confirm(), prompt()
1、alert():
①写在<script>标签中
②括号中的内容为字符串或者整型
③点击确认即可关闭，无返回值
2、confirm():
①写在<script>标签中
②括号中的内容为字符串和整型
③点击确认返回true，点击取消返回false
3、prompt(？，？):
①写在<script>标签中
②第一个问是显示的文本，第二个问是输入框中的默认值（可不写）
③点击确认返回输入框中的内容，取消返回null
