DOM
Document Object Model
文档 对象 模型
对象：
属性和方法
属性：获取值和赋值
方法：赋值方法和条用方法
DOM树
document
head body
title meat link.... div.header div.content div.footer
DOM的获取
1.获取document对象
console.log(document);
2.获取html对象
document.documentElement
3.获取body对象
document.body
提供三种方法来采取body中的DOM
div #box .box
通过id获取：document.getElementById("box")
通过类获取：document.getElementByClassName("box")
for(var i = 0;i<olis.length;i++){olis[i].onclick = function(){alert(this.innerText);}}
通过标签获取： var oDiv = document.getElementByTagName("div");
DOM三步走
1.获取事件源
2.事件绑定
3.事件驱动（业务逻辑）
- 对标签样式属性的操作oDiv.onclick = function(){//点语法 set方法 get方法 readonly 只读console.log(this.style);this.style = null;this.style.width = '200px';this.style.marginLeft = '40px';}- 对标签属性的操作idclasssrcalthreftitletypename- 对值的操作innerText- 只获取文本innerHTML- 获取文本和标签value- 事件 - 对DOM对象的操作（增删改查）- 控制元素显示隐藏应用：网页中频繁性的切换建议使用这个1.控制style.display属性显示隐藏2.控制className对元素显示隐藏问题： 初始化的时候有渲染，应用：网页中少量的切换建议使用3.对元素的创建和销毁生命周期 出生 入死
1.对象
<script type="text/javascript">var person = { name:"qing", age:18,fav:function(){alert(this.name)}}person.fav();</script> 创建对象用{}来表示，里面的格式类似字典，但是key不用加""
2.对样式的操作
<!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" id="wrap"></div><p>qing</p><script type="text/javascript">var oDiv = document.getElementById("wrap");oDiv.onclick = function(){oDiv.style.width = "400px";oDiv.style.float = "left";}</script> </body> </html>
3.对标签属性操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.box{width: 42px;height: 70px;background: url("./images/icon-slides.png") no-repeat -86px 0;}</style> </head> <body><div class="box"></div><img src="./images/购物车.png" width="100px" alt="" id="shop"><script>document.getElementsByClassName("box")[0].onmouseover = function(){this.style.backgroundPosition = "0 0";}document.getElementsByClassName("box")[0].onmouseout = function(){this.style.backgroundPosition = "-86px 0";}var isHover = true;var oDiv = document.getElementById("shop");oDiv.onclick = function(){if (isHover){this.src = "./images/购物车-hover.png";isHover = false;} else{this.src = "./images/购物车.png";isHover = true;}}</script> </body> </html>
4.控制元素显示隐藏的方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.child{width: 200px;height: 200px;background-color: green;}.hidden{display: none;}</style> </head> <body><button id="btn">隐藏</button><div class="box"><div class="child" id="child"></div></div><!--1.样式属性 display:none|block2.通过控制标签属性className 对类型添加 移除3.DOM创建 销毁 创建销毁--><script>var oChild = document.getElementById("child");document.getElementById("btn").onclick = function(){// oChild.style.display = "none";// oChild.className += " hidden";oChild.className += " hidden";}</script> </body> </html>
5.对值得操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.box{width: 200px;height: 200px;background-color: red;}.hidden{display: none;}</style> </head> <body><button id="btn">隐藏</button><input type="text" id="user" value="qing"><div class="box"><div class="child" id="child"></div></div><script>var oChild = document.getElementById("child");document.getElementById("btn").onclick = function(){// oChild.style.display = 'none';// oChild.className +=' hidden';oChild.className = oChild.className + ' hidden';console.log(oChild.className);console.log(this.innerText);console.log(this.innerHTML);// this.innerHTML += "<span>哎哟</span>";this.innerText += "<span>哎呦</span>";}//从此处可以看出事件操作时异步的，不等待console.log(document.getElementById("user").value);document.getElementById("user").value = "qingqing";</script> </body></html>
6.DOM操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body><div id="father"><div id="laoda"></div><div id="laoer"></div></div><script>var oLaoda = document.getElementById("laoda");console.log(oLaoda.nextSibling); //会识别文本标签，空格换行 console.log(oLaoda.nextElementSibling);//浏览器兼容性var a = oLaoda.nextElementSibling || oLaoda.nextSibling ;console.log(a);console.log(document.getElementById("father").children);console.log(oLaoda.parentNode);</script> </body></html>
7.真DOM操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body><button id="btn">隐藏</button><div class="box" id="box"></div><script>setTimeout(function () {var oBox = document.getElementById("box");// DOM的创建 子元素 节点var oChild = document.createElement("div");oChild.className = "child";oChild.style.width = "200px";oChild.style.height = "200px";oChild.style.background = "red";// 父.appendChild(子) oBox.appendChild(oChild);},2000)</script> </body></html>
8.选项卡
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.active{background: red;}#aaa{width: 50px;height: 50px;background-color: yellow;position: relative;}.box{width: 200px;height: 200px;background-color: red;position:absolute;top: 50px;display: none;}</style> </head> <body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><div id="aaa">qing<div class="box"></div></div><script>var oBtns = document.getElementsByTagName("button");for(var i = 0;i < oBtns.length;i++){oBtns[i].onclick = function(){for (var j = 0;j < oBtns.length;j++){oBtns[j].className = "";}this.className = "active";}}// onmouseover 当穿过父元素和子元素时 会调用 onmouseout// onmouseenter只穿过父元素 onmouseleavedocument.getElementById("aaa").onmouseenter = function () {console.log(1111);this.children[0].style.display = "block";}document.getElementById("aaa").onmouseleave = function(){this.children[0].style.display = "none";}</script> </body></html>
