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'; } - 对标签属性的操作 id class src alt href title type name - 对值的操作 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{
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{
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{
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|block
2.通过控制标签属性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{
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{
50px;
height: 50px;
background-color: yellow;
position: relative;
}
.box{
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只穿过父元素 onmouseleave
document.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>